리액트 헷갈리는 개념 2 - state hook 사용하기 (TIL#02)

state는 무엇일까?

• state는 props와 유사한 개념이나, 다른 컴포넌트에서 사용할 수 없으며, 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.
• 클래스형 컴포넌트에서는 this.state를 통해서 사용할 수 있으며, 함수형 컴포넌트에서는 사용할 수 없었으나 리액트 16.8 이후부터 useState라는 Hooks를 사용하여 state를 사용할 수 있게 되었습니다.

useState 사용하기

import React, { useState } from 'react';

const Counting = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>버튼을 {count}번 클릭하셨습니다.</p>
            <button onClick={() => setCount(count + 1)}>
                클릭하기
            </button>
        </div>
    );
}

export default Counting;

• useState 함수의 인자로는 상태의 초기값(Initial State)를 넣어주면 됩니다.
• useState 함수를 호출하면 2개의 원소를 가진 배열이 반환되며, 첫 번째 원소는 현재의 상태(state)이고, 두 번째 원소는 상태를 바꾸어주는 세터(setter) 함수입니다.
  
• 실행하면 다음과 같은 결과가 나옵니다. 클릭한 만큼 카운트가 올라갑니다.

state 사용 시 주의사항

• state 값을 바꿀 때는 useState를 통해 전달받은 세터를 이용해야 합니다. 위의 코드에서 setCount(count + 1)가 아닌 count = count + 1의 식으로 변수를 직접 고치면 안됩니다.
• 만약 배열이나 객체를 업데이트 할 경우에는 객체 사본을 만들고 그 사본에 값을 업데이트 한 후 세터 함수를 통해 저장합니다.

import React, { useState } from 'react';

const Counting = () => {
    const [countInfo, setCountInfo] = useState({count: 0, odd: false});

    return (
        <div>
            <p>버튼을 {countInfo.count}번({countInfo.odd ? '홀' : '짝'}) 클릭하셨습니다.</p>
            <button onClick={() => setCountInfo({
                ...countInfo,
                count: countInfo.count + 1,
                odd: !countInfo.odd,
                })}>
                클릭하기
            </button>
        </div>
    );
}

export default Counting;

위의 예제에서는 countInfo에 count, odd 정보를 저장하여, state 값을 업데이트할 때

{
    ...countInfo,
    count: countInfo.count + 1,
    odd: !countInfo.odd,
}

countInfo 객체의 사본을 만들고 덮어쒸운 다음 세터를 통해 업데이트를 하고 있습니다.