React숙련 React Router Dom

1. React Router Dom - 소개, hooks

1. react-router-dom이란?

페이지를 구현할 수 있게 해주는 패키지

2. react-router-dom 설치하기

vscode 터미널에서 아래코드 입력!

yarn add react-router-dom 

3. react-router-dom 사용하기

사용방법 순서
1. 페이지 컴포넌트 생성
2. Router.js생성 및 router 설정 코드 작성
3. App.js에 import 및 적용

1. 페이지 컴포넌트 생성
   
   =>src 폴더에 pages라는 폴더를 만들고 그 안에 4개의 컴포넌트를 만들어보았다.

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

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

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import
import { BrowserRouter, Route, Routes } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성
//BrowserRouter를 Router로 감싸는 이유는, 
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줌
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

• 만든 4개의 페이지 컴포넌트마다 Route를 설정한다.

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에 import 및 적용

• 생성한 Router 컴포넌트를 App.js에 넣어준다.

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

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

export default App;

=> 프로젝트에서 가장 최상위에 존재하는 컴포넌트인 App.js에 넣어주는 것!

4. react-router-dom Hooks
1. useNavigate

• 어떤 버튼을 누르면 페이지로 이동하거나 또는 어떤 컴포넌트를 눌렀을 때 페이지를 이동하게 만듦

// 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;

=> navigate를 생성하고, navigate('보내고자하는 url')을 통해 페이지를 이동시킬 수 있음

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

• 훅은 아니지만, 꼭 알아야 할 API
• Link는 html 태그 중 a태그의 기능을 대체하는 API

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;

=> 페이지를 이동시키고자 할 때, useNavigate 또는 Link를 사용할 수 있음.

2. React Router Dom - Dynamic Route, useParam

1. Dynamic Route

• 동적 라우팅이라고도 말하는데 pate에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법
• react-router-dom에서 지원하는 Dynamic Routes 기능을 이용해 간결하게 동적으로 변하는 페이지 처리할 수 있음
• Dynamic Route 설정하기
  Router.js로 이동하여 Dynamic Routes를 설정해보기
  Works페이지에 여러개의 Work가 있고, 그것을 클릭했을 때 각각의 상세페이지로 이동하도록!

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>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
				{/* 아래 코드를 추가. 👇 */}
        <Route path="works/:id" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

=> Router.js에 코드추가
=> path에 works/:id라고 path가 들어가는데, :id라는 것이 동적인 값을 받겠다는 의미!
=> :id는 useParams 훅에서 조회할 수 있는 값이 됨

2. Dynamic Routes와 useParam

• useParam을 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id값을 조회할 수 있음.
• useParams은 path에 있는 id값을 조회할 수 있게 해주는 훅

// src/pages/Works.js

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

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Works() {
  return (
    <div>
      {data.map((work) => {
        return (
          <div key={work.id}>
            <div>할일: {work.id}</div>
            <Link to={`/works/${work.id}`}>
              <span style={{ cursor: 'pointer' }}>➡️ Go to: {work.todo}</span>
            </Link>
          </div>
        );
      })}
    </div>
  );
}

export default Works;

work 컴포넌트 생성!

// src/pages/Work.js

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

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Work() {
  const param = useParams();

  const work = data.find((work) => work.id === parseInt(param.id));

  return <div>{work.todo}</div>;
}

export default Work;