useEffect called twice in Strict Mode?

2차 프로젝트 수행 중에 마주친 이슈였다! 

마이페이지 창을 들어가는데 만약 로그인이 안된 상태라면 바로 로그인 창으로 이동하게 useEffect를 사용해서 처음 렌더링될 때 검사하도록 아래처럼 코드를 작성했었다.

하.지.만, useEffect 안의 코드가 두번 실행이 되는 것이다!

useEffect(() => {
    getUserData();
    getUserLogs();

    if (!isLoggedin) {
      alert("로그인을 먼저 해주세용")
      navigate(ROUTES.LOGIN.link, { replace: true });
    }
  }, []);

 

코치님과의 오피스아워 시간으로 strict 모드를 제거하면 두번 실행되는 것이 멈춘다는 것을 알 수 있었다. 하지만 이것은 단지 리액트에서의 버그인 걸로 넘어갔었다.

 

하지만!

 

useEffect(() => { ... }, []) 는 strict 모드 하에서는 두 번 실행되며, 이것은 버그가 아니라 애초부터 의도된 것이다!

https://ko.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

위의 리액트 공식문서를 본다면 strict 모드에서 react는 예상치 못한 부작용 검사를 위해 아래의 함수라면 의도적으로 이중으로 호출하여 찾을 수 있게 한다는 것을 알 수 있다!

나는 useEffect 안에서 setState 함수를 사용하고 있었기 때문에 그 조건에 부합하였기 때문에 두번 호출해준 것이었다!

 

공식문서 내용을 찬찬히 살펴보다가 facebook의 react 깃헙 레포지토리의 issue까지 접근할 수 있었다.

https://github.com/facebook/react/issues/20090#issuecomment-715927125

그리고 이곳에 모든 내용들이 더 자세하게 적혀져 있는 걸 알 수 있었다!

앞으로는 이렇게 막히는 문제들이 생길 때 공식문서도 보고 구글링도 해야 하지만 이렇게 직접 해당 프레임워크를 개발한 리포의 이슈들에서도 찾아보는 습관을 가져야 겠다!

구글링을 했을 때는 이렇게 고치면 되겠군. 으로 그쳤었지만 이곳에서는 직접 만든 개발자분으로부터 자세하게 해당 이슈에 대해서 설명해주신 것을 볼 수 있어서 신기했다.

 

위 이슈도 다시 찬찬히 읽어보면서 공부 해야겠다.

 

https://github.com/facebook/react

GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.