[React] fetch 요청 두 번씩 되는 오류

 

크롬 개발자모드에서 네트워크 요청을 봤을 때, 같은 api 호출을 두번씩 하는 오류가 있었다. 

 

해결 방법은 간단하게 main.tsx에서 StrictMode를 제거해준다. 

 

-기존 코드

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { Provider } from 'react-redux'
import store from '@store/store'
import '@css/main.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
)

 

- 변경 코드

import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { Provider } from 'react-redux'
import store from '@store/store'
import '@css/main.css'

createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
)