[React] Router

1. Routing

경로는 찾는 행위, Router는 Routing 해주는 도구
다른 경로에 따라 다른 화면을 보여주는 것

리액트는 라이브러리이기 때문에 라우팅 기능이 내장되어있지 않다. 그래서 별도의 라이브러리를 설치해서 구현해야 하고, CRA 통해서 만들 웹 애플리케이션은 SPA 이기 때문에 기존과는 다르게 라우팅을 구현해야 한다.

2. SPA

Single Page Application 페이지가 하나인 웹 애플리케이션 (html이 하나)
MPA (html 파일이 여러개)

React가 SPA 이므로 라우팅 기능이 필요하다.

3. React-Router

라우팅 위해 가장 많이 사용되는 라이브러리
npm install react-router-dom 으로 설치함

react-router-dom은 React에서 라우팅 기능을 구현할 수 있도록 도와주는 패키지.
패키지 안에 있는 컴포넌트를 이용해 Router 컴포넌트를 구성할 수 있다.

4. Routing 구현하기

react-router-dom 패키지에는 여러 컴포넌트가 있고 이중에서 Router 컴포넌트를 구현하기 위해서 BrowserRouter, Routes, Route 컴포넌트를 import 해야 한다.

src 폴더 안에 Router.js 파일을 만든다.

// Router.js

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

const Router = () => {
  return (
    <BrowserRouter>                                  // 1 전체를 감싼다.                            
      <Routes>                                       // 2 BrowserRouter의 자식요소                          
        <Route path="/" element={<Components />} />  // 3 Routes의 자식요소
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

<BrowserRouter> : 주소 변경에 대해 다양한 편의 기능을 제공. (페이지가 새로고침 되지 않아도 주소 변경이 가능하게 함)
<Routes> : 여러 Route를 감싸서 그중 규칙이 일치하는 Route 하나만을 렌더링 시켜주는 역할
<Route> : 규칙을 설정할 수 있는 컴포넌트. html과 형식이 유사하다. path는 경로를 설정, element는 설정한 경로로 이동했을 때, 어떤 컴포넌트를 보여줄지 결정. path = "/" : 이면 디폴트 값이므로 localhost:3000으로 이동함.

🔹 경로에 상관없이 모든 화면에서 표시되어야 하는 컴포넌트가 있다면?
<Routes> 컴포넌트 밖에 위치시키면 규칙에 포함되지 않는다. 따라서 어떤 경로에도 항상 화면에 보여지게 된다.

5. Route 이동하기

5-1) Link 컴포넌트 사용하기

import { Link } from 'react-router-dom'
Link 컴포넌트를 import 해서 사용한다.

// Login.js

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

const Login = () => {
  return <Link to="/signup">회원가입</Link>;
};

export default Login;

🔹 <a> 를 사용하지 않는 이유?

a 태그를 사용할 경우 페이지 이동 시 새로운 페이지를 요청해서 받아온다. 이 경우, 현재 화면에서 몇가지만 바뀌는 경우에도 전체 화면을 렌더링 하므로 비효율적으로 동작하게 된다.
link 컴포넌트를 통해 변환된 a태그는 실제 서버에 요청을 보내지 않고, url만 변경되고 이를 react-router-dom 이 인지하여 그 부분만 새로 렌더링된다.

5-2) useNavigate hook 사용하기

// Login.js

import React from 'react';
import { useNavigate } from 'react-router-dom';       // 1 useNavigate import

const Login = () => {
  const navigate = useNavigate();                     // 2 페이지를 이동하는 함수

  const goToMain = () => {                            // 3 클릭이벤트가 발생했을때, goToMain 함수 호출, 해당 url로 페이지 이동
    navigate('/main');
  };

  return (
    <button className="loginBtn" onClick={goToMain}>  // 4 JS에서 addEventListener 역할
      로그인
    </button>
  );
};

export default Login;

🔹 <Link /> 와 useNavigate 의 차이?
link는 단순히 클릭했을때 적합하다. 조건 없이 페이지를 이동할 때
useNavigate는 로직이 포함되어 조건에 따라 함수의 호출 형태로 페이지를 이동할 때 (로그인 정보 입력 후 회원정보 확인할때)