[React 숙련] 1주차_React Router Dom

오늘의 학습내용 :  React Router Dom

 

◆ Router Dom

 

리액트 라우터 돔을 통해 여러 페이지를 가진 웹을 만들어 볼 수 있다. 일반적으로 웹페이지를 이용할 때 여러 페이지를 오가며 이동할 수 있는 것처럼, react-router-dom은 페이지 이동 기능을 처리할 수 있게 해 준다.

 

라우팅(Routing)이란?
웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 맞는 페이지를 보여주는 것을 의미한다. 다양한 주소에 대해 요청이 들어오고, 네트워크에서 각각에 맞는 경로를 선택해서 해당 컨텐츠로 이동시켜 주는 작업이다. React Router 라이브러리를 통해 리액트에서 컴포넌트 기반의 라우팅 시스템을 구축할 수 있다.

 

 

 

'평소처럼 a 태그를 사용해도 되는 게 아닐까?' 라고 생각할 수 있지만, 라우터를 따로 정의하고 사용하는 데에는 이유가 있다. 우선 a 태그는 페이지 전체가 새로 로딩되며(화면의 깜빡임) 사용자의 경험을 떨어뜨릴 수 있다. 라우팅을 통하면 보다 부드러운 화면전환을 사용하게 된다. 그렇다면 SPA 안에서 모든 페이지를 렌더링하면 어떻게 될까?

• 특정 페이지에 대한 즐겨찾기 등록 불가능
• 뒤로가기 작업 불가능
• 새로고침 불가능
• SEO 검색 엔진에 의해 원하지 않은 방식으로 색인될 가능성

$ yarn add react-router-dom

 

BrowserRouter
history API를 활용해 history 객체를 생성한다. 내부적으로 stack 자료구조의 형태를 띄기 때문에 사용자가 방문한 url 기록들을 쌓아서 저장해준다. 라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 한다.

 

Route
현재 브라우저의 location 상태에 따라 다른 element를 렌더링한다.
Route.element: 조건이 맞을 때 렌더링할 element,<Element />의 형식으로 전달된다.
Route.path: 현재 path 값이 url과 일치하는지 확인하고 해당 url에 매칭된 element를 렌더링한다.

 

Routes
모든 Route의 상위 경로에 존재하며, location 변경 시 하위에 있는 모든 Route를 조회해 location과 맞는 Route를 찾는다.

 

(참고: https://velog.io/@kandy1002/React-Router-Dom-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0)

React-Router-Dom 개념잡기

 

 

◆ useNavigate

 

React에서 useState처럼 라우터 돔에서도 다양한 Hook을 사용할 수 있다. useNavigate는 페이지 이동에 쓰이는 대표적인 Hook로, Link를 사용해도 페이지 이동을 할 수 있지만, useNavigate는 특정 이벤트가 실행됐을 경우에 동작하도록 하거나 추가적인 로직을 적용 가능하다는 특징이 있다.

 

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

<button onClick={() => { navigate('/about'); }}>
  move to about page
</button>

 

+ 이전 페이지로 이동하기

<button onClick={() => { navigate(-1); }} >
이전 페이지로 이동하기
</button>

 

 

◆ useLocation

 

useLocation Hook를 사용하면 현재 location 객체에 접근할 수 있는데, 여기에는 현재 URL에 대한 다양한 정보가 포함되어 있다. pathname, search, hash, state와 같은 속성을 통해 정보를 확인 가능하다. useLocation은 사용자가 현재 URL 경로에 대한 정보를 제공하는 React 컴포넌트의 일부로 사용된다.

 

import { useLocation } from 'react-router-dom';

const location = useLocation();

const location = useLocation();

useEffect(() => {
// 콘솔에 출력해보기
  console.log(location);
}, [ location ])

// 원하는 정보를 가져와서 사용할 수 있다.