2024.10.23 React State / Render tree

최근 코드 수정 중 useState setter가 말을 안들어서 render가 되지 않는 상황이 발생했다.

예전에 겪은 상황은 객체를 초기 useState set을 해놓으면 객체 안에 있는 데이터가 바뀌어도 dependency 참조가 바뀐걸 인지 못해서 set을 못하는 건줄 알았는데, 생각지도 못한 곳에서 해답을 찾았다.

 

React 공식 문서에 따르면,

State 는 Render tree 위치에 연결되고, 같은 컴포넌트라면 그 자리에 Rendering 되는 한 state를 유지한다는 것이었다.

React는 JSX 마크업이 아닌 UI tree에서의 위치에 관심이 있다는 것을 기억하라고 문서에서도 강조한다.

 

내가 겪은 상황은 Modal위에 또 다른 Modal을 띄워야 되는 상황이었고, 두번째 Modal의 상태가 이전 상태를 갖고 있는 문제였는데, 이게 같은 UI tree에 위치하다보니 이전 상태를 계속 갖고 있던 것이었다.

 

이를 해결하기 위해서는 Modal을 null 로 날렸다가 다시 띄우던지, key 값으로 state를 초기화하는 방법이 있었다.

결국 각 고유의 key 값을 줘서 render 이슈는 해결하였다.

 

아래 참고 링크는 정말 이해하기 쉽게 예제도 잘 나와 있어서 하나 또 배웠다.

 

- 참고 링크

https://ko.react.dev/learn/preserving-and-resetting-state