React Router Dom , hooks

 

react-router-dom이란?

 

- SPA인 리액트에서 여러 페이지를 구현할 수 있게 해주는 패키지이다

 

(1) 패키지 설치하기

yarn add react-router-dom

 

(2) 사용 순서

1. 페이지 컴포넌트 생성
2. Router.js 생성 및 router 설정 코드 작성
3. App.js에 import 및 적용
4. 페이지 이동 테스트

 1. 페이지 컴포넌트 생성

 

 2. Router.js 생성 및 route 설정 코드 작성

 

브라우저에 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게 만드는 부분.

URL 1개당 페이지 컴포넌트를 매칭해준다. 이 한개의 URL을 Route 라고 한다.

그리고 Route들을 설정하는 코드는 Router.js 라는 파일을 별도로 분리해서 많이 작성하곤 한다. 

src안에 shared 라는 폴더를 생성해주고, 그 안에 Router.js 파일을 생성해준다.

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* 
            Routes안에 이렇게 작성합니다. 
            Route에는 react-router-dom에서 지원하는 props들이 있습니다.

            path는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.
            element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.
         */}
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

 

 3. App.js에 Router.js import 해주기

 

이렇게 생성한 Router 컴포넌트를 아래 코드와 같이 App.js에 넣어준다.

import React from "react";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

 

Router.js를  App 컴포넌트에 넣어주는 이유는 우리가 만든 프로젝트에서 가장 최상위에 존재하는 컴포넌트가 App.js 이기 때문이다.

 

react-router-dom Hooks

 

 

(1) useNavigate

 

다른 페이지로 보내고자 할 때 사용할 수 있다.

버튼의 클릭 이벤트 핸들러에 아래와 같이 코드를 작성하면 버튼을 클릭했을 때 보내고자 하는 path로 페이지를 이동시킬 수 있다.

꼭 버튼이 아니더라도, 컴포넌트의 클릭 이벤트 핸들러를 통해서 활용할 수 있다.

사용방법은 아래 코드와 같다.

 

// src/pages/home.js
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => {
        navigate("/works");
      }}
    >
      works로 이동
    </button>
  );
};

export default Home;

 

(2) useLocation

 

react-router-dom을 사용하면, 우리는 우리가 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다.

이 정보들을 이용해서 페이지 안에서 조건부 렌더링에 사용하는 등, 여러가지 용도로 활용할 수 있다.

 

// src/pages/works.js
import { useLocation } from "react-router-dom";

const Works = () => {
  const location = useLocation();
  console.log("location :>> ", location);
  return (
    <div>
      <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
    </div>
  );
};

export default Works;

 

 

(3) Link

 

**Link 는 훅이 아니지만, 꼭 알아야 할 API.**

 

Link 는 html 태그중에 a 태그의 기능을 대체하는 API 이다. 만약 JSX에서 a 태그를 사용해야 한다면, 반드시 Link 를 사용해서 구현해야 한다. 왜냐하면 a 태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침(refresh)되기 때문이다. 브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링되야 하고, 또한 우리가 리덕스나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화된다. 이것은 곧 성능에 악역향을 줄 수 있고, 불필요한 움직임이다.

 

import { Link, useLocation } from 'react-router-dom';

const Works = () => {
  const location = useLocation();
  console.log('location :>> ', location);
  return (
    <div>
      <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
      <Link to="/contact">contact 페이지로 이동하기</Link>
    </div>
  );
};

export default Works;