[Next.js] 왜 두 번 렌더링 되는 것일까?

 

개요

이번에 회사에 사용되는 기술인 Next.js를 공부를 하면서 처음으로 궁금해 했던 문제가 왜 두 번의 렌더링을 수행하는 가? 였습니다. 매번 콘솔 로그가 두번씩 찍히는 모습이 마치 개발자가 잘 못 해서 그런 것 아닐까 라는 생각을 들게 했고 이러한 현상이 왜 발생하는지에 대해 공부해봤습니다. 

 

 

React Stric Mode

먼저 기술에 대한 이해를 하기전에 알아야 하는 것은 StricMode가 무엇인가를 알아야 합니다. StricMode 란 개발자가 애플리케이션에서 잠재적인 문제를 더 쉽게 발견할 수 있도록 만들어진 기능입니다. 이 모드는 개발 과정에서만 활성화되어, 성능 저하, 안전하지 않은 생면주기 메서드 사용, 레거시 API의 사용 등을 포함한 다양한 문제를 감지하는 도움을 줍니다. 

 

 

두 번의 렌더링

React18 이상에서 StricMode가 활성화 된 경우, 컴포넌트의 마운트, 언마운트 그리고 업데이트가 실제로 두 번 수행이 됩니다. 그러한 이유로는 아래와 같습니다. 

 

• 부작용 감지 : 컴포넌트 생성주기 과정에서 발생할 수 있는 부작용을 감지 합니다. 이러한 생명주기 과정에서 문제가 발생하는 경우 개발자에게 문제를 인지시키고 수정할 수 있도록 하고 있습니다. 
• 메모리 누수 감지 : 컴포넌트가 언마운트 될 때 정리되어야 하는 리소스가 (이벤트 리스너, 구독 해제) 제대로 정리되지 않은 경우 메모리 누수가 발생을 하게 됩니다. 해당 문제를 감지하는데 사용되고 있습니다.
• 함수 컴포넌트의 재실행 : 함수 컴포넌트는 이 모드에서 두 번 호출됨으로써, 순수 함수로서의 동작을 강화하고, 부작용이 없는지 검사 할 수 있습니다.

 

프로덕션에서의 동작

이러한 두 번의 렌더링 기능은 개발 모드에서만 적용이 되고 있습니다. 프로덕션 빌드에서는 StricMode로 인한 추가적인 렌더링이 발생하지 않으므로, 성능에 대한 우려는 없습니다. 

 

 

설정 해지 방법

개발 모드에서 이러한 두 번의 렌더링되는 것을 막고자하면 아래와 같이 nextConfig 에 옵션 값을 추가하면 되겠습니다. 

const nextConfig = {
  reactStrictMode: false,
};