React - Router 시작하기

Moolbum·2021년 11월 18일

React link router spa useNavigate

React

목록 보기

2/23

SPA (single page application)

우선 SPA 라는 개념을 알아야한다!
SPA는 single page application 는 하나의 페이지로 구성된 애플리케이션입니다.

이전 웹페이지 같은 경우 페이지의 개수마다 HTML 파일이 존재했지만
SPA로 작업된 웹페이지는 단 한 개의 HTML로 구성되어있습니다!😎

리액트에서 구성된 HTML은 오직 한 개의 파일입니다.
한 개의 웹페이지를 여러 페이지를 보여주는 방법이 Routing 입니다.

Routing 😎

라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것입니다.
리액트에서는 기본적으로 제공해주지 않는 시스템으로 리액트가 프레임워크가 아닌 라이브러리인 이유입니다.

react-router 는 리액트 Third-Party 라이브러리 중 가장 많이 사용됩니다!

Router-install

npm install react-router-dom --save

Router 컴포넌트

Router.js 파일을 새로 생성 후 라우터 할 주소를 적고
최상단에 라우터환경을 import해준다.
import { BrowserRouter, Routes, Route } from "react-router-dom";

index.js 에서 Router.js를 최종적으로 ReactDOM에 렌더링 해주면 된다.
ReactDOM.render(<Router />, document.getElementById('root'));

Route 이동하기 ➡️

Link

최상단 라우터 돔 환경에 Link 를 import해줍니다.

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

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

export default Login;

<a> 태그와 마찬가지로 <Link> 컴포넌트도 지정한 경로로 바로 이동시켜주는 기능을 합니다. Link태그는 JSX에서 a태그로 변환됩니다!.
<a> : 외부 사이트로 이동 할 시 사용
<Link> : 프로젝트 내부에서 이동 할 시 사용

useNavigate

최상단 라우터 돔 환경에 useNavigate 를 import해줍니다.

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

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

  const goToMain = () => {
    navigate("/main");
  };
  
  return (
    <div>
      <button className="loginBtn" onClick={goToMain}>
        로그인
      </button>
    </div>
  );
}
export default Login;