[React] React Hooks - (1) useState

1. useState

📌 정의
가장 기본적인 hook으로, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다.

✅ 기본 형태

const [state, setState] = useState(initialState);

▶️ 원래는 useState라는 함수가 배열을 반환하고, 이 배열을 구조분해할당으로 꺼내 놓은 형태이다.

state를 변수로 사용, setState를 이용하여 state 값을 수정한다.
++ state가 원시 데이터가 아닌 객체 데이터 타입일 경우 불변성을 유지 해야한다.

useState의 업데이트 방식

// 기존 업데이트 방식
setState(number + 1);

// 함수형 업데이트 방식
setState(() => {});

초기값이 0인 number를 setNumber를 통해 +1 씩 증가하겠다.

1) 배치(batch) 업데이트

= 기존에 사용하던 방식

• batch 사전적 의미 : 집단, 무리; 한 회분; (일괄 처리를 위해) 함께 묶다. 라는 의미

즉, 한 번에 일괄적으로 업데이트를 하겠다.

function App() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <div> Number State : {number}</div>
      <button
        onClick={() => {
           setNumber(number + 1);
        }}
      >
        누르면 up
      </button>
    </>
  );
}

2) 함수형 업데이트

매개변수로 인자를 받아서 원하는 값을 반환하는 함수를 setNumber () 안에 넣는 방식

<button
  onClick={() => {
    setNumber((currentNumber) => currentNumber + 1);
  }}
>

3) 반복 실행

만약, setNumber를 3번 반복하여 실행하면 어떻게 될까?

배치 업데이트에서는 setNumber가 전체에서 한 번만 실행된다.

onClick={() => {
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
}}

예상 : number가 3 한 번에 올라간다.
실제 : number가 1 만 올라간다.

함수형 업데이트에서는 setNumber가 순차적으로 한 번씩 실행된다.
함수형에서는 인자를 currentNumber, 즉, 현재의 state를 받아와서 다음 state를 반환한다. 따라서 함수가 실행될 때 마다, currentNumber의 값이 달라지므로 최종적으로 onClick을 했을 때는, 총 3번의 함수

onClick={() => {
     setNumber((currentNumber) => currentNumber + 1);
     setNumber((currentNumber) => currentNumber + 1);
     setNumber((currentNumber) => currentNumber + 1);
}}

🧐 Why?

setNumber(number + 1); 가 각각 한 번씩 실행되는 것이 아니라, 배치(batch)=일괄적로 처리한다.
onClick을 했을 때, setNumber라는 명령을 세 번 내리지만, 리액트에서는 일괄적으로 한 번만 처리한다.

리액트 환경 안에서 렌더링이 많이, 반복적으로 일어나면 성능 이슈가 생길 수 있기 때문에, re-rendering을 방지하기 위해서 위와 같은 방식으로 처리한다.