[NextJS] Console.log 2번 출력 해결

NextJS 개발을 하던 중 값 확인을 위해 console.log를 사용했더니 똑같은 값이 2번 출력되는 현상이 눈에 띄었다.

아래와 같이 같은 라인의 명령어가 2번 동작되는 걸 확인할 수 있다. 

 

 

 

 

1. 발생 원인

해당 이슈는 React 18에 생겨난 strict mode로 인해 발생이 되는 현상이다.

strict mode란 개발 환경에서 어플리케이션을 더 엄격하게 검사하여 예상치 못한 버그를 사전에 찾아내는 데에 도움을 주는 기능이다. strict mode를 활성화가 되어 있다면 컴포넌트 재렌더링, useEffect 재실행, 미사용 API 검사 등의 기능들이 동작을 한다.

앞서 말했듯 strict mode는 개발 환경에서만 true 상태이며, 배포 환경에서는 strict mode가 자동으로 false가 된다. 그러니 배포를 하고나면 자연스럽게 사라지는 현상이다.

 

반응형

728x90

 

 

 

 

 

 

 

 

2. 문제 해결

배포를 하게되면 자연스럽게 사라지겠지만 개발 환경에서 진행할 때 신경이 쓰인다면 임의로 strict mode를 비활성화 할 수 있다. 아래와 같이 next.config.js 또는 next.config.mjs 파일을 찾아 코드를 추가해주면 된다.

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: false, // strict mode false 추가
};

export default nextConfig;

 

해당 파일은 NextJS 프로젝트 최상위 디렉토리에 위치하니 쉽게 찾을 수 있을 것이다.