next 개발 시 호출이 두 번 발생하는 이유

1. 호출이 두 번 발생하는 이유

리액트에서 개발을 할 때 useEffect를 이용하거나 console.log를 찍으면 코드 호출이 두 번 발생하는 걸 알 수 있다. 이런 현상이 발생하는 이유는, 개발환경에서는 React의 strictMode가 활성화 되기 때문이다.

strictMode가 활성화 되면 예상치 못한 버그를 사전에 찾아내는 데에 도움을 준다.

1. 컴포넌트의 불완전한 렌더링을 검사하기 위해 한 번 더 렌더링.

2. useEffect 클린업 함수를 작성하지 않아 발생하는 버그를 검사하기 위해, Effect를 한 번 더 실행.

3. 컴포넌트에서 더 이상 사용되지 않는 API 를 사용하는 지 검사.

2. 해결방법

const nextConfig = {
    reactStrictMode: false,
};

module.exports = nextConfig;

배포된 환경에서는 strict 모드가 동작하지 않으므로, 두 번 호출되는 게 조금 불편해도, 개발환경에서 strict 모드를 켜두는 게 좋다고 생각한다.