REACT 리마운트 안 됨

세 줄 요약!

1. React에서 주소만 바뀌고 화면은 안 바뀜

2. React Router 와 ReactDOM.createRoot 버전 충돌

3. index.tsx 에서 <React.StrictMode> 주석 처리

 

상황

<Link to="/example">example</Link>

클릭하면 url은 localhost:3000/example 로 바뀌는데, 화면은 재렌더링되지 않음

 

시도

Route 경로 설정을 잘못했는가?

-> 잘함

 

<BrowserRouter> 태그가 최상위에 있어야 하는데, 이를 반영하지 않았는가?

-> 반영함

 

결론

// <React.StrictMode>
  <QueryClientProvider client={queryClient}>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </QueryClientProvider>
  // </React.StrictMode>

위 코드처럼 React.StrictMode 를 주석 처리했다.

 

이유

ReactDOM.createRoot는 React 18 버전의 최신 API인데, 사용하는 React Router는 v5로 서로 호환성 문제가 발생한 것

StrictMode는 component가 두 번 마운트되는 개발 환경에서의 변경을 감지하도록 설계되었는데 이게 React Router v5와 완벽히 호환되지 않음...

그래서 React Router를 v6으로 업그레이드하는 방법이 추천되었으나 현재 듣고 있는 강의가 v5 기준이기 때문에 다른 방법을 찾음

그 방법이 StrictMode를 주석 처리하는 것이었는데, StrictMode는 개발 환경에서만 동작하며 잠재적 문제를 감지하는 등의 역할을 하지만

당장 Router 버전과 충돌이 있으며 런타임에 영향을 미치는 기능이 아니기 때문에 주석 처리하자마자 문제 없이 잘 실행됨!