Router을 사용하지 않을 때 문제점
“이것은 기존에 포스팅한 Tab-menu의 문제점이기도 합니다.”
- URL이 변하지 않기 때문에 특정 페이지에 대한 즐겨찾기 등록 등이 불가합니다.
- 뒤로가기 버튼 클릭 시 전혀 다른 웹 사이트로 이동합니다.
- 새로고침 버튼 클릭 시 무조건 최초에 렌더링되는 컴포넌트로 이동합니다.
React Router 시작하기
위의 문제점을 해결하기 위한 네비게이션 라이브러리 React Router을 사용하기 위해 설치합니다.
npm install --save react-router-dom핵심 컴포넌트
- Link : HTML의 a태그와 유사한 기능을 합니다. href속성이 아닌, to prop를 통해서 경로를 지정합니다. 주소창의 경로가 to prop로 갱신됩니다.
ex)<도메인네임>/about - Route : 현재 주소창의 경로와 매칭될 경우 보여줄 컴포넌트를 지정하는데 사용합니다. path prop를 통해서 매칭시킬 경로를 지정하고, component prop를 통해서 매칭되었을 때 보여줄 컴포넌트를 할당합니다.
ex) <Route path=“/about” component={About} /> - Router : 위 컴포넌트(Link, Route)가 함께 유기적으로 동작하도록 묶어주는데 사용합니다. 즉 위의 컴포넌트는 DOM 트리에서 항상 <Router>을 공통 상위 컴포넌트로 가져야합니다.
참고로,
react-router-dom의 Router는 BrowserRouter, HashRouter 두가지가 있습니다.
BrowserRouter : HTML5의 history API를 활용해서 UI 업데이트(예제에서 사용)
HashRouter : URL의 hash를 활용한 라우터로, 정적인 페이지에 적합
Tab-menu 예제
아래의 코드처럼 라우터를 사용해서 간단한 탭메뉴를 구현할 수 있습니다.
comp 폴더안에 home페이지와 menu페이지를 작성한 후, header의 button을 클릭할때 하단의 #container에 해당 컴포넌트가 출력되도록 구현한 예제입니다.
중첩라우팅(Nested Routing)
중첩 라우팅이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법입니다.
간단하게 표현하면 다음과 같습니다.
www.mycafe.com/menu : 메뉴 페이지
www.mycafe.com/menu/1 : id 1을 가진 메뉴의 상세페이지
중첩라우팅 시작하기
- 중첩라우팅을 구현하기 위해서는 React Router의 <Route> 컴포넌트의 component prop으로 넘어온 컴포넌트에 prop으로 어떤 값들이 넘어오는지를 알아야 합니다.
- <Route> 컴포넌트를 이용해서 경로에 <About>컴포넌트를 맵핑시키면, React Router은 match, location, history라는 3개의 prop을 <About>컴포넌트에 넘겨줍니다. <About> 컴포넌트에서는 이 3개의 prop를 읽어서 각 객체가 어떤 데이터를 담고 있는지 렌더링 할 수 있습니다.
3개의 prop
- match : Route의 path에 정의한 것과 매칭된 정보를 가지고 있으며, params에 설정한 파라미터를 담고 있습니다.
- location : 브라우저의 window.location과 유사하며, 현재 페이지 정보를 가지고 있습니다. URL의 query정보를 search라는 프로퍼티에 가지고 있습니다.
- history : 브라우저의 window.history와 유사하며, 주소를 임의로 변경하거나 되돌아 갈 수 있도록 합니다. 주소 변경시 SPA특성을 지키기 위해 페이지 전체를 리로드 하지 않습니다. location이 포함되어 있습니다.
중첩라우팅 구현에는 매칭 정보를 담고있는 match가 사용됩니다.
- match.url : <Link> 컴포넌트를 위해 사용되며, 실제로 매칭된 URL문자열(ex. /menu)을 담고 있습니다.
- match.path : <Route> 컴포넌트를 위해 사용되며, 매칭에 사용된 경로의 패턴(ex. /menu/:id)를 담고 있습니다.
중첩라우팅 예제
- Menu버튼 클릭시 #container에 Menu컴포넌트와 MenuList 컴포넌트가 함께 출력됩니다.
- 메뉴 리스트에서 메뉴를 클릭하며, URL에 클릭된 메뉴 아이디의 정보가 보여지며, #container에 Menu컴포넌트와 MenuDetail 컴포넌트가 출력됩니다.
- 예제에서 detail을 구현하는 부분은 json파일(menuData.json)을 기반으로 만들어졌습니다.
- 브라우저의 이력 정보와 관련 유틸리티 함수를 가지고 있는 history prop를 이용해서 goBack()(뒤로가기)를 구현했습니다.
전체코드는 Git에서 확인이 가능하고, 구현 결과는 아래와 같습니다.
참고
