url 변경 시, 페이지가 리렌더링 되지 않는 현상

#1 들어가기

안녕하세요.

오늘은 react-router-dom으로 라우터를 구성하던 중, 문제가 발생한 상황에 대해서 포스트를 써보도록 하겠습니다.

 

저는 개인적으로 사이드 프로젝트로 간단하게 페이지를 만들며 작업을 하고 있었습니다.

페이지 전환 작업을 react-router-dom의 도움을 받았구요.

react-router-dom은 리액트의 화면 전환을 도와주는 역할을 하는 녀석이죠.

페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줍니다.

#2 문제

혹시, Route 설정을 다하고 url은 정상적으로 변경되지만, 렌더링이 되지 않는 현상을 겪어본 적이 있으신가요?

 

저는 react-router-dom의 도움을 받아, 페이지에 따른 각각의 컴포넌트를 불러와 렌더링하여 페이지를 구성하려고 했습니다.

각 페이지의 데이터를 잘 들어오는지 확인하려고 console.log를 찍어봤습니다.

 

엥?

 

url은 정상적으로 잘 작동하여 각 페이지의 url로 변경되었지만 렌더링이 되지 않는 현상이 발생했습니다.

 

처음 겪어보는 상황에 좀 많은 시간을 뺏겼던 것 같습니다.

#3 해결

사실 해결은 정말 간단했습니다.

 

react-router-dom의 대한 이해가 부족한 것이 컸던 것 같고, 역시 코딩은 알면 간단하지만 모르면 헤매는 상황이 어쩔 수 없는 것 같습니다.

 

저의 App.tsx입니다.

export const App: React.FC = () => {
    return (
        <BrowserRouter>
          <Layout />
        </BrowserRouter>
    )
}

이렇게 BrowserRouter로 감싸놓고 Layout안에서 Route 구성을 하였습니다.

 

근데 여기서 Layout.tsx를 봅시다!

export function Layout() {
  return (
    <>
      <BrowserRouter>
        ...내용물
      </BrowserRouter>
    </>
  );
}

Layout.tsx에서 다시 BroswerRouter를 안에서 Route 작업을 하고 있던 것이였습니다.

 

여기서 문제는 두 개의 별도 라우터 구성 요소가 있다는 점입니다.

 

하나의 URL을 변경해도 다른 하나의 URL로 변경 사항이 전달되지 않습니다.

 

즉, ReactRouter가 App.tsx와 Layout.tsx의 다른 부분을 별도로 렌더링 하고 있기 때문에

레이아웃 구성 요소와 같은 것을 만들고 모든 구성 요소를 두고 단일 BrowserRouter를 가질 수 있게 해야 합니다.

 

저 위의 경우는, Layout 및 Root 요소는 다른 BrowserRouter로 감싸져 있기 때문에, Layout은 안의 Link 구성 요소로 감싼 곳을 업데이트 합니다. Layout 안의 Link는 index.tsx 파일의 root를 감시하고 있는 것이 아니기 때문에 제대로 동작하지 않는 것입니다.

 

export function Layout() {
  return (
    <>
        ...코드
    </>
  );
}

 

이렇게 단일 BrowserRouter로 감싸주어 해결  할 수 있었습니다.