React - Router

1) Router

(1) Router

• 라우터는 html의 경로(path), 즉 url을 설정해주는 도구(즉, 한개의 페이지(SPA)안에서 다른 페이지로 이동할수 있도록 도와주는 매개체를 말한다.) Routing : 경로를 설정해주는 행위

  • Tip. SPA(Single Page Application)란?
    SPA는 웹 페이지가 한개인 Application을 말한다. 여기서 html은 페이지로, 1개의 웹페이지 안에서 모든 UI를 보여줄 수 있다. (특히, SPA는 한개 웹페이지만을 이용하기 때문에, A페이지에서 B페이지로 이동하기 위해선 url 기능을 담당하는 Router를 사용해야만 한다.)

(2) React에서 Router 패키지 설치하기

• 라우터는 다른 웹페이지로 이동할수 있도록 기능을 구현하는 도구를 말하는데 Router 컴포넌트를 구현하기 위해선 VS Code 터미널에 다음과 같이 복사해서 설치한다.

npm install react-router-dom

(2-1) Route 컴포넌트 구현하기

• Router 패키지를 설치한 이후에 App.js를 화면에 표시하기 위해선 Router 컴포넌트를 구현해줘야 한다. 예를 들어 로그인, 회원가입, 메인 화면으로 넘어가는 Router 기능을 구현하려면 다음과 같이 해야한다.(VS Code에 Node.js, React 설치가 완료된 하에 진행함)

예제 코드)

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

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

export default Router;

(2-2) import 해서 가져온 Route 컴포넌트 구현 방법
1. BrowserRouter 컴포넌트로 전체를 감싸준다.
2. BrowserRouter 컴포넌트의 자식 요소로 Routes 컴포넌트를 넣어준다.
3. Routes 컴포넌트의 자식 요소로 Route 컴포넌트를 넣어주고 Path 와 element 를 넣어서 실제로 웹페이지에 보여줄 경로(path)와 브라우저 요소(element)를정해준다.

(2-3) Router 태그의 역할
1. BrowserRouter 태그 : 주소변경에 대한 다양한 편의기능을 제공한다.(새로고침이 없어도 주소변경이 가능하게 함)
2. Routes 태그 : 규칙이 일치한 하나의 라우트 한개만 렌더링 하는 기능을 제공한다.
3. Route 태그 : 컴포넌트의 규칙을 설정하는 기능을 제공한다.

(2-4) Routing 구현 루트

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 속성에 이동할수 있도록 설정함.