react - useState

react로 개발을 하다 보면 값이 바로 반영이 안 된다는 것을 느낄 때가 있습니다.

 

이 코드 같은 경우 버튼을 누르면 x값이 올라가도록 하는 프로그램입니다.

 

하지만 버튼을 누르면 x가 바뀌긴 하지만 화면에는 반영되지 않습니다.

react의 경우 렌더링을 통해서 화면의 정보를 갱신해 줍니다. 하지만 변수가 바뀔 때마다 랜더링을 하면 불필요한 갱신이 발생할 수 있습니다.

이런 경우 useState를 이용해서 해결할 수 있습니다.

 

이렇게 하면 setX를 호출할 때 마다 화면을 새로 랜더링해 줄 수 있습니다.

뭔가 이상합니다. setX를 통해 x를 증가해 줬는데 console.log에는 증가하기 전의 값이 보이고 있습니다.

이것은 비동기 때문에 그렇습니다. useState의 상태는 비동기적으로 업데이트됩니다. plus 함수 내에서 console.log(x)를 찍으면, x가 증가하기 전에 console.log가 실행될 수 있습니다.

이를 막기 위해서는 setX를 바꿔주면 됩니다.

 

이렇게 하면 화면에는 최신 값이 보이게 됩니다.

 

코딩하다 보면 꼭 하나 고치면 다른게 이상해지는 경우가 있습니다. 그게 바로 지금인 것 같네요.

이것은 React의 Strict Mode 때문입니다. 개발 모드에서 렌더링과 관련된 문제를 감지하기 위해 useEffect나 useState 같은 함수들을 두 번 호출합니다. 이는 컴포넌트가 "side effect" 없이 순수하게 작동하는지 확인하기 위한 방식입니다.

이것은 index.js에서 strictMode를 제거해서 해결할 수는 있습니다.

 

근데 개발모드에서만 그러는 것이고 실제로 발생하지는 않는 문제이니 그냥 두어도 됩니다.