React render 두번 호출되는 이유? (useEffect는 잘못없음)

 

리액트로 소셜 앱을 만드는 과정에서 렌더링이 두번씩 되는 현상이 발생합니다. 가장 기초적으로 useEffect()에 종속 배열로 관리하고자 하는 state가 변경되면 렌더링이 계속 발생하지만, 종속배열을 비워두면 렌더링이 1번만 되는게 정상입니다. 

하지만 현실과 이론은 다릅니다 ㅋㅋ 

 

 

아래 코드에서 useEffect()의 종속배열을 비워두고, 1번만 실행될거라 예상했습니다. 

 

하지만 page를 오픈해보면 아래처럼 2번씩 렌더링 됩니다. 굉장히 미스터리한 상황이라 구글링을 통해 해답을 찾아보니 EffectHook의 문제가 아닌 개발환경 셋팅의 문제였습니다.

 

Solved

 

<App /> 컴포넌트를 감싸고 있는 index.js 파일에 들어갑니다.

 

 

 

React.StrictMode로 App이 감싸져 있는데, 저녀석이 개발환경에서 테스트 목적으로 2번씩 렌더링되게 하고 있었습니다. 저녀석을 지워주면 깔끔하게 1번만 렌더링이 진행됩니다.

 

참고로 StrictMode 컴포넌트는 React에서 검사도구로 사용됩니다. 개발 모드일 때 디버깅 목적으로 사용되며, StrictMode로 감싸져 있는 컴포넌트들은 자손 까지 검사를 진행하기 때문에, App 하위에 컴포넌트가 연결되면 모두 2번씩 실행된다고 보시면 됩니다. 

개발할 때야 상관없지만 배포환경에서 컴포넌트가 2번씩 렌더링된다면 성능/보안 문제가 발생할 여지가 있으므로 배포시 반드시 제거해줘야 하는 녀석 중하나입니다.(.env / node_modules 와 같이..)

 

Buffer Stream 이란? Node.js 버퍼 스트림 파이프 사용법

 

WebSocket VS Socket 차이점 (WS HTTP 차이)

 

[회고록] 코드스테이츠 프로젝트 3 시작 (DID 인증 서비스)