Routing

✅ Routing이란?

사용자가 요청한 url에따라 해당 url에 맞는 페이지를 보여주는 것이다. 리액트는 라이브러리이기에 UI를 그리는 기능만 있어서 react-router를 설치해서 routing 기능을 사용한다.

✍️ React-Router

Router.js로 프로젝트 내에 컴포넌트들에 대한 경로를 관리한다. 사용자가 입력한 주소를 감지하는 역할을 하며 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.
경로 이동 방법은 Link컴포넌트와 useNavigate hook을 사용한다.

✍️ Router Component

• BrowserRouter컴포넌트 : 주소 변경에 대해 다양한 편의 기능을 제공해준다. 대표적인 기능으로는 페이지가 새로 고침되지 않아도 주소 변경이 가능하게 해주는 기능이 있다.
• Routes컴포넌트 : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트를 랜더링 시켜주는 역할을 한다.
• Route컴포넌트 : 규칙을 설정할 수 있는 컴포넌트이다. 속성으로는 path와 element을 가지고 있다. path는 경로를 설정하는 속성이고, element는 설정한 경로로 이동했을 때 어떤 컴포넌트를 보여줄지 결정하는 속성이다.

  <Route path = "주소규칙" element = {보여주고싶은 컴포넌트 /} />>

const Router = () => {
  <BrowserRouter>
    <Routes>
      <Route path='/' element={<Login />} />;
      <Route path='/main' element={<Main />} />;
    </Routes>
  </BrowserRouter>;
};

export default Router;

🥸 경로에 상관없이 모든 화면에서 표시되어야 하는 Router

header와 footer같은 경우는 페이지 변환과는 상관없이 계속 화면에 표시되어야 한다. 그럴 경우에는 Routes컴포넌트 밖에 입력해준다.

const Router = () => {
  <BrowserRouter>
    ⭐️<Route path='/Nav' element={<Nav />}></Route>
    <Routes>
      <Route path='/' element={<Login />} />;
      <Route path='/main' element={<Main />} />;
    </Routes>
    ⭐️<Route path='/Footer' element={<Footer />}></Route>
  </BrowserRouter>;
};

export default Router;

그럼 결과적으로 Nav와 Footer컴포넌트는 어떤 경로가 오더라도 항상 화면에 보여지게 된다.

✅ Route 이동하기

✍️ Link 컴포넌트

리액트에서는 <a href="..."></a>대신 Link컴포넌트를 사용한다.
이유는 a태그는 주소를 이동시키면서 아예 새로운 페이지를 가져오는데 그렇게되면 리액트 앱이 지니고 있는 상태들이 초기화되고 랜더링 된 컴포넌트들도 사라지게되어 새로 랜더링 하게 되기때문이다.
Link컴포넌트는 브라우저의 주소만 바꿀뿐 페이지를 새로 불러오지는 않는다. 또 실제 화면에서 바뀌어야하는 부분만 새로 랜더링 되기때문에 a태그를 사용하는 것보다 효율적이다.
a태그는 외부사이트로 이동할 때 주로 사용한다.

<Link to = "/Login"> 소개 </Link>

✍️ useNavigate hook

Link컴포넌트는 특정 주소로 이동하는 태그이지만 useNavigate는 특정 행동을 했을 때 특정 주소로 이동시켜주는 hook이다.
로그인 버튼 클릭시에 백엔드 api로 데이트럴 전송하는 작업 후 페이지를 이동하거나 인증/인가가 필요한 경우 그리고 작업 이후 응답 메세지에 따른 분기처리를 해야 하는 상황일 때 useNavigate를 사용하는게 좋다.

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. useNavigate를 import 해준다.
2. useNavigate함수를 실행하고, 해당 함수가 반환한 결과를 navigate라는 변수에 할당한다. 여기서의 반환값은 페이지를 이동하는 함수이기 때문에 navigate의 변수는 페이지를 이동하는 함수가 된다.
3. 클릭 이벤트 발생시 호출할 함수를 만들어준다. navigate의 인자로는 경로를 넣어준다.
4. onClick이벤트를 생성하고 실행될 함수를 넣어준다.