react 에서 useEffect 가 2번 호출되는 현상 (두 번 렌더링 되는 현상)

안녕하세요. 루루개발자 입니다.

요즘은 next.js & react 를 공부해보고 있습니다. 

 

그 중에서도 useEffect 의 호출되는 시점을 직접 테스트해보고자

다음과 같이 코드를 작성하였습니다.

import { useEffect } from "react";

const Index = () => {
  useEffect(() => {
    console.log('useEffect 호출됨.');

    return () => {
      console.log('useEffect unmount 호출됨.');
    };
  }, []);

  return (
    <div>
      
    </div>
  );
};

 

next dev

그리고 next 를 dev 모드로 구동후에 브라우저에서 접근해보면

개발자 도구의 콘솔창에 다음과 같이 표시됩니다.

 

useEffect 는 렌더링 이후에 호출되는 것으로 알고 있습니다. 

또한 useEffect 에서 호출된 함수가 반환하는 함수는 컴포넌트가 unmount 될 때 호출되는 것이고요.

 

하지만 결과를 보면 한번 렌더링 된 이후 컴포넌트가 파괴되고 다시 렌더링이 된 것과 같은 결과를 보이고 있었습니다.

(최초 렌더링) -> (파괴) -> (다시 렌더링)

 

왜 이러는걸까? 궁금하여 구글링은 해본결과 다음과 같은 글이 존재했습니다.

https://stackoverflow.com/questions/60618844/react-hooks-useeffect-is-called-twice-even-if-an-empty-array-is-used-as-an-ar

React Hooks: useEffect() is called twice even if an empty array is used as an argument

 

위 글을 읽어보니 React 에는 Strict 모드라는게 존재하는데,

이 옵션이 켜져 있으면 개발 모드일 경우 구성 요소를 두 번 렌더링 한다고 나와 있었습니다.

next.config.js 파일 내용을 보면 다음과 같이 react strict mode 에 대한 값이 지정되어 있는걸 확인 할 수 있습니다.

 

그렇다면 저 값을 다음과 같이 false 로 바꾸어 보겠습니다.

 

그리고 개발 모드로 브라우저에 접근 후 개발자 도구 콘솔창을 확인해보면

 

네, 이제는 한번만 렌더링되어 useEffect 가 한번만 호출 되는 것을 확인 할 수가 있었습니다.

react strict 모드로 인해 발생한 현상이 맞았네요. :)

react strict 모드에 대한 설명은 아래 사이트에서 자세히 확인해 보실 수 있습니다.

https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode

next.config.js: React Strict Mode | Next.js

 

strict 모드는 안전하지 않은 수명 주기, 레거시 API 사용 및 기타 여러 기능을

식별하는 데 도움을 준다고 하니 특별한 경우가 아니면 비활성화를 할 필요는 없어보입니다!

 

읽어주셔서 감사합니다. :)