[React] Router & Sass

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

// Router.js

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

const Router = () => {
  return (
    <BrowserRouter>                                  // 1                               
      <Routes>                                       // 2                            
        <Route path="/" element={<Components />} />  // 3
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

1. BrowserRouter 컴포넌트로 전체를 감싸준다.
2. BrowserRouter 컴포넌트의 자식 요소로 Routes 컴포넌트를 넣어준다.
3. Routes 컴포넌트의 자식 요소로 Route 컴포넌트를 넣어준다.

---

실제 적용 예시

// Router.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login/Login';                    ⌉
import Signup from './pages/Signup/Signup';                 ⎮ // 1
import Main from './pages/Main/Main';                       ⌋

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Login />} />              ⌉
        <Route path='/signup' element={<Signup />} >        ⎮ // 2
        <Route path='/main' element={<Main />} />           ⌋
      </Routes>
    </BrowserRouter>
 );
};

export default Router;

1. Route 컴포넌트의 path 속성에 따라 화면에 그려줄 UI를 담은 컴포넌트를 import 한다.

2. Route 컴포넌트의 path 속성을 설정해 주고, 설정한 경로(url)로 이동했을 때, 화면에 그려질 UI를 담은 컴포넌트를 element 속성에 설정한다.

   Route 컴포넌트의 path 속성에 설정한 경로 '/'는 디폴트 값으로 경로가 지정되지 않은 경우와 같기 때문에, url에서 아무런 경로를 지정해 주지 않은 경우에는 Route 컴포넌트의 path 속성에서 ‘/’을 찾아 일치하는 element의 컴포넌트를 그려주게 된다.

---

Router 컴포넌트 활용

// Router.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Nav from './components/Nav/Nav';
import Footer from './components/Footer/Footer';
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

const Router = () => {
  return (
    <BrowserRouter>
      <Nav />                                          // nav 컴포넌트
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer />                                       // footer 컴포넌트
    </BrowserRouter>
  );
};

export default Router;

이렇게 구현하게 되면 결과적으로 Nav와 Footer 컴포넌트는 특정 경로에 따라 보여지는 것이 아니라 어떤 경로가 오더라도 항상 화면에 보여지게 된다.

---

Route 이동

• Link 컴포넌트 사용

// Login.js

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

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

export default Login;

react-router-dom에서 제공하는 컴포넌트 중 Link 컴포넌트를 이용해 라우팅 기능을 구현할 수 있다.
Link 컴포넌트의 형식을 보면 to 라는 속성에 경로를 적어 Route 컴포넌트의 path 값 중 일치하는 경로를 찾아 해당 컴포넌트를 화면에 그려주게 된다.

• Link 컴포넌트를 사용하는 이유
  a 태그를 직접 사용할 경우 페이지 이동 시 서버로부터 매번 새로운 페이지를 요청해서 받아 전체 화면을 매번 다시 렌더링하기 때문에 비효율적으로 동작하게 되는데 Link 컴포넌트를 통해 변환된 a 태그는 실제 서버에 요청을 보내지 않고, 단지 url만 변경되어 효율적이다.

• useNavigate hook

// Login.js

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

const Login = () => {
  const navigate = useNavigate();                     // 2

  const goToMain = () => {                            // 3
    navigate('/main');
  };

  return (
    <button className="loginBtn" onClick={goToMain}>  // 4
      로그인
    </button>
  );
};

export default Login;

1. Link 컴포넌트를 사용했던 것과 마찬가지로 react-router-dom에서 useNavigate를 import
2. useNavigate 함수를 실행하고, 해당 함수가 반환한 결과를 navigate라는 변수에 할당. 여기서 useNavigate가 반환하는 값은 페이지를 이동하는 함수이기 때문에, 결국 navigate 변수는 페이지를 이동하는 함수가 된다.
3. 클릭 이벤트가 발생했을 때 goToMain이라는 함수를 호출하고 함수 내부에서 navigate('/main')을 호출하면서 Main 페이지로 이동한다.
4. button 태그에 onClick 이벤트를 생성하고 이벤트 발생 시 실행될 함수를 넣어준다.

---

• Link & useNavigate hook 정리

  Link 컴포넌트
  클릭 시 바로 페이지를 이동하기 때문에, 조건 없이 페이지를 이동할 때 적합하다.
  Nav Bar의 메뉴 혹은 Aside Menu 등 바로 페이지를 이동하는 경우 사용하는 것이 좋다.

  useNavigate hook
  조건에 따라 페이지를 전환해야 할 때 사용하기 적합하다.
  로그인 버튼 클릭 시에 백엔드 API로 데이터를 전송하는 작업을 한 뒤 페이지를 이동하거나 userData의 인증 혹은 인가가 필요한 경우, 혹은 로그인 작업 이후 응답 메시지에 따른 분기 처리를 해야 하는 상황일 때, useNavigate를 사용하는 것이 좋다.