[React] React-Router-DOM

01. React-Router- DOM

✔︎ React Router DOM: 페이지 이동을 구현할 수 있게 해주는 패키지

🔍 패키지 설치 방법

$ yarn add react-router-dom 

🔍 사용방법 순서

1. 페이지 컴포넌트 생성

• Home, About, Contact, Works

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

• 브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분. URL 1개당 페이지 컴포넌트를 매칭해준다. 이 한개의 URL을 Route 라고 힌디.

🔍 설정 파일 코드 구조
<BrowserRouter> 안에 <Routes> 안에 <Route>

//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={<보여주고자 하는 컴포넌트/>} />
* path="/" 는 아무 경로가 없다는 뜻
*/}
    
        <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.js를 다른 곳도 아닌 App 컴포넌트에 넣어주는 이유는 우리가 만든 프로젝트에서 가장 최상위에 존재하는 컴포넌트가 App.js 이기 때문!

  ⭐️ import 시 유의사항 ⭐️
  App.js로 Router.js를 넣어줄 때 자동 import시, react-router-dom주소가 아닌 우리가 만들어놓은 주소를 import 해야한다!!

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

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

export default App;

4. 페이지 이동 테스트

• 기존 호스팅 주소 / path (컴포넌트 이름)

---

02. 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;

2. useLocation
   현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻고 이 정보를 바탕으로 조건부 렌더링에 사용하는 등 다양하게 활용 가능.

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

🔍 꼭 알아둬야 할 API Link
Link: html 태그중에 a 태그의 기능을 대체하는 API.

---

03. Children

// src/shared/Layout.js

import React from 'react';

const HeaderStyles = {
  width: '100%',
  background: 'black',
  height: '50px',
  display: 'flex',
  alignItems: 'center',
  paddingLeft: '20px',
  color: 'white',
  fontWeight: '600',
};
const FooterStyles = {
  width: '100%',
  height: '50px',
  display: 'flex',
  background: 'black',
  color: 'white',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '12px',
};

const layoutStyles = {
  display: 'flex',
	flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  minHeight: '90vh',
}

function Header() {
  return (
    <div style={{ ...HeaderStyles }}>
      <span>Sparta Coding Club - Let's learn React</span>
    </div>
  );
}

function Footer() {
  return (
    <div style={{ ...FooterStyles }}>
      <span>copyright @SCC</span>
    </div>
  );
}


function Layout({ children }) {
  return (
    <div>
      <Header />
      <div style={{...layoutStyles}}>
        {children}
      </div>
      <Footer />
    </div>
  );
}

export default Layout;

여기서 Layout이 src/shared/Router.js안에 있는 Router에 children 이 props로 들어가게 되면서 공통 스타일을 적용 받게 한다