[React] - Router

Router.js 에 경로 지정, 지정된 경로대로 컴포넌트를 화면에 그리는 방법
현재 사용하고 작업 하고있는 에디터(VS 코드 , 등..) 에서 터미널을 오픈 한 다음

npm install react-router-dom 을 입력 해주면 설치 할 수 있다. (react router 설치)

설치가 되었다면 src 폴더에 index.js 파일이 위치해 있는 같은곳에 Router.js 파일 하나를 만들어 준다.

Router.js 파일을 만들어야 하는 이유는 sign up 띄우거나 log in 을 띄워야한다면 index.js 에서 매번 랜더링 할 컴포넌트를 매번 수정해야 하고 컴포넌트 별로 경로 설정 또한 할 수 가 없다.

import React from “react”;
	import {  BrowserRouter, Routes, Route } from “react-router-dom”;
	import Login from "./pages/Login/Login";
	import Main from "./pages/Main/Main";

const Router = () => {
		return (
			<BrowserRouter>
			<Routes>
			<Route path=“Login” element={<Login/>} /> 
					/* path= url , element= 내가 만든 페이지 */
			<Route path =“Main element={<Main/} />
			<Routes>
			</BrowserRouter>
		);
	};

export default Router;   

Router.js 파일은 다른 파일에서 import 하기 때문에 export 가 필요 하다.
만들어 놓은 컴포넌트에 대해 간략하게 설명하면 BrowserRouter 컴포넌트는 경로 변경에 대해 여러 편의기능을 제공해주는 컴포넌트인데 대표적으로 페이지가 새로고침 되지 않아도 주소 변경을 가능하게 하는 기능이 있다.
Routes 컴포넌트는 여러 Route 컴포넌트를 감싸는 역할을 한다.
여러 Route 를 감싸서 Route 에 지정된 경로와 브라우저 주소창에 입력한 URL 경로가 딱 맞는 컴포넌트가 있다면 그 컴포넌트를 브라우저에 그리는 역할을 한다.
Route 컴포넌트는 브라우저에 랜더링 할 컴포넌트와 경로를 지정하는 역할을 한다.
Route 컴포넌트에 속성으로 path 와 element 를 부여한다.
path 에 브라우저에 렌더링 할 컴포넌트의 경로를 할당하고 element 에는 경로에 따라 랜더링 될 컴포넌트를 할당한다.

			<Route path=“/“ element = {<Login>}/>
			<Route path=“signup” element={<signup/>} /> 
			<Route path =“Main element={<Main/} />

이렇게 만들어진 Router.js 파일을 index.js 의 render 메서드 인자로 전달해주면 3가지 컴포넌트를 화면에 그릴 준비가 끝난 것이다.

index.js 파일로 이동해서 render 메서드에 export 한 Router 컴포넌트를 전달해 주고 실제로 화면에 잘 그려지는지 터미널에

"npm start" 를 입력해 본다

브라우저 주소창에 /signup 혹은 /main 등을 치면 해당 페이지로 이동 하게 된다. 로그인은 아무 슬래시도 써져 있지 않은데 로그인 화면이 나오는 것은 아무런 경로도 입력 하지 않으면 Route 가 컴포넌트의 path 속성중에 / 슬래시를 찾아 일치하는 element 의 컴포넌트를 그리기 때문이다.
그래서 포트 번호 3000번 뒤에 아무런 경로를 입력하지 않으면 Login 컴퍼넌트가 화면에 그려지는 이유 이다.