useState 동기화 문제

export default function Test() {
  const [value1, setValue1] = useState<number>(0);
  const [value2, setValue2] = useState<number>(0);

  return (
    <>
      <div> value1 : {value1} </div>
      <div> value2 : {value2} </div>

      <button type="submit" onClick={() => 
          {
            setValue1(prev => prev+1);
            setValue2(value1);
          }}> 계산
          </button>
    </>
  )
}

얼마 전에 useState를 사용하다가 난감한 상황에 빠져서 해결방법을 공유합니다. 대충 위와 같은 코드를 작성했습니다. 버튼을 클릭할 때마다 value1을 +1시 키고 value2에 대입합니다. 코드만 봤을 때는 두 값이 동시에 올라가야 합니다.

결과는... value2 값이 1 작게 설정됩니다. 이유는 SetValue1 함수를 실행해도 value1 값이 바로 변경되지 않습니다. 이유를 찾아보니 useState의 set 함수는 비동기로 동작합니다. 이해는 가는 게... 동기로 동작하게 되면 set을 할 때마다 렌더링을 하게 되니 퍼포먼스가 떨어지게 될 것입니다. 값은 변경해주고 렌더링만 모아서 해줘도 될 것 같긴 한데.. 아무튼 이유가 있겠죠.

 

export default function Test() {
  const [value1, setValue1] = useState<number>(0);
  const [value2, setValue2] = useState<number>(0);

  useEffect(() => {
    setValue2(value1);
  }, [value1]);

  return (
    <>
      <div> value1 : {value1} </div>
      <div> value2 : {value2} </div>

      <button type="submit" onClick={() => 
          {
            setValue1(prev => prev+1);
          }}> 계산
          </button>
    </>
  )
}

저는 useEffect를 이용해서 해결했습니다. 가까운 길을 멀리 돌아가는 느낌이 들지만 동작하긴 합니다. 네이티브 앱 개발할 때 리액트 네이티브는 제외하기로 결정..