[React - Trouble Shooting] state 값이 변경되지 않는 문제

이번 포스트에서는 state와 setState는 간단하게만 보고 넘어가자.

 

배경 지식

state

state 값은 setState()를 통해서만 변경이 가능하다.

setState

useState로 만든 useState는 비동기적 특성을 갖는다!!

 

 

문제점

useEffect 훅 안에서 이벤트 리스너가 실행되면서

state 값이 변했다.

 

이 state 값이 의존성배열에 들어가있는

다른 useEffect 훅을 실행시켜 state 값을 확인해보면

값이 잘 나온다.

 

하지만 이벤트 리스너의 처리가 모두 끝나지 않았고,

변한 state 값을 통해 다른 로직이 실행되도록 구현되어 있었다.

 

여기서 문제가 발생한다!!

 

원인

앞서 말했듯이 React의 setState는 비동기적으로 실행된다.

 

정확히는 현재 setState는 이벤트 핸들러 내에서 비동기적이다.

 

 

state가 변할 때마다 React는 렌더링을 한다고 생각을 하지만 그렇지 않다.

 

React는 브라우저 이벤트가 끝날 때 state를 일괄적으로 업데이트한다.

 

state가 무분별하게 변하면서 생기는

부담스러운 렌더링이 일어나지 않는다.

 

 

이 방식을 알지 못하고 state 값을 useEffect 훅 내부에서 변경하고

그대로 사용하려 해서 state가 변경되지 않는 오류가 발생했다.

 

 

해결

같은 이벤트 내부에서 로직이 수행되지 않도록

브라우저 이벤트를 분리했다.

 

그렇게 하니 변경된 state값이 적용되어 오류가 발생하지 않는다.

 

 

 

Reference

https://ko.legacy.reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value

컴포넌트 State – React