[React] 렌더링이 두 번 발생하는 이유 _ React.StrictMode

🚫 문제상황

그림을 생성해주는 AI인 DALL.E를 이용해서 서비스를 제작하고 있는데,

API 호출해서 나온 그림과, 저장해서 출력되는 그림이 달라서 코드를 뜯어보니까 API 호출이 두 번 되어서 그림을 두 번 생성해버려서 오류가 생긴 것이었다.

 

그래서 왜 API 호출이 두 번 되는지 열심히 찾아보았고,,

처음에는 의존성 배열 문제인 줄 알고 삽질을 했는데, 콘솔을 찍어서 여러 번 확인해보니 모든 컴포넌트에서 값들이 기본적으로 두 번씩 랜더링 된다는 사실을 깨달았다. 

 

---

❔원인

렌더링이 두 번 발생하는 이유는 React.StrictMode 때문이었다.

create-react-app으로 프로젝트를 생성하면 자동 설정되기 때문에 나도 모르는 사이 설정되어있었던 strict 모드 때문에 리렌더링이 두 번 되는 것이었다... 이걸 몰라서 오래 헤멨다..

 

React StrictMode란?

StrictMode: 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구

* strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다. 

 

React StrictMode는 여러 문제를 해결하는데, 대표적으로 다음 6가지가 있다.

1. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
2. 레거시 문자열 ref 사용에 대한 경고
3. 권장되지 않는 findDOMNode 사용에 대한 경고
4. 예상치 못한 부작용 검사
5. 레거시 context API 검사
6. Ensuring reusable state

 

어떤 역할을 하는지는 React 공식사이트에서 더 자세히 확인할 수 있다. 

---

 

💡 해결방법

 

변경 전

 

create-react-app으로 프로젝트를 생성하면, 기본적으로 index.js에 <React.StrictMode> Wrapper가 생긴다.

<React.StrictMode>  </React.StrictMode> 를 제거해주면 렌더링이 한 번만 된다.

 

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

 

 

변경 후

 

---

📌 참고링크

Strict 모드 – React

 

[React] 리액트 렌더링이 두 번 발생하는 이유