[React] 렌더링이 두번 될 경우 (api 호출이 두번 될 경우)

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위해 작성되어 있다.

 

그런데 문제를 알아내기 위해 검사하면서 api를 한번 더 호출해버리는 문제가 있다.

 

하지만 StrictMode는 개발 모드에서만 활성화되기 때문에 production 환경으로 실행시에는 메서드들이 이중으로 호출되지 않는다.

 

그렇기에 불편을 조금 감수하더라도 큰 문제가 없다면 StrictMode를 놔두는 것이 이득일 수 있다.

 

물론 그래도 싫다면 main.tsx or main.jsx 에서 <React.StrictMode>를 지워주면 해결이 되긴 한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

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

 

 

 

Reference

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