리액트의 라우터 v4를 알아봅시다.

리액트 라우터를 배워봅시다.

라우팅이란 무엇일까요? 간단히 설명하자면 우리의 요청(url)에 맞게 연결해주는 것이라고 생각해주시면 됩니다. 우리는 url을 통해서 어떤 요청을 할까요? 우선 url이 어떤 형태인 지를 보겠습니다.

url 형태

구글에 리액트 라우터라고 검색했을 때 url의 형태입니다. 파란부분(https)는 프로토콜입니다. 그리고 주황색 부분(www.google.co.kr)은 호스트 네임이라고 합니다. 중요한 건 호스트 네임 뒷부분에 있는 것들입니다. 초록색 부분(search)는 path name이라고 하고 "?"뒤에 있는 부분은 쿼리스트링(querystring)이라고 합니다. 또 페이지 내에서 위치를 표시할 때는 # 형태로 url이 좀 더 추가되기도 하는데 이 부분은 hash라고 표현합니다. 이렇게 용어들을 알고 있으면 좀 더 쉽게 리액트 라우터를 이해할 수 있습니다. 해당 형태로 요청(url을 입력)을 하면 어디에 연결시킬 지 알려주는 것이 라우팅이라고 생각하시면 됩니다.

리액트 라우터 돔 다운로드

지금부터는 간단한 예제를 만들어보겠습니다. create-react-app을 통해서 프로젝트를 만들고 리액트 라우터 돔(react-router-dom)을 다운로드 받아주세요.

yarn add react-router-dom

다운로드 받았으면 라우터를 앱과 연결시켜야 합니다.

위의 코드처럼 index.js에 있는 App을 BrowserRouter로 감싸주세요. react-router-dom에서는 BrowserRouter 말고도 HashRouter도 제공하지만 해당 라우터는 정적 파일만 제공할 때 사용하기 괜찮습니다. 저희는 가장 많이 사용하는 BrowserRouter로 예제를 만들어보도록 하겠습니다. 이처럼 앱을 라우터로 감싸면 라우터가 history api에 접근할 수 있고 Route를 사용할 때 match, history, location 등의 props를 사용할 수 있게 해줍니다.

Route 사용하기

요청(url)이 들어왔을 때 그 요청에 맞는 컴포넌트를 보여주는 역할을 하는 것이 Route(Router가 아니라 Route!)입니다. 앱 컴포넌트 내부에 정의해보도록 하겠습니다.

path props를 받는 것이 보이시나요? url을 요청할 때 pathname이 있었죠? path 속성에 맞는 url요청에 대해서 component 속성에 전달된 컴포넌트를 보여줍니다. component 대신에 render 속성을 사용하시고 리액트 컴포넌트를 직접 넣으셔도 상관없습니다. 또 중요한 부분은 맨 처음 라우트에 들어가 있는 exact 속성입니다. 라우트는 요청을 보고 해당되는 건 다 보여주게 됩니다. "/about"에 접속하면 "/"(Home 컴포넌트가 보여지게 됩니다.)에도 해당되고, "/about"에도 해당됩니다. 그래서 두 개를 다 보여주게 됩니다. 하지만 exact를 넣으면 정확히 path가 같을 때만 보여지게 되죠. 즉 "/about" 요청에 "/"는 정확히는 같지 않기 때문에 Home이 보여지지 않게 됩니다.

앱 파일 밑 부분에 컴포넌트를 간단히 정의해봤습니다. 이제 테스트 해볼까요? 하지만 테스트 하기 전에 하나더 추가할 것이 있습니다. url을 우리가 직접 입력하는 것보다는 링크를 통해서 이동하는 것이 좋으니 앱의 렌더링 되는 부분에 네비게이션을 추가해보도록 하겠습니다.

이제 다 정의했으니 실행해 볼까요?

에러없이 잘 실행되나요?

링크를 통해서 이동해보세요. 신기한 점은 링크를 통해서 이동해도 페이지를 새로고침 하지 않고 컴포넌트를 보여준다는 점입니다. 우리는 리액트 라우터의 Link 컴포넌트를 사용했죠? 링크 컴포넌트는 새로고침 하지 않고 url을 바꿉니다. 그리고 url을 바꾸면 라우트는 해당 url(요청)에 대한 알맞은 컴포넌트를 다시 우리에게 보여주게 되는 것이죠.

SPA(single page application)

미리 설명드리지는 않았지만 위와 같은 형태를 싱글 페이지 어플리케이션이라고 합니다. 맨 처음의 요청으로 필요한 부분을 다 갖고오고, 클라이언트 사이드에서 우리에게 맞는 부분을 보여주는 것이죠. 그래서 새로고침이 되지 않았던 것입니다. Route와 Link를 통해서 아주 간편하게 SPA를 만들 수 있죠? 

Link 대신 NavLink를 사용해보세요. 

네비게이션을 사용할 때 해당 링크가 선택되어 있으면 표시를 할 수도 있습니다. 이때는 NavLink를 사용하고, activeStyle 속성에 값을 전달해주면 됩니다.

해당 코드를 복사해서 테스트해보세요. 링크에 맞는 페이지가 보여지고 있을 때 링크색이 빨간색으로 변하는 것을 확인할 수 있습니다.

아주 간단한 리액트 라우터 예제를 통해서 spa를 만들어 봤습니다. 다음 포스팅에서는 리액트 라우터를 좀 더 깊게 파보도록 하겠습니다. 공감은 제작자에게 큰 힘이 됩니다.