[React] useState

함수형 업데이트

state의 값을 업데이트하기 위해 setState에 직접 수정할 값을 전달해줄 수도 있지만, 함수의 반환값을 이용할 수도 있다!

const [count, setCount] = useState(0);

const handleCountPlus = () => {
  setCount((현재값) => {
    return 현재값 + 1;
  });
};

 

값을 대입하는 방식과의 차이

const [count, setCount] = useState(0);

<button onClick={() => {
  // 값을 대입하는 경우
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
  
  // 함수를 사용하는 경우
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
}}></button>

1) 바로 값을 대입하는 경우

- 버튼을 한번 클릭할 때 1이 증가한다

- React의 동작으로 set을 한번에 모아 처리하는데(batch), 동일한 동작이 여러번 있으므로 하나로 처리한다

 

2) 함수를 사용하는 경우

- 버튼을 한번 클릭할 때 3이 증가한다

- 함수형의 경우 한번에 모아 순차적으로 처리한다

- 따라서 순차적인 처리가 필요하면 함수형 업데이트를 사용해야 함

 

 

자식 컴포넌트에서 부모 컴포넌트의 state를 수정하기

const Parent = () => {
  const [count, setCount] = useState(0);
  
  return (
    <>
      <p>현재 카운트: {count}</p>
      <Child count={count} setCount={setCount}/>
    </>
  );
};

// 값을 대입하는 방식
const Child = ({count, setCount}) => {
  return (
    <button onClick={() => {
      setCount(count + 1);
    }}>증가</button>
  );
};

// 함수형 업데이트 방식
const Child = ({setCount}) => {
  return (
    <button onClick={() => {
      setCount((prev) => prev + 1);
    }}>증가</button>
  );
};

 

값을 대입하는 방식의 경우 기존 값이 필요해 count도 함께 넘겨줘야하지만, 함수형 업데이트 방식을 사용하면 setCount만 넘겨줘도 원하는 방식이 가능하다!