React에서 두 번 랜더링

 react에서 console.log를 찍어보던 도중 의도하지 않은 랜더링이 두 번씩 되는 것을 확인했다. 이는 React.StrictMode 때문인데, npx create-react-app으로 생성하면 자동으로 생성되어 있다. index.js에서 <React.StrictMode>를 제거 후 쉽게 해결이 되었다.

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

root.render(
    <App />
);

 

 그렇다면 왜 이렇게 불필요한 랜더링이 두번 일어나는 것일까? 이는 개발환경에서 잠재적 오류를 체크하기 위한 도구라고 한다. 때문에 개발 과정에서는 StrictMode를 사용하는 것이 오류 발견에 더 유용할 수 있다.

 

StrictMode는 아래와 같은 부분에서 도움이 된다고 한다.

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

자세한 내용은 React 공식문서를 참고하자.