[React] 리액트 렌더링이 두 번 발생하는 이유

노마드코더 영화 웹 서비스를 만들다가 리액트 렌더링이 두 번씩 발생하는 것을 발견하였다.

 

 

렌더링이 두 번 발생하는 이유는 React.StrictMode 때문입니다.

npx create-react-app 으로 생성하면 자동 설정이 되있습니다.
따라서 index.js 에서 이 Wrapper를 제거해주면 컴포넌트가 두번씩 호출되지 않습니다.

ReactDOM.render(
    <App />
);

 

 

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다.
Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.
Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.
리액트 공식문서

StrictMode는 아래와 같은 부분에서 도움이 됩니다.

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사