React 컴포넌트 리랜더링 이슈

최근에 Webpack 환경에서 Vite로 마이그레이션 작업을 진행했다.

빠르게 개발을 진행해야되는 환경때문에 러닝커브가 발생하지 않게 기존에 사용하던 js+redux+redux-saga+toolkit을 그대로 가져와서 사용했는데 api 콜을 하고 해당 요청에 대한 state 값을 변경하면 useSelector를 선언한 부분에서 리랜더링 문제가 발생하던 것이였다.

user 값을 받는 리듀서나 무슨 리듀서 할 것 없이 useSelector 값을 바인딩 하지도 않았는데!! 해당 컴포넌트의 자식 컴포넌트들이 모두 새롭게 랜더링 되어버렸다. ㅎㅎ..

이 이슈때문에 설계와 코딩 스타일도 바뀌고 이러면 store를 쓰는 의미가 있나 싶은 고민에 빠졌는데 근 2주동안 이 이슈때문에 컴포넌트를 쪼개고 기능 단위 + 랜더링 단위까지 체크해가면서 useSelector을 사용하였는데 주말에 집에서 이리저리 만져보고 테스트 해보고 진행해보면서 해결책인진 모르겟지만 원인을 찾았다.

원인은 바로 공통으로 빼둔 컴포넌트 문제였다.

공통 컴포넌트는 몇가지가 있는데 기본적인 레이아웃 구성과 Contents 부분의 그리드를 잡아주는 컴포넌트였다.

해당 컴포넌트는 각 컴포넌트와 해당 컴포넌트를 구성하는 마이크로 컴포넌트 들로 구성되어 있었는데 나는 해당 컴포넌트를 어디에 사용하지 않고 내부 구성요소로써 구분을 위해서 선언해서 쓰고 있던 상황이였다.

하지만 해당 컴포넌트안에서 컴포넌트를 선언해서 구성요소로써 사용할때 해당 컴포넌트가 랜더링 될때 다시 내부에서 선언된 해당 컴포넌트가 선언되고 내부 요소도 다시 랜더링되는 악순환의 굴레에 빠졋던 것이였다.

정확한 원인은 공통 컴포넌트에서 자식을 상속받아서 처리하는 컴포넌트가 리 랜더링 되면서 해당 useSelector도 값을 새롭게 받아오면서 랜더링 이슈가 발생했던 것으로 보인다.

한마디로 이벤트 -> 응답값 화면에 반영 -> 해당 컴포넌트에서 호출하는 마이크로 컴포넌트 리랜더링 -> 해당 하위 자식 컴포넌트 리랜더링 발생이 되겠다.

자식컴포넌트를 감싸주는 마이크로 컴포넌트가 재 선언되면서 다시금 초기값에서 리랜더링되는 이슈가 발생했던 것이였다.

vite 환경에서 랜더링 추적을 지원하는 라이브러리가 있다면 좀더 수월했을텐데. 해당 라이브러리를 적용하는데 이슈가 있어서 체크하지 못했다. 나중에 시간이 된다면 좀더 자세한 흐름과 원인을 파악하여 체크하려고 한다.

이 문제는 너무 고달파서 기록해둔다..ㅠㅠ