[TIL] React.StrictMode는 두 번 렌더링 한다.

전 한 번만 넣었는데 왜 두 번 씩 나오시는지..?

 

사건의 발단은 이렇다.

Three.js를 React에서 다루면서 페인팅이 두 번 되는 느낌이 들었다.

(개인 플젝 뿐만 아니라 처음 배우면서 썼던 Next.js에서도 두 번 그려졌다.)

useEffect에서 렌더링이랑 카메라랑 오브젝트랑 모든 걸 다루기 때문에 repainting이 되는 순간 조명도 두 배! 오브젝트도 두 배! 가 되버린다.

 

사실 분명 예전에도 여러 번 타는 걸 본 적이 있는데 별 생각이 없었어서 냅뒀었다.

의존성 문제인가 하고 사이드 이펙트를 다 뒤졌는데 결론은 바로 제목에 써놓은 것처럼 React.StrcitMode가 문제였다.

보통 CRA로 만들어지는 프로젝트는 기본적으로 StrictMode로 나오게되니..

 

뭔가 불안하지만 일단 Index.tsx에 있는 React.StrictMode를 없애보자.

 

결론은 짠! 이제 한 번만 나오게 된다.

콘솔을 여기저기 찍다보니 App.tsx에 있는 최상단 root 바로 아래의 라우터 덩어리들도 reflow, repaint되는 걸 확인할 수 있었다. useEffect단에서 뭔가 처리하기란 여러울 듯 하다.

 

(혹시 좋은 꿀팁이 있다면 알려주면 너무 감사할 것 같습니다🙌)

아니면 Context API로 React.StrictMode 밖에 Provider로 렌더링 횟수를 넣어놓고 useEffect안에서 쓴다던가..

아무튼 개인 플젝에선 "가가미" strictmode를 빼는 걸로!