최근 글쓰기가 뜸했다. 인정한다. 여러모로 바빴다. 웹 애플리케이션 하나도 만들고 있고, 결과는 암담하지만 면접도 한번 보고 왔다. 슬슬 글 하나 정도는 써주지 않으면 영원히 쓰지 않을 것 같아 부랴부랴 올린다. 없겠지만 혹시라도 기다렸던 분들 있으면 미안하다.

왜 react-router v4 인가?

react-router로 페이지 라우팅 하는 법을 다루려면 그냥 react-router 라고만 적지, 왜 버전명이 같이 언급됬는지 궁금하신 분들 계실 거다. 결론부터 말하면 react-router v4와 그 이전 버전의 사용법이 많이 달라졌기 때문이다. 다시 말해, 잘 사용하던 코드를 v4에 그대로 끼얹으면 작동을 안 한다는 소리다.

말만 들어도 고통스럽다. 벌써부터 온몸이 아파온다. 그래도 이것이 지금의 JS다. 15년 전 홈페이지에 눈내리기 효과 넣어주던 ‘매크로’가, 하루가 다르게 새로운 기술이 나오고 파이썬, 루비 등과 어깨를 나란히 하는 활발한 스크립트 언어가 되었다. 몸 좀 아파도 끝없이 성장해나가는 JS를 위해 우리 좀 참아주자.

알맹이

아래는 기존에 사용되던 알맹이 코드이다.

<Router history={browserHistory}>
      <Header />
        <Route path="/" component={Main}>
            <IndexRoute component={Main}/>
            <Route path="auth" component={Auth}/>
        </Route>
    </Router>

나름 직관적으로 적혀 있어 React를 조금 만져보신 분들이라면 이해에 큰 어려움이 없을 것이라 생각된다. 처음 홈페이지를 접속했을 때(/) Main 컴포넌트가 뜨고, /auth 주소로 접속하면 Auth 컴포넌트가 뜨는 코드다. (browserHistory는 웹페이지에서 뒤로가기를 눌렀을 때도 전체가 새로고침 되지 않도록 도와주는 기능, IndexRoute는 웹페이지의 첫 화면을 정의해주는 기능이다.)

문제는 아까 말했듯 이렇게 열심히 작성한 코드가 최신 v4 버전에서는 깡통이 되어버린다는 것이다. 깡통이라는 표현이 절대 빈말이 아니다. v4 버전에 적용해보면 정말 아무것도 랜더링하지 못한다. 하얀 화면만 끝없이 펼쳐질 뿐이다. 숙련자들도 골치 아픈 문제지만, 특히 처음 React를 접한 분들에게는 더 치명적이다. 나는 분명 가이드 글에 맞추어 코드를 짰는데 아무것도 나오지 않는다. 으악.

이 글을 찾아오신 분들도 대부분 위같은 문제에 시달리고 있을 것이다. 그럼 더 이상 뜸들이지 않고, 위 코드를 v4에서 작동될 수 있는 코드로 변환해 보겠다.

<Router>
    <div>
      <Header />
      <Route path="/" exact component={Main} />
      <Route path="/auth" component={Auth} />
    </div>
  </Router>

짜잔. 비슷하면서도 조금 더 간결해지지 않았는가. 이전 버전에서 사용했던 페이지 전체 새로고침 방지 목적의 browserHistory는 더 이상 사용하지 않아도 되고 (역할이 많이 바뀐 것 같다. 자세한 것은 나중에 추가할 예정), IndexRoute 대신 exact를 사용해 첫 페이지를 정의해줬다.

마치며

react-router는 위 같은 간단한 페이지 라우팅을 넘어 훨씬 더 복잡하고 많은 일을 할 수 있지만, 이 글의 목적은 그 ‘간단한 페이지 라우팅’ 이였다. 가장 기본이 되는 기능이고, 또 없어서는 안될 기능이다. 지금까지 골머리 썩었던 분들이 도움을 받아갈 수 있었으면 좋겠다.