개념

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

• useState는 기본적으로 상태 값과 그 값을 변경하는 함수를 반환한다.
• 최초 렌더링 때 반환되는 상태(state)는 처음에 전달된 인자(initialState)이다.

setState(newState);

• setState 함수는 state를 변경할 때 사용한다. 새 state 값을 받아 컴포넌트 리렌더링을 '큐에 등록'한다.
• 이후 다음 리렌더링 시 반환되는 상태는 항상 갱신된 최신 state가 된다.
• 만약 변경 함수(setter 함수)가 현재 상태와 정확히 동일한 값을 반환한다면 바로 뒤에 일어날 리렌더링은 완전히 건너뛰게 된다. (= useState의 state가 변경이 없을 경우 해당 컴포넌트는 리렌더링되지 않는다!)

주의
React는 setState 함수가 리렌더링 중에 변경되지 않을 것을 보장한다. 이것이 useEffect나 useCallback 의존성 목록에 setState 함수를 포함하지 않는 이유이다.
=> useEffect나 useCallback의 의존성 배열에 setState 함수를 넣지 않는다!

예시

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

setState에 들어가는 두 형태: 함수 형식과 일반 형식의 차이

• ”+“와 ”-” 버튼은 함수 형식을 사용하고 있다. 이것은 갱신된 값이 갱신되기 이전의 값을 바탕으로 계산되기 때문이다.
• 반면 “Reset” 버튼은 카운트를 항상 0으로 설정하기 때문에 일반적인 형식을 사용한다.

주의
클래스 컴포넌트의 setState 메서드와 달리, useState는 갱신되는 객체(update objects)를 이전 내용과 자동으로 합치지 않는다. useState에서는 setState의 반환 값에 전개 연산자를 활용하여 이 동작을 복제할 수 있다.

const [state, setState] = useState({});
setState(prevState => {
  return {...prevState, ...updatedValues};
});

다른 방법으로는 useReducer가 있다. 이는 여러 개의 하윗값들을 포함한 state 객체를 관리하는 데에 더 적합하다.
=> 즉, useState의 setState 함수의 반환값에 spread 연산자를 써야 하는 경우(= 객체의 일부를 변경하는 경우), useState보다 useReducer를 쓰는 것이 더 낫다!