React 상태 업데이트 반응 한 박자씩 늦는 문제 해결하기

반응이 한 박자씩 늦는다는 말은, 어떠한 동작을 했을 때 변경점이 바로바로 업데이트되지 않고 다음 동작을 했을 때에야 이전 변경점이 나타난다는 말이다.

시작 시간과 종료 시간을 입력하면 총 시간을 계산해서 보여주고자 했다.

 

그런데 자꾸 이렇게... 잘못된 값을 보여주는 것이다.

이것은 React의 state 관리 메커니즘과 관련이 있는 문제이다.

1. state가 변경됨 -> 렌더링이 트리거됨
2. 리액트의 state 업데이트는 비동기적 (안 기다림)으로 이루어지므로 렌더링 시 기존 state 값이 사용됨
3. 다음 state 변경이 발생하면, 현재의 변경 전 state 값인 1번에서 변경한 그 값을 이용해 렌더링됨

그래서 useEffect를 이용해 html 렌더링이 끝나고 브라우저에서 state를 업데이트해 View에서 보여지는 값을 업데이트하고자 했다.

하지만 해결되지 않았는데....

문제 원인은 생각보다 간단했다.

왜 그런가 한참 생각해 봤는데, 시간 설정과 관련된 state가 이 파일에만 있지 않아서였다.
input[type='time'] 이 못생겨서 TimePicker 컴포넌트를 새로 만들었었다.
당연히 해당 컴포넌트에는 time을 조작하기 위한 state가 선언되어 있었고, 바깥에서 아무리 useEffect로 조작해도 이 컴포넌트 내부에서는 여전히 기존 state를 가지고 있기 때문에 문제가 해결되지 않은 것이다.

기존 코드

수정한 코드

기존에는 상위 컴포넌트에 값을 전달할 때 state 값을 이용했는데, 지금은 이벤트 값을 직접적으로 사용한다.
결과적으로 업데이트가 바로바로 되는 효과가 난다.
useEffect를 사용할 필요가 없는 것이다

간단히 풀린 문제였지만, 다음에는 같은 문제를 접하면 더 빠르게 풀기 위해 리액트 공부를 열심히 해야겠다...