망할고양이의 도피처

Javascript의 map() 함수

자바스크립트 배열의 내장함수인 map을 활용하여 컴포넌트를 반복문처럼 렌더링할 수 있습니다. 

map 함수는 전달된 함수를 사용해서 배열 내에서 원하는 규칙에 따라 가공 후 새로운 배열을 생성할 수 있습니다.

[사용방법]

[예시 - 01 ] - 아래 내용을 개발자 도구에서 수행해 볼 수 있습니다.

var arr = [5, 4, 9, 7];

var result = arr.map(function(vv){
  return vv * vv;
});

//결과
result = [25, 16, 81, 49];

[예시 - 02 ] - ES6 문법으로 작성

const arr = [5, 4, 9, 7];
const result = arr.map(vv => vv * vv);

//결과
console.log(result);

방금 작성한 데이터 배열과 유사한 형태로 컴포넌트를 배열로 작성할 수 있습니다. 

component / IterPrc.js 파일을 생성합니다. 

export default function IterPrc(){


    const datas = ["1번","2번","3번","4번"];
    const dataList = datas.map((item,idx) => <li>{idx}{item}</li>);

    return (
        <>
            <ul>{dataList}</ul>
        </>
    );
}

state에 문자열이나 숫자값이 아닌 Object 형태의 값을 넣어서 컨트롤 해보겠습니다. 

StatePrc.js 파일을 component 폴더 하위에 생성합니다. 

import { useState } from "react";

export default function StatePrc(){

    

    const [msg, setMsg] = useState({"message" : "", "user" : ""});

    return (

        <>
            <div>
                <h1>Event Test</h1>
                <div>message : {msg.message}</div>
                <div>user : {msg.user}</div>
                <input type="text"
                    name="msg"
                    placeholder="입력칸"
                    value={msg.message}
                    onChange={(ev)=>{
                        setMsg({...msg, "message" : ev.target.value});
                    }}
                ></input>
                <input type="text"
                    name="user"
                    placeholder="입력칸"
                    value={msg.user}
                    onChange={(ev)=>{
                        setMsg({...msg, "user" : ev.target.value});
                    }}
                ></input>
                <button onClick={()=>{
                    alert(msg.message + "메세지를 초기화 합니다.");
                    setMsg({"message" : "", "user" : ""});
                }}>초기화</button>
            </div>
        </>
    );
}

App.js에  방금 작성한 StatePrc 컴포넌트가 출력되도록 추가합니다. 

왼쪽 input은 msg.message를 값을 참조하고 

오른쪽 input은 msg.user의 값을 참조하도록 코드를 작성하였습니다.

state의 값중 object의 값을 변경할 때에는 기존값을 spread 연산자라고 하는 ... 연산자를 이용하여 값을 변경합니다.

지금까지 공부한 기능을 이용하여 복습의 시간을 위해 간단한 코드를 작성해 보겠습니다. 

onChange 이벤트를 이용하여 State에 값을 전달 한뒤 그 값이 화면에 잘 변경되어 출력되도록 하겠습니다. 

component 폴더 하위에 EventAndState.js 파일을 생성하고 아래와 같이 작성합니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
        </div>
    );
}

1. useState를 이용하여 name과 setName이 담겨진 배열을 생성하였습니다.

2. input 에 onChange 이벤트를 작성하였습니다. 

3. State에 값이 잘 전달되었는지 확인을 위해 name값을 화면에 출력하였습니다. 

(ev.target.value는 ev라는 이벤트가 발생한 target의 value값을 가리킵니다.)

동일한 기능을 하지만 여러 형태로 작성하는 방법이 있습니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    function onChangeTest(ev){
        setName(ev.target.value)
    }
    const onChangeTest2 = ev => setName(ev.target.value);

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
            <h1>다른 형태의 코드 # 1</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest}
            />
            <h1>다른 형태의 코드 # 2</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest2}
            />
        </div>
    );
}

useState

useState는 가장 기본적인 Hook 이며 함수 컴포.넌트에서도 가변적인 상태를 가질 수 있도록 합니다. 

함수 컴포넌트에서 상태관리를 해야하는 경우 사용하게 됩니다. 

단순히 말씀드리자면 state는 컴포넌트가 가지고 있는 속성값입니다. (그래서 뭐? 라고 할 수 있지만)
이 속성값이 변하면 리엑트는 자동으로 UI를 다시 출력합니다.

즉, 이 state만 잘 다룬다면 화면을 다시 그려주는 작업은 react가 다 알아서 해준다는 거죠

일단, 버튼을 클릭하면 화면의 Text가 변경되는 기능을 만들어 보도록 하겠습니다. 

component 폴더 하위에 State.js파일을 생성합니다. 

State.js

export default function State(){

    let textValue = "AAAA";

    function ChangeTextValue(){
        if(textValue === "AAAA"){
            textValue = "BBBB";
        }else{
            textValue = "AAAA";
        }
        document.getElementById("text_str").innerHTML = textValue;
        console.log(textValue);
        
    }
    return(
        <div>
            <h1>State</h1>
            <h2 id="text_str">{textValue}</h2>
            <button onClick={ChangeTextValue}>Text Change</button>
        </div>
    );
}

생성된 component를 App.js에 추가합니다. 

App.js

import './App.css';
import Greeting from './component/Greeting';  //추가된 항목
import Welcome from './component/Welcome';  //추가된 항목
import Event from './component/Event';  //추가된 항목
import State from './component/State';
function App() {
  return (
    <div className="App">
      {/* <div className='test'>App component</div> */}
      {/* <Greeting />    */}
      {/* <Welcome /> */}
      {/* <Event/> */}
      <State />
    </div>
  );
}

export default App;

이렇게 작성된 State.js의 코드는 state를 사용한 코드가 아닌 변수의 값을 dom 객체에 직접 넣은 코드입니다. 

이 코드를 동일하게 state를 이용하여 구현해보도록 하겠습니다. 

State.js를 수정합니다.

import { useState } from "react";

export default function State(){

    let textValue = "AAAA";

    
    const [name, setName] = useState("AAAA"); 

    // function ChangeTextValue(){
    //     if(textValue === "AAAA"){
    //         textValue = "BBBB";
    //     }else{
    //         textValue = "AAAA";
    //     }
    //     document.getElementById("text_str").innerHTML = textValue;
    //     console.log(textValue);
        
    // }
    return(
        <div>
            <h1>State</h1>
            <h2 id="text_str">{name}</h2>
            {/* <button onClick={ChangeTextValue}>Text Change</button> */}
            <button onClick={function(){   
                setName(name === "AAAA" ? "BBBB" : "AAAA");

            }}> changeText </button>
        </div>
    );
}

state를 사용하기 위해서는 반드시 지켜야할 것 이 있습니다.

1. state사용시 import 해야한다. 

      const [name, setName] = useState("AAAA");

      useState 함수의 파라메터는 상태의 기본값을 넣어줍니다.  이 함수를 호출하게되면 return되는 값은 배열이며

      0번째 값은 상태 값, 1번째 값은 setter 함수가 담겨 있습니다. 

      즉, name에 "AAAA"를 넣었으며 name값을 수정하는 함수의 이름은 setName이라는 의미입니다. 

3. 상태값의 변경은 setter 함수를 이용하여 수행한다.

propTypes를 지정하지 않았을 때 warning을 발생시키는 작업을 수행하도록 하겠습니다.

방법은 propTypes 작성시 뒷부분에 isRequired를 추가로 작성해주면 해당 기능을 사용할 수 있습니다. 

Props.js를 수정합니다.

import PropTypes from 'prop-types';

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        <hr/>
        <div>PropTypes Test : {props.typeTest}  </div>
        <hr/>
        <div>isRequire Test : {props.isRequireTest}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
    ,typeTest : "문자"
};

Props.propTypes = {
    typeTest : PropTypes.string
    , isRequireTest : PropTypes.string.isRequired
};

Apps.js를 수정하여 오류를 제거하도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="prop 테스트" typeTest="99" isRequireTest="필수값을 넣었습니다.">내가 children이다 </Props>
    </div>
  );
}

export default App;

propTypes를 이용한 props의 Type 지정

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할때 propTypes를 사용하여 지정할 수 있습니다.

프로젝트의 규모가 커질 수록 예상할 수 없는 곳에서 발생하는 Error들이 있습니다. 이러한 Error를 예방하기 위해서는 PropTypes를 지정하고 타입(type)을 확인하는 것이 좋습니다.

방법은 이전 장에서 학습한 defaultProp와 유사하며 import구문을 이용하여 'prop-types'를 로드해야합니다.

Props.js 를 수정합니다. 

import PropTypes from 'prop-types';

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        <hr/>
        <div>PropTypes Test : {props.typeTest}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
    ,typeTest : "문자"
};

Props.propTypes = {
    typeTest : PropTypes.string
};

Apps.js도 prop 값을 추가로 전달하기 위해 수정합니다.

숫자값을 전달할 때에는 『 typeTest="99" 』가아닌 『 typeTest={99} 』 형태로 전달할 수 있습니다. 

『 typeTest="99" 』로 전달하는 경우 문자열로 인식되게 됩니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="prop 테스트" typeTest={99} >내가 children이다 </Props>
    </div>
  );
}

export default App;

결과를 보면 타입을 string으로 지정하고 숫자 99를 전달하였지만 정상적으로 99가 표현됩니다. 

하지만 개발자 도구를 열어서 확인해보면 아래 그림과 같이 경고가 발생한 것을 확인할 수 있습니다. 

많은 종류의 PropTypers가 있으며 자세한 내용과 종류는 아래 링크에서 확인할 수 있습니다.

https://github.com/facebook/prop-types

children..?

props를 설명하는 글은 많지만 props 중 children을 설명하는 글을 본적이 없는것 같아서 작성하게 되었습니다.

리엑트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 prop가 children 입니다. 

Apps를 수정하여 알아보도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props>내가 children이다 </Props>
    </div>
  );
}

export default App;

children을 표현할수 있도록 Props 를 수정합니다..

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
};

props

props는 properties를 가리키는 용어입니다. 컴포넌트의 속성을 설정할 때 사용하는 요소입니다. 

컴포넌트를 불러와 사용하는 상위 컴포넌트에서 설정할 수 있습니다. (강좌에서는 상위 컴포넌트 : App 입니다.)

component 하위에 props.js 파일을 하나 생성하도록 합니다. 

Props.js

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        </>
    );

Apps.js를 아래와 같이 수정 합니다. 

Props.js에서 props값을 출력하도록 작성하고 Apps.js에서 props.name 값을 전달합니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="abcd"/>
    </div>
  );
}

export default App;

Apps에서 전달한 abcd 값을 삭제하면...?

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props/>
    </div>
  );
}

export default App;

값이 절달되지 않아 값의 출력이 없습니다. 그럼 기본값을 설정하는 defaultProps를 사용해보겠습니다. 

Props.js를 다시 수정하겠습니다.

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
};

버튼을 클릭하거나 내용이 수정되었을때 어떠한 동작을 하도록 해보겠습니다. 

component 폴더 하위에 Event.js파일을 생성합니다. 

export default function Event(){

    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button>button A</button>
                <button>button B</button>

            </div>
            <input type="text"/>
        </div>
    );
}

생성한 component를 App.js에 추가합니다. 

import './App.css';
import Event from './component/Event';  //추가된 항목
function App() {
  return (
    <div className="App">
      <Event/>
    </div>
  );
}

export default App;

button A를 클릭할 때 alert 창을 호출하도록 작성하겠습니다. 

Event.js 파일을 수정합니다. 

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button>button B</button>
            </div>
            <input type="text"/>
        </div>
    );
}

button B에 onClick 이벤트를 직접 작성해보도록 하겠습니다. 

Event.js 파일을 수정합니다. 

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
            </div>
            <input type="text"/>
        </div>
    );
}

함수로 값을 전달하도록 하겠습니다. 

Event.js 파일을 수정합니다.  (함수 추가, 버튼 추가)

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text"/>
        </div>
    );
}

input에 내용이 변경될 때 마다 console에 변경된 text를 출력하도록 하겠습니다. ( onChange 사용 )

Event.js 파일을 수정합니다.

export default function Event(){

    /* alert을 호출합니다. */
    function callAlert(){
       alert("Button A를 클릭했어요");
    }

    /* 전달받은 값을 console에 출력합니다. */
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    
    /* input Text 내용을 console에 출력합니다. */
    function printText(e){
        console.log(e.target.value);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text" onChange={printText}/>
        </div>
    );
}

    - input에 onChange를 추가하고 동작할 함수의 이름을 작성합니다.

    - 동작할 함수는 event argument를 받아서 사용할 수 있기 때문에 e.target.value를 사용하여 이벤트를 전달한 객체의

      value값을 사용할 수 있습니다. 

input을 한개 더 추가한 뒤 기존에 생성한 consoleTextPrint 함수를 이용해서 onChange 이벤트 안에 직접 작성해보겠습니다. 

Event.js 파일을 수정합니다.

export default function Event(){

    /* alert을 호출합니다. */
    function callAlert(){
       alert("Button A를 클릭했어요");
    }

    /* 전달받은 값을 console에 출력합니다. */
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    
    /* input Text 내용을 console에 출력합니다. */
    function printText(e){
        console.log(e.target.value);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text" onChange={printText}/>
            <input type="text" onChange={
                e => {
                    const targetValue = e.target.value;
                    consoleTextPrint(targetValue);
                }
            }/>
        </div>
    );
}

CSS를 적용하는 방법은 3가지 방법이 있습니다. 

• inline로 바로 작성하는 방법
• CSS파일을 이용하여 작성
  
  • component 에 종속되지 않는 css 작성
  • component 에 종속되는 않는 css 작성

inline로 바로 작성하는 방법

아래 코드처럼 h2 테그안에 style 속성을 객체형식으로 지정하여 사용합니다. 

주의할 점은 '-' 를 사용하지않고 카멜 케이스로 작성합니다. 

export default function Greeting(){
    return <h2 style={
        {
            color : "#F33"
            ,paddingLeft : "200px"
            ,opacity : 0.3
        }
    }>Greeting!!!</h2>
}

CSS파일을 이용하여 작성 - component 에 종속되지 않는 css 작성

create-react-app으로 프로젝트를 생성하면 index.css, App.css가 이미 생성이 되어 있습니다. 

내용을 보면  index.css의 경우 전체 프로젝트에 영향을 미치는 css가 작성되어 있고 App.css는 App컴포넌트에만 적용되는 것처럼 작성이 되어있습니다.

App.css -아래 코드처럼 class를 추가합니다. 

.test {
  width: 100px;
  height: 100px;
  background-color: rgb(138, 97, 35);
}

App.js - <div className='test'>App component</div> 를 추가하였습니다. 

기존 class를 적용하는것처럼 class="클래스명"으로 사용하는 형태가 아닌  className이라는 속성으로 적용해야합니다.

import './App.css';
import Greeting from './component/Greeting';  
import Welcome from './component/Welcome'; 
function App() {
  return (
    <div className="App">
      <div className='test'>App component</div>
      <Greeting />   
      <Welcome />
    </div>
  );
}

export default App;

Greeting.css 파일을 생성한 뒤  아래 코드를 추가합니다. (동일한 class명)

.test {
    width: 200px;
    height: 200px;
    background-color: rgb(163, 104, 16);
  }

Greeting.js

import './Greeting.css';
export default function Greeting(){
    return (
        <div>
            <h2 style={
                    {
                        color : "#F33"
                        ,paddingLeft : "200px"
                        ,opacity : 0.3
                        ,border : "1px"
                        ,borderRight : "2px solid #111"
                    }
            }>Greeting!!!</h2>
            <div className="test">Greeting component</div>
        </div>
    )
}

하지만 이 두가지 파일에 모두 동일한  class 명으로 css를 작성하면 나중에 import되는 class가 오버라이딩하여 기존 동일한 class명의 css를 적용할 수 업습니다.  

위의 그림을 보면 Greeting.css의 내용이 App Component에도 적용되었습니다.  각각의 css파일이 각 component 별로 종속되어 적용되는 것이 아니라 실제 생성된느 패이지의 head영역에 모두 적용되기 때문에 동일한 css class명은 사용할 수 없습니다.  

CSS파일을 이용하여 작성 - component 에 종속되는 css 작성

그렇다면 각 component 별로 css가 적용되는 방법을 알아보도록 하겠습니다.

Greeting.css의 파일명을 Greeting.module.css로 변경합니다. 일반적으로 파일명을 작성할때 component에 종속되는 css는 component의 이름과 동일하게 작성합니다. 

파일명이 변경(오류가 발생함) 되었고 component에 종속되는 css를 작성하기 위해 기존 코드를 수정합니다. 

Greeting.js

import styles from './Greeting.module.css';   // 변경된 부분
export default function Greeting(){
    return (
        <div>
            <h2 style={
                    {
                        color : "#F33"
                        ,paddingLeft : "200px"
                        ,opacity : 0.3
                        ,border : "1px"
                        ,borderRight : "2px solid #111"
                    }
            }>Greeting!!!</h2>
            <div className={styles.test}>Greeting component</div>  // 변경된부분
        </div>
    )
}

import './Greeting.css' 항목을 위 예시 코드와 같이 import styles from './Greeting.module.css'; 로 변경합니다. 

reactJS CSS작성법에 알아보았습니다.