React Router URL에 따라 Mount 시키기

지금 프로젝트가 홈 -> 설문 -> 검색 화면으로 이어지는데,
검색 화면으로 들어왔을 때 설문의 내용에 따라 필터를 적용하고 싶었다.
그런데, 홈 화면에 들어가기만 해도 갑자기 mount가 되어버렸다.

mount가 되었다는 얘기는 React lifecycle상 componentDidMount가 호출되었다는 얘기다.

이게 기존의 코드다

// App.js
function App() {
  return (
    <div>
      <Route path="/"> <HomePage /> </Route>
      <Route path="/survey"> <SurveyPage /> </Route>
      <Route path="/search"> <SearchPage /> </Route>
    </div>
  )
}

---

문제 해결

React router 관련 자료를 찾아보다가 못 보던 prop이 보였다.

바로 Route에 component가 있었는데, 이 component에 컴포넌트를 넣어봤다.

// App.js
function App() {
  return (
    <div>
      <Route path="/" component={HomePage} />
      <Route path="/survey" component={SurveyPage} />
      <Route path="/search" component={SearchPage} />
    </div>
  )
}

오, url이 해당 path에 해당할 때 mount된다.

---

변형

자, 그럼 이렇게 반복문으로 하고 싶을 수 있다.

// App.js
const routes = [
  { path: '/', exact: true },
  { path: '/survey', exact: false },
  { path: '/search', exact: false },
];

function App() {
  return (
    <div>
      {pages.map((page, i) => 
        <Route key={`app-page-${i}`} {...routes[i]}> {page({})} </Route>
      )}
    </div>
  )
}

이렇게 바꿔보자

// App.js
const routes = [
  { path: '/', exact: true },
  { path: '/survey', exact: false },
  { path: '/search', exact: false },
];

function App() {
  return (
    <div>
      {pages.map((page, i) => 
        <Route key={`app-page-${i}`} {...routes[i]} component={page} />
        //또는 props를 전달하고 싶다면
        <Route key={`app-page-${i}`} {...routes[i]} component={() => page({ ... }) } />
      )}
    </div>
  )
}

끝!