[React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기

[React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header

---

랜딩 페이지

랜딩 페이지로만 꾸몄다면 네비게이션은 더 손 보지 않아도 되었지만 Blog 카테고리를 하나 추가할 예정이었기 때문에 Router에 따른 컴포넌트 렌더링을 위해 react router 라이브러리를 추가해주기로 했다.

 

yarn add react-router-dom

 

yarn을 이용해 Web 용 라이브러리인 react-router-dom을 설치해준다. react-router-dom은 동적 라우팅을 위해 <Link>, <Route> 등의 컴포넌트를 사용하는데, 이 컴포넌트들은 항상 <Router> 컴포넌트로 싸여 있어야 한다. 일반적으로는 BrowserRouter를 Router 컴포넌트로 사용하므로, index.js에 아래처럼 추가해주었다.

 

 

 

 

 

이제 <App> 컴포넌트 아래에서는 <Link>, <Route> 등의 컴포넌트를 자유롭게 사용할 수 있다.

Link, useLocation

Headr에서 현재 라우터 주소가 '/'에 위치할 경우 보여지는 네비게이션 링크 아이템들과 '/blog'에 위치할 경우 보여지는 네비게이션 링크 아이템들을 다르게 해주기 위해서 아래처럼 꾸몄다.

 

 

 

 

useLocation을 import 해준 뒤, useLocation().pathname을 해주면 현재 브라우저 URL의 pathname을 가지고 온다. window.location.pathname을 써봤다가, react-dom-router 라이브러리를 사용할 때는 제대로 동작하지 않는 듯해서 라이브러리가 제공하는 메서드를 썼다.

 

<Link> 컴포넌트는 to prop을 받아 해당 컴포넌트에 클릭 이벤트가 발생하면 브라우저의 URL 주소를 to prop에 적은 pathname을 붙여 바꿔준다.

 

현재 주소가 http://localhost:3000/blog 에 위치할 경우

현재 주소가 http://localhost:3000/ 에 위치할 경우

그러면 라우터 주소에 따라 렌더링될 부분도 달라져야 한다. 나는 App Bar와 Footer 그리고 가운데에 위치하는 바디 컴포넌트는 공통으로 쓰고 싶어서 아래처럼 구조를 만들어줬다.

 

 

 

exact={true} prop을 이용할 때는 path='/'로 설정되었을 때 '/blog' 같이 '/'를 포함한 path는 무시하고, '/'가 pathname일 경우에만 적용한다는 의미이다.

component={} 형태로 prop을 쓸 때가 있고, component에 그 외 prop을 전달해야 할 일이 있으면 component = {() => {}} 형태로 써주면 된다. 물론 중첩으로 Routing도 가능하다.