React-Router

1. react-router-dom 설치

 

react-router-dom은 react에서 라우팅을 위해 가장 많이 사용되는 라이브러리

 

npm install react-router-dom

 

 

2. Router 컴포넌트 구현하기

아래의 코드를 살펴보자

CRA를 통해 프로젝트를 만들고 npm start를 터미널에 입력하면, 최초 화면에서 App 컴포넌트의 내용을 볼 수 있다.

하지만 지금은 아무리 url을 변경해도 화면의 변화가 일어나지 않는다.

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 

 

Router 컴포넌트를 만들어주는 이유는

화면의 변화와 관련 기능을 구현하고 관리하기 위해서 Router 컴포넌트를 만들어줘야 한다

아래의 코드를 통해 Router 컴포넌트를 구현해보자

 

// 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;

 

 

 

3. Router 이동하기

3-1. Link 컴포넌트 사용하기

react-router-dom에서 제공하는 컴포넌트 중 Link 컴포넌트를 이용해 Routing 기능을 구현할 수 있다

Router에서 여러 컴포넌트를 import해서 사용했던 것과 마찬가지로, 

react-router-dom으로부터 Link 컴포넌트를 import해서 JSX 내부의 원하는 곳에 사용할 수 있다

Link 컴포넌트를 사용해보자

// Login.js

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

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

export default Login;

 

3-2. useNavigate hook 컴포넌트 사용하기

React-router-dom에는 Link 컴포넌트 외에도 라우팅을 구현할 수 있게 해주는 hook이 있다.

react-router-dom에서 제공하는 useNavigate hook을 사용해보자

 

// Login.js

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

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

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

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

export default Login;

 

 

 

3-3. Link,useNavigate hook 비교

1) Link 컴포넌트

• 클릭 시 바로 페이지를 이동하기 때문에, 조건 없이 페이지를 이동할 때 적합
• Nav Bar의 메뉴 혹은 Aside Menu 등 바로 페이지를 이동하는 경우 사용    

2) useNavigate hook

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