22.03.10 목

오늘도 어제에 이어서 리액트를 공부해보았습니다.

 

1. useState

const [counter, setCounter] = React.useState()

counter는 현재값을 의미하고 useState의 괄호 안에 초기값을설정할 수 있다.

setCounter는 counter에 변화를 줄 수 있다. 

const App = () => {
        const [counter, setCounter] = React.useState(0);

        console.log(counter); // 0
        function Click() {
          setCounter(counter + 1);
        }
        return (
          <div>
            <button onClick={Click}>{counter}번째 클릭</button>
          </div>
        );
      };
      const 여기다가그려 = document.querySelector("#app");

      ReactDOM.render(<App />, 여기다가그려);

이렇게 코드를 넣고 실행시키면 다음과 같은 결과가 나온다

counter와 setCounter가 잘 작동하고 있는 것을 알 수 있다.

여기서 의문이 들 수 있다.

왜 console.log가 계속 작동하는가?

컴포넌트는 특정값만 바뀌는 것이 아니라 그 부분을 재 랜더링하기 때문에 console.log가 다시 작동하는 것이다.

 

 

2. map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

map을 사용하다보면 이런 문구의 오류를 발견할 수 있습니다.

Warning: Each child in a list should have a unique "key" prop.

React에서 map을 사용할 때, 순회한 값마다 id 값이 필요합니다. 그래야 최적화해서 잘 보여줄 수 있기 때문에 key={}로 각 값에 id를 부여합니다. 

 

 

3. 상태 끌어올리기(lifting state up)

자식 컴포넌트에서만 쓰이는 상태를 상위 컴포넌트에서 쓰고 싶을 때 그 상태를 위로 끌어올리는 것을 의미한다. 상태는 부모에서 자식으로 단방향으로만 이동할 수 있기 때문에 상태 끌어올리기를 사용한다.