[REACT] 두 번 렌더링되는 현상? (unmount가 중복 실행되는 현상) (react strict)

React의 Lifecycle에 대한 강의를 듣는 중

useEffect 사용 중에서도 Unmount 관련 실습을 도중하는 중에 이상한 부분이 있었다.

 

 

const UnmountTest = () => {
  useEffect(() => {
    console.log("Mount!");
    return () => {
      console.log("Unmount!");
    };
  }, []);
  return <div>Unmount Testing Component</div>
}

useEffect 의 호출되는 시점을 테스트 하기 위해서 위와 같이 코드를 작성하면

 

<div>Unmount Testing Component</div>

가 화면에 나타날 때 Mount !

화면에서 사라질 때 Unmount !

가 콘솔창에 입력되는 것이 기대하는 결과였다.

 

 

하지만 실제 결과는 아래와 같았다.

Unmount 시점에는 이상이 없으나

Mount 시점에는 Mount! - Unmount! - Mount! 가 실행되는

즉, 두번 렌더링이 되는 듯한 결과를 보여주고 있다.

(최초 렌더링 → 컴포넌트 파괴 → 다시 렌더링)

 

 

다행히 원인은 구글링을 통해 알아냈다.. 많은 글이 있었다 😃👍

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

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

[React] console.log가 두번 실행된다고?

 

 

이유는 React의 Strict 모드

이 옵션이 켜져있으면, 개발 모드에서 구성 요소를 두 번 렌더링 한다고…

 

 

나의 경우 index.js에 Strict 모드를 활성하는 코드가 포함되어 있었다.

이 코드는 $ npx create-react-app (CRA) 명령어를 통해 리액트 환경을 구성하면서 자동으로 작성된 부분이다.

 

작성된 <React.StrictMode> 를 제거해서 다시 실행해보자.

 

위와 같이 두번 렌더링되는 현상이 해결됨을 볼 수 있었다.

이를 통해 코드에 문제가 있는 것은 아님을 확인!

 

 

Strict Mode는 애플리케이션 내 잠재적인 문제를 알아내기 위한 도구로,

여러 경고를 보여주기 때문에 나에게는 당연히 유용한(필수적인) 기능이다.

 

중요한 점은! 이 Strict Mode는 개발 모드에서만 활성화되고, 빌드에는 영향을 끼치지 않는다.

즉, 두번 렌더링 되는 현상은 개발 중에만 일어나는 것이다…

 

나는 코드에 문제가 없는 것도 확인했고 Strict Mode를 이용하는 것이 안전한 것임을 알았으니

다시 <React.StrictMode> 를 살려두는 것으로 작업을 마무리한다.

 

 

원인만 알았으면 됐다 끝~