React/ part.2 Routing과 Router

Routing과 Router 

리액트에서 중요한 개념중 하나가 바로 라우팅이다.

라우팅은 무엇인지, 라우터는 무엇인지에 대해 제대로 알고 리액트를 사용해야 기초적인 실수를 피할 수 있다.

해당 글에서는 라우팅이란 무엇인지 알아보고 라우팅과 관련된 중요한 개념들에 대해서도 함께 다루고 있다.

 

Routing, Router, react-router-dom, 

react-router-dom을 이용해 Routing을 하는 방법 2가지 

 

---

1. Routing (라우팅)이란?

간단히 말해 다른 경로(url 주소)에 따라 다른 화면(view)을 브라우저에 출력하는 것을 말한다.

리액트는 UI를 그리는 라이브러리라서 routing기능이 내장되어 있지 않다.

그래서 따로 Routing Library라우팅 라이브러리가 필요하다.

그게 바로 리액트 라우터(React-Router)이다.

 

리액트 라우터 React-Router

페이지마다 경로를 설정하고 각 경로마다 해당 페이지를 브라우저 화면에 출력해준다.

SPA이기 때문에 MAP와 다른 방식으로 라우팅해야한다.

 

 

2. SPA란?

 

SPA (Single Page Application)

HTML이 하나만 존재하는 웹 애플리케이션

하나의 HTML에서 다른 경로(URL)을 보여줘야 하기 때문에 라우팅 기능이 필요하다.

 

MTL(Multi Page Application)

HTML이 2개 이상으로 SPA와 상반되는 개념

 

 

 

3. React-Router-dom

리액트에서 라우팅을 위해 가장 많이 사용되는 라이브러리이다

Router.js로 프로젝트 내에 컴포넌트들에 대한 경로를 관리한다.

 

React-Router-dom설치

$ npm install react-router-dom

 

 

 

4. Router component

라우팅 기능을 구현하고 관리하기 위해 필요하다.

Router.js 파일 생성 및 위치 : src > index.js와 같은 위치에 생성한다.

 

 

Router 컴포넌트 구현하기

• BrowserRouter, Routes, Route 컴포넌트를 import

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<component />} />
      </ Routes>
    </ BrowserRouter>
  );
};

export default Router;

 

• BrowserRouter : 주소 변경에 대한 다양한 편의 기능을 제공
  • 대표적인 기능 : 페이지가 새로고침 되지 않아도 주소 변경이 가능하게 하는 기능

• Routes : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만 렌더링 시켜주는 역할
• Route : 규칙을 설정하는 컴포넌트

 

 

5. react-router-dom을 이용해 Routing을 하는 방법 2가지

 

1. Link 컴포넌트

프로젝트 내에서 이동할 때 사용한다.

조건에 상관없이 해당 경로로 바로 이동한다.

to 속성을 사용한다.

<Link to="/signup">회원가입으로 이동</Link>

 

<Link> component와 <a> 의 차이점

 

<Link>  : 프로젝트 내에서 이동할 때 사용

<a> : 프로젝트 외부로 이동할 때 사용

 

 

 

2. useNavigate hook 

useNavigate hook은 <Link>와 달리

조건에 따라 다른 경로로 이동하거나 결과가 달라질 때 사용한다.

 

navigate 변수를 선언하고 → useNavigate()함수 값을 반환하는 방식으로 사용한다.

이렇게 하는 이유는 Hook의 특징 때문인데,

 

Hook의 특징은

조건문, 반복문, 자바스크립트 함수 안에서 호출 안된다.

그래서 변수를 선언하고 변수를 함수안에 넣는 방식으로 호출한다.

또한 React 함수 컴포넌트에서 Hook을 호출할 때는

최상위(at the top level)에서만 호출해야한다.

 

(Hook 에 대해서는 props와 state 관련 글에서 더 자세히 설명하도록 하겠다.)

 

 

---

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!