리액트 라리브러리 - 리액트 라우터 돔

리액트는 자체적으로 가진 라우터기능을 없습니다. 리액트 라이브러리 중 하나인 리액트 라우터 돔을 사용하여 페이지 간에 경로를 구현해 보겠습니다.

목차

• 프로젝트 구성하기
• 구현하기
  • 리액트 라우터 돔 설치
  • 경로 설치
• 세부 경로
• 파라미터 추가하기
• 내비게이션 활용하기
  • 링크
  • 유즈네비게이트
• 활성화된 메뉴 표시하기
  • 나브링크
  • 유즈로케이션
• 경로 접근 제한하기

프로젝트 구성하기

리액트 앱 생성

리액트?

컴포넌트 추가하기

페이지 이동 예시를 위해 아래와 같이 두 컴포넌트를 추가합니다.

구현하기

리액트 라우터 돔 설치

콘솔에서 아래 명령어를 통해 필요한 패키지를 설치합니다

npm i react-router-dom

경로 설치

메인페이지에 설치한 패키지를 가져옵니다. 경로 설치를 위해 필요한 함수들은 'BrowserRouter', 'Routes', 'Route' 이렇게 세 가지입니다

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

▶ BrowserRouter

경로를 인식하기 위한 태그로 세부경로 구분을 위해 '/'를 사용합니다

 

▶ Routes

라우터들을 포함합니다. 버전 6 이후로 라우터들은 반드시 이 태그 안에 포함되어야 정상 작동합니다

 

▶ Route

컴포넌트의 경로를 지정합니다. path속성에 사용된 경로를 포함한 경로를 열기 때문에 루트 경로인 '/'의 경우 다른 컴포넌트가 열릴 때 항상 같이 열리는 데 이를 방지하기 위해 'exact'옵션을 추가합니다

<Router>
  <Routes>
    <Route exact path='/' element={<Home />} />
    <Route path='/about' element={<About />} />
  </Routes>
</Router>

세부 경로

설정된 경로로 세부경로를 지정하고자 할 때 기본경로 끝에 아래처럼 별표를 추가하고

/*

지정된 경로에 또 다른 루트를 아래처럼 추가하면

하부경로를 지정할 수 있습니다

파라미터 추가하기

리액트 훅 - 유즈 퍼램 (리액트 라우터 돔)

내비게이션 활용하기

내비게이션 컴포넌트를 만들고

메인페이지에 추가합니다

링크

내비게이션 컴포넌트로 이동하여 아래와 'Link'를 불러오고

import { Link } from 'react-router-dom'

아래와 같이 'to'를 활용하여 경로를 설정합니다

<Link to={'/'}>Home</Link>

유즈네비게이트

내비게이션 컴포넌트로 이동하여 아래와 'useNavigate'를 불러오고

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

변수에 초기화한 뒤

const navigate = useNavigate()

아래와 같이 변수에 경로를 지정하여 사용합니다.

<button onClick={() => navigate('/')}>Go</button>

활성화된 메뉴 표시하기

나브링크

활성화된 메뉴표시는 'NavLink'를 사용해서 구현가능합니다. 내비게이션 컴포넌트에 'NavLink'를 가져오고

import { NavLink } from 'react-router-dom'

해당태그로 교체한 뒤 'activeCalssName'이라는 속성을 추가하고 사용하고자 하는 클래스명을 값으로 넣습니다

<NavLink exact to='/' activeClassName='active'>Home</NavLink>

CSS파일에서 해당 클래스명에 스타일을 부여하면 완성

.active {
  background-color: rebeccapurple;
}

유즈로케이션

다른 방법으로 활성메뉴를 표시하기 위해 유즈로케이션 훅을 사용할 수 있습니다. 훅을 가져오고

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

변수에 초기화

const location = useLocation()

해당 훅은 path name을 반환하는데, 이를 조건으로 활용해서 활성화된 메뉴를 표시가능합니다.

<li style={{color: location.pathname === '/' ? '#2c2c2c' : '#8f8f8f'}} />Home</li>

경로 접근 제한하기

설사 화면에 특정 페이지로 이동하는 링크가 설정되어 있지 않아도 설정된 경로는 누구나 접근가능하기 때문에 인증된 유저만 접근할 수 있는 등 접근을 제한할 필요가 있는 경우 추가작업이 필요합니다.

 

인증여부를 체크하고 해당 페이지 또는 다른 페이지로 교통정리를 해 주는 컴포넌트 생성, 네이게이터와 아웃렛을 가져오기

import { Navigate, Outlet } from "react-router-dom"

아래와 같이 조건에 따라 특정페이지 또는 다른 페이지로 이동시키는 코드 작성

const isLogged = false  
return isLogged ? <Outlet /> : <Navigate to='/login ' />

전체경로가 지정된 컴포넌트로 이동하여 아래와 같이 하부 경로를 가지는 경로로 수정. 이때, 경로는 반드시 일치해야 함

<Route exact path='/profile' element={<PrivateRoute />}>
  <Route path='/profile' element={<Profile />} />
</Route>

이상으로 리액트 라이브러리 리액트 라우터 돔을 활용하여 페이지경로를 추가하는 방법을 보았습니다.

---

참고

 

Traversy Media - YouTube

Traversy Media