ReactStrictMode 두번 렌더링, api가 두번 호출돼요 ReactStrictMode 두번 렌더링, api가 두번 호출돼요

📖  목차

 

double rendering 이슈

리액트로 프로젝트를 작업하는데 api가 두번씩 찍히는 오류가 발생했다.

사실 처음 페이지에 진입했을때 뿐만 아니라 이후에 데이터를 불러올때도 두번씩 찍혀서 코드상에 문제인가보다..했는데 데이터 두번씩 호출되는 부분을 해결했는데도 페이지 처음 렌더링시에 두번이 찍히는것은 여전했다.

로그를 찍어보니 로그도 두번 찍히는 것으로 렌더링이 두번 발생한다는 것을 알 수 있었다.

 

🎈 원인

ReatStrictMode

api 중복 호출과 관련해서 구글링을 하다가 ReatStrictMode와 관련이 있음을 알게 되었다. google에서 react strictmode render twice라는 키워드로 여러 정보들을 얻을 수 있었다. 영어로 된 문서도 많고 유튜브 영상들도 많을것을 보니 실제로 국내외의 많은 개발자들을 괴롭히는 녀석인가보다!

 

리액트 문서에 따르면

React는 작성하는 모든 구성 요소가 순수 함수라고 가정합니다. 즉, 작성하는 React 구성 요소는 동일한 입력(props, state 및 context)이 주어지면 항상 동일한 JSX를 반환해야 합니다.
이 규칙을 위반하는 구성 요소는 예기치 않게 동작하여 버그를 일으킵니다. 실수로 순수하지 않은 코드를 찾는 데 도움이 되도록 엄격 모드는 개발 중에 일부 함수(순수해야 하는 함수만)를 두 번 호출합니다. 여기에는 다음이 포함됩니다.

• 구성 요소 함수 본문 (최상위 논리만 있으므로 이벤트 핸들러 내부의 코드는 포함되지 않음)
• useState, setfunctions , useMemo또는 에 전달하는 함수useReducer
• constructor, render, 같은 일부 클래스 구성 요소 메서드 shouldComponentUpdate( 전체 목록 참조 )
  함수가 순수한 경우 순수한 함수는 매번 동일한 결과를 생성하기 때문에 함수를 두 번 실행해도 동작이 변경되지 않습니다. 그러나 함수가 순수하지 않은 경우(예를 들어, 수신하는 데이터를 변경하는 경우) 그 순수하지 않은 코드를 두 번 실행하는 것은 눈에 띄는 경향이 있습니다(그것이 함수를 순수하지 않게 만듭니다!) 이렇게 하면 버그를 조기에 발견하고 수정하는 데 도움이 됩니다.

 

그래서 뭐라구?

정리하자면, StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로, 초기에는 확인할 수 없는 문제가 재렌더링이 될 때만 확인이 될 때 이를 개발환경에서 미리 파악하고자 더블렌더링을 시켜 오류를 미리 확인하는 역할을 한다.

마운드 > 언마운트 > 리마운트 과정을 빠르게 지나면서 마운트 되어 렌더링이 진행된 후 한번 더 체크하기 위해 언마운트 후 리마운트되면서 한번 더 렌더링이 진행되는 것이다.

그래서 해당 과정을 확인해보기 위해 아래 코드를 작성해보았다.

 

확인해보자.

  let renderCount = 0;
  const [rendered, setRendered] = useState(false);

  useEffect(() => {
    //마운트
    renderCount++;
    setRendered(true);
    console.log("mount", renderCount); //1
    return () => {
      //언마운트
      console.log("unmount");
    };
  }, []);

  useEffect(() => {
    //리마운트
    if (rendered) {
      console.log("remount", renderCount); //2
    }
  }, [rendered]);

리마운트를 감지하는 state를 만들고, renderCount를 하는 변수는 let으로 선언했다.
두가지 이유로 페이지가 재렌더링 되었다고 확인할 수 있었다.

1. 초기 마운트를 의미하는 첫번째 useEffect의 로그가 두번 찍혔다.
2. 리마운트된 로그에서 renderCount가 0으로 초기화되어 재렌더링이 된 것을 확인할 수 있다.

useEffect(() => {
    //마운트
  setRendered(true);
  return () => {
        //언마운트
    console.log("unmount");
  };
}, []);

useEffect(() => {
    //리마운트
  if (rendered) {
    fetchData(page);
  }
}, [rendered]);

첫번째 마운트 될 때 rendered state를 변경시켜 리마운트 될때에 api를 호출하는 방식으로 렌더링이 두번 발생하는 현상을 해결할 수 있다.
하지만 내 코드의 api를 불러오는 방식은 커스텀 hook을 사용했기 때문에 다른 조건부와 함께 쓰일 수 없는 점에서 이 방법이 쉽지 않았다.

 

🎈 해결

많은이들의 해결책

많은이들은 이러한 React.StrictMode를 주석처리 해버리는 것으로 오류를 해결하곤 했다. 실제로 해당 코드를 주석처리하자마자 api가 두번 호출되던 오류가 잡혔고,, 나도 솔깃하는 마음으로 주석처리를 하고 개발을 진행했다.

 

그래도 켜야지!

단순하게 오류가 해결되어보인다는 이유로 ReactStrictMode를 제거하고 개발을 했지만 여러 글에서 ReactStrictMode를 해제하지 않는 것을 추천하여 다시 ReactStrictMode를 설정해주었다. ReactStrictMode는 자바스크립트에서 “use strict”를 설정하는 것과 비슷하며 Strict 모드를 사용하면 리액트가 컴포넌트를 검사하고 잘못 사용된 부분을 알려줍니다. 이러한 메세지는 잠재된 문제를 미리 해결할 수 있다.

ReactStrictMode는 개발모드에서만 더블렌더링이 발생하고 실제 배포를 진행했을 경우에는 아무런 문제가 없다라는 멘트가 문서 곳곳에 쓰여있고, 실제로 vercel를 통해 배포해 더블렌더링이 발생하지 않는 것을 보고 ReactStrictMode를 삭제하지 않고 개발하는 방식을 선택했다.

+이전에 진행했던 프로젝트는 어떻게 했길래 이제야 발견한걸까,,? 하고 깃헙에 올려놓은 개인 프로젝트 코드를 다시 살펴보니 한 프로젝트는 React.StrictMode를 주석이 아니라 아예 깔끔하게 지워버렸고..^^ 한 프로젝트는 Next를 사용한것으로 StrictMode는 설정되어 있었지만 api가 두번 호출되는데도 코드상 이유를 찾지 못해 별다른 수정을 하지 못했었다. 이유를 알았으니 얼른 가서 StrictMode를 다시 설정해주어야겠다!

참고 https://beta.reactjs.org/reference/react/StrictMode