[React] router를 이용한 페이지 이동

리액트에서는 페이지 이동 기능을 구현하기 위해 다양한 라이브러리를 사용할 수 있는데
그 중에서도 리액트 라우터를 사용해보려고 한다.

리액트 라우터는 사용자가 요청한 url에 따라서 다른 페이지를 띄워준다.
리액트 라우터 중에서도 가장 많이 사용하는 컴포넌트는 HTML5를 지원하는 브라우저 주소를 감지하는 BrowserRouter 컴포넌트이다.

본 포스팅에서는 react router 라이브러리의 BrowserRouter 컴포넌트를 이용하여 페이지 이동을 구현하고자 한다.

1. react-router-dom 설치

npm install react-router-dom@6

2. App.js에서 라우팅 적용

import { BrowserRouter, Routes, Route } from "react-router-dom";

App.js에서 BrowserRouter, Routes, Route 컴포넌트를 import 해준다.

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
      	<Route path='/' element={<HomePage />} />
        <Route path='/clubs/central' element={<CentralClubPage />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}
export default App;

먼저 react router를 사용할 상위 컴포넌트를 BrouserRouter로 감싸주고,
Routes 태그 안에 이동할 페이지들의 경로와 그에 맞게 보여줄 컴포넌트를 Route 태그로 넣어준다.

• path -> 페이지 경로
• element -> 렌더링 할 컴포넌트

렌더링 할 컴포넌트들은 당연히 모두 import가 필요하다.
기본 페이지 설정은 path='/' 로 해준다.

해당 프로젝트에서는 모든 페이지에 Header와 Footer가 동일하기 때문에 Routes 태그 밖으로 빼주었다.

🍯 경로 설정 할 때, 백엔드 포지션과의 상의를 통해 컨벤션을 정해두면 나중에 편하다 !
(당연한 거지만 프로젝트를 시작할 당시에는 생각도 못하고 있었던 부분 ..)

3. Link 태그로 연결

import { Link } from "react-router-dom";

export default function MenuBar() {
    return (
        <>
 			<Link to="/clubs/central" style={{ textDecoration: "none"}}>
            	<p className="text_central">중앙 동아리</p>
            </Link>
        </>
    )
}

이렇게 Link 태그로 연결 시켜주기만 했을 때는 주소창의 url만 바뀌고 실제 페이지는 바뀌지 않는다.

2번 과정과 같이 따로 렌더링 될 페이지를 설정해주어야 한다.

💡 Link 태그에 스타일을 적용 시켜준 이유 ?
: 라우터를 사용하면, p태그 텍스트에 밑줄이 생겨 없애주기 위함

좀 더 스타일링 옵션의 폭을 넓히고 싶다면 Link 대신 NavLink 태그를 사용하는 것도 좋다.

4. 존재하지 않는 페이지 처리

<Route path="*" element={<NotFound />}></Route>

앞에서 정의한 경로와 일치하는 것이 없는 모든 주소(*) 로 접근하는 경우 보여지는 페이지를 구현한다.

---

👩🏻‍💻 이전 프로젝트를 진행 했을 때
페이지 이동 시, 변경되는 주소를 라우터로 지정할 수 있다는 것을 모르고 있어서 폴더 구조를 뒤집어 엎은 적이 있었다.
리액트 라우터를 그 때 이해 했더라면 .. 이라고 생각하기도 했지만 그 때의 노가다도 나름 경험이었다.

다음 프로젝트를 진행하게 된다면 다른 라이브러리나 컴포넌트를 사용해서 구현 해보고싶다 !

(혹시라도 제가 잘못 알고 있는 부분이 있다면 언제든지 피드백 부탁 드립니다 🤍)