React-Router

React 프로젝트를 하면서 라우팅 처리를 위해 React-Router를 사용한 내용을 정리해봤다.

• React-Router가 뭘까?

  먼저 라우팅(Routing)에 대해 알고가자면 라우팅(Routing)은 주소에 따라 다른 화면을 보여주는 과정, 즉 사용자가 요청한 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. 여기서 페이지 이동이라는 a태그를 떠올릴 수 있다. 그럼 React-Router와 a태그의 비교를 통해 알고 React-Router 사용에 대해 알아보자

a태그: 페이지 이동시 화면을 새로고침 후 이동
React-Router: 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 부분만 가져와 불필요한 랜더링을 방지

• React-Router 설치

npm install react-router-dom

• React Router 모듈

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

• React Router 적용코드

// App.js

<BrowserRouter>
	<Routes>          
    	<Route path="/" element={<Main />} />
        <Route path="/map" element={<Map userId={userId} />} />
        <Route path="/signup" element={<PrivateRoute component={<SignUp />} userId={userId} />} />
        <Route path="/signin" element={<PrivateRoute component={<SignIn />} userId={userId} />} />
        <Route path="/mypage" element={<MyPage userId={userId} userProfile={userProfile} setUserProfile={setUserProfile} />} />
        <Route path="/aboutus" element={<AboutUs />} />
        <Route path="/community" element={<Community isLogin={isLogin} />} />
        <Route path="/community/:id" element={<Community userId={userId} />} />
        <Route path="/writeCommunity" element={<WriteCommunity userId={userId} />} />
        <Route path="*" element={<NotFound />} />          
	</Routes>
</BrowserRouter>

상단에 BrowserRouter로 라우팅할 컴포넌트들을 감싸고 Routes 하위 경로에 따라 Route로 path에 경로를 적어주고 element에 경로에 맞는 컴포넌트를 적어주면 보여지는 구조이다.
지정된 경로가 아닌 경우에 path에 * 를 적어주면 따로 존재하지 않는 페이지를 처리할수있다.

- Link

 <Link to="/map" >어린이집 정보 찾기</Link>

a태그와 비슷하게 클릭 시 바로 이동할때 사용되고 Link는 경로에 href가 아니라 to에 이동하려는 경로를 적어주면 된다.

- useNavigate

const navigate = useNavigate();

const PrivateRoute = ({ userId }) => {
	!userId ? navigate("/signup") : navigate("/");
  };

useNavigate도 Link와 같이 페이지 이동할 때 사용된다. useNavigate를 실행하면 페이지 이동을 해주는 함수를 반환한다. 바로 useNavigate("/")로 적으면 에러가 나기때문에 navigate 변수에 담아 사용해야한다.

- Navigate

<Navigate to="/" {...alert("로그인 상태입니다.")}></Navigate>

useNavigate 훅의 래퍼 컴포넌트이고 useNavigate를 사용할 수 없을때 경로 이동에 사용한다.
Link와 똑같이 to에 이동시킬 경로를 적어주면 된다.
로그인상태일때 회원가입과 로그인 페이지로 이동하게되면 알림창이 뜨도록 아래와 같이 Navigate를 이용했다.

 const PrivateRoute = ({ userId, component: Component }) => {
    return !userId ? Component : <Navigate to="/" {...alert("로그인 상태입니다.")}></Navigate>;
  };
  
    <Route path="/signup" element={<PrivateRoute component={<SignUp />} userId={userId} />} />
    <Route path="/signin" element={<PrivateRoute component={<SignIn />} userId={userId} />} />