[리액트] Router 기초

SPA와 Routing

웹사이트에 html파일이 하나면 SPA(Single Page Application), 2개 이상이면 MPA(Multi Page Application) 라고한다.

html파일이 하나기 때문에 다른 UI를 렌더링 하고 싶을 때는 라우팅 기능을 사용해야 한다.
하지만 리액트에는 라우팅 기능이 없다.

그래서 리액트를 라우팅 해줄 react-router-dom라는 라이브러리를 다운 받아야 한다.

Router 컴포넌트

1. react-router-dom를 다운 받는다.
2. index.js에서 render메소드의 첫번째 인자에 컴포넌트를 넣으면 해당 컴포넌트가 랜더링 된다.
   1. 컴포넌트가 여러개면 인자안을 원하는 컴포넌트로 바꿔줘야 해서 비효율 적이다.
3. Router.js파일에 react-router-dom에서 BrouserRouter, Routes, Route를 import한 뒤 기본구조를 만든다.
4. Route에 컴포넌트와 경로를 지정한다.
   1. path에 컴포넌트 경로를 할당한다. (경로를 / 로 하면 Index페이지가 된다.)
   2. element에 path를 토대로 렌더링 될 컴포넌트를 할당한다.
5. index.js 파일의 render메소드 인자를 root.render(<Router />); 로 바꾸면 화면에 잘 렌더링 된다.
   
   

라우터 컴포넌트를 생성하기 전에는 index.js 내부 render메소드의 인자를 바꿔 해당 컴포넌트를 보여줬다.
하지만 라우터 컴포넌트를 생성하면 render메소드 인자를 일일이 바꾸는 것이 아니라 url을 이용해서 경로에 맞는 컴포넌트를 보여준다. 따라서 컴포넌트 import도 index.js가 아니라 Router.js에서 진행하면 된다.

import React from 'react';
import { BrouserRouter, Routes, Route } from "react-router-dom"
const Router = () => {
	return (
		<BrouserRouter>
			<Routes>
				<Route path='/' element={<Login />} />
				<Route path='/main' element={<Main />} />
			</Routes>
		<BrouserRouter>
	);
};
export default Router;

경로 이동

특정 동작으로 경로 이동을 하려면 Link Component, useNavigate hook 2가지 방법이 있다.

Link Component

import React from 'react';
import { Link } from 'react-router-dom';
const LoginBtn = () => {
  return (
	<button>
		<Link to="/Main">로그인</Link>;
	</button>
	);
};
export default LoginBtn;

부모요소를 동작하면 자식요소인 Link의 to 속성값인 경로로 조건없이 이동한다.

그럼 a태그와는 어떤 차이점이 있을까?

• link component는 프로젝트 안에서 라우터가 지정한 경로로 이동한다.
  • 바뀐 부분만 리로드한다.
• a태그는 프로젝트 외부에 지정한 경로로 이동한다.
  • a태그는 이동할 때 마다 html파일을 새로 요청해서 전체가 리로드 된다.
  • 내부에서도 경로이동이 가능하나 위의 내용 때문에 권장하지 않는다.

useNavigate hook

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

const LoginBtn= () => {
	const navigate = useNavigate();
  return (
		<button 
			onClick={()=>{
				navigate("/main");
			}}>
		로그인
		</button>
	);
};

export default LoginBtn;

버튼을 클릭했을 때 조건에 부합하면 navigate의 인자인 경로로 이동한다.
hook은 규칙상 컴포넌트 최상단에서만 호출해야 한다. 그래서 변수에 할당해서 컴포넌트 내부에 넣어준다.

마치며

리액트를 잠시나마 해보면서 render메소드 인자로 계속 보고싶은 컴포넌트 이름을 넣어줘야 하나 라는 의문이 들었는데 router라는 걸 알게되어서 그 의문이 풀렸다.