[React] useEffect가 2번 호출되는 이유

0. 개요

리액트에 대한 공부를 진행하면서, useEffect에 대해서 공부 하던 중, 이상한 현상을 발견했다.

 

useEffect를 선언하였고, 컴포넌트들이 최초로 마운트 될 때에만 실행되도록 선언하였고, 언마운트시 실행되게끔 클린업 함수도 넣어주었다. (아래 코드 참조)

useEffect(() => {
        console.log("컴포넌트가 화면에 생성");
        return () => {
            console.log('컴포넌트가 화면에서 사라짐');
        };
    }, []);

 

그런데 실제로 yarn start로 실행하여 크롬개발자 모드로 로그를 확인하였더니, 아래와 같았다.

개발자 도구에 찍힌 로그

해당 컴포넌트가 리스트 안에 들어있어 3번 호출되는 건 맞다.

그러나 최초에 예상했던 결과는 아래 그림과 같이 "컴포넌트가 화면에 생성"이 3번 찍히는 것이었다.

(처음 렌더링 시에만 실행되도록 2번째 파라미터로 []도 넣어준 상태...)

1. 문제정의

오잉? 분명히 컴포넌트가 마운트 될 때 => 즉 3번만 실행되어야 할 것이, 그리고 클린업함수는 실행되지 말아야 하는데??

모두 실행되고 있었다....

 

흠... 내가 아직 useEffect의 실행 매커니즘을 이해 못한 것일까? 하고,

useEffect에 대해서 구글링을 진행했다.

정답은 useEffect안에 있어!

2. 해결

해결 방법은 의외로 간단했다.

index.js에서 app컴포넌트를 호출할 때 StrictMode 컴포넌트로 감싸져 있었기 때문..

StrictMode 태그를 제거하였더니 원하는 결과가 바로 출력 되었다.

StrictMode에 대해서 공식문서를 살펴보니

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.

라고 한다..

그리고 개발모드에서만 실행되고, 프로덕션에는 영향을 주지 않는다고 한다..(쉣..)

StrictMode에 대한 자세한 내용은 아래 링크를 통해 확인할 수 있다.

https://ko.legacy.reactjs.org/docs/strict-mode.html

Strict 모드 – React

 

 

참조

https://velog.io/@gene028/%EA%B0%9C%EB%B0%9C%EC%9D%BC%EC%A7%80-3-UseEffect%EB%8A%94-%EC%99%9C-%EB%91%90%EB%B2%88-%EC%8B%A4%ED%96%89%EB%90%98%EB%8A%94%EA%B1%B8%EA%B9%8C