[TIL #26] 231117_React Router Dom과 Hooks

오늘 한 일

---

• [개인Project] 팬레터함 만들기
  • style-componetns 사용하여 기본 UI 디자인
  • props-drilling을 통한 구현
• 오늘의 알고리즘 풀이
  
  

학습 내용

---

React Router Dom

1. React Router Dom이란?

React Router Dom을 사용하여 여러 페이지를 가진 웹을 만들 수 있다.
실제로 페이지 이동을 하는 것이 아닌 해당 컴포넌트만 바꿔주는 것이다.

Router
서로 다른 네트워크 사이에서 통신 경로를 지정해주고, 데이터가 전송되도록 하는 장치

2. react-router-dom 설치하기

yarn add react-router-dom 

3. react-router-dom 사용하기

(1) 페이지 컴포넌트 작성 (기존 단일 페이지 → 다중 페이지)

(2) Router.js 파일 생성

Router를 구성하는 설정 코드를 작성한다.
경로가 “/”만 올 때 최상위 페이지인 Home 페이지로 이동한다.
<Route path="/" element={<Home />} />

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* 각각의 페이지 경로 */}
        <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.jsx에 import

import "./App.css";
import Router from "./shared/Router";

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

export default App;

4. react-router-dom Hooks

(1) useNavigate
어떤 버튼을 눌러서 다른 페이지로 이동하고자 할 때 사용한다.

• Home.jsx
  • useNavigate(): navigate 생성
  • navigate(”보내고자 하는 url”)

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

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

  return (
    <div>
      Home
      <br />
      <button
        onClick={() => {
          navigate("/Works");
        }}
      >
        이동
      </button>
    </div>
  );
}

export default Home;

(2) useLocation
현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다.
이 정보를 이용하여 페이지 안에서 조건부 렌더링 등 여러가지 용도로 활용 가능하다.

• Works.jsx

  const location = useLocation();
  console.log(location);

• location에서 얻을 수 있는 정보
  

(3) Link to=”경로”
html의 a 태그를 대체하는 API이다.

Link to를 사용하는 이유
a태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침되고, 모든 컴포넌트가 다시 렌더링이 되기 때문에 리덕스나 useState를 통해 메모리상 구축해둔 모든 상태값이 초기화된다.

(4) query

(5) useParams (동적라우팅)
Parameter 값을 URL을 통해 넘겨받은 페이지에서 사용할 수 있도록 해준다.

예를 들어 특정 제품 클릭 시 해당 제품의 세부 정보 페이지로 이동하고 싶다면 제품의 id값을 url로 넘겨 세부 페이지에서 id값에 해당하는 제품의 정보만 보여줄 수 있다.

5. children 용도

children props를 가지고 Layout(화면에 렌더링 없이 계속 보일 부분) 역할을 하는 컴포넌트로,
각각의 route를 감싸서 페이지 레이아웃을 만든다.

• src/shared/Layout.js

import React from 'react';

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>
  );
}

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',
}

export default Layout;

• 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';
import Layout from './Layout';

const Router = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="works" element={<Works />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default Router;

Dynamic Route, useParam

Dynamic Route란?

동적 라우팅이란, path에 유동적인 값을 넣어서 특정 페이지로 이동하도록 구현하는 것을 말한다. 예를 들어 works 페이지에 여러 개의 work가 있고, work마다 독립적인 상세 페이지가 필요할 때, 각각의 페이지를 생성해 주는 것은 비효율적이다.

→ 동적 라우팅을 사용하여 간결하게 동적으로 변하는 페이지를 처리할 수 있다.

useParams
Parameter 값을 URL을 통해 넘겨받은 페이지에서 사용할 수 있도록 해준다.

• data.js 컴포넌트 생성
  Works와 Work에서 모두 사용하기 때문에 따로 컴포넌트화하여 사용한다.

// src/shared/data.js

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

• Work.jsx 페이지 생성 → useParams() 사용
  Works의 하위 목록에 해당하는 페이지인 Work 컴포넌트를 생성한다.
  find 함수를 사용하여 클릭한 id값에 해당하는 내용 불러오기

// src/pages/Work.jsx

import React from 'react';
import { useParams } from 'react-router-dom';
import { data } from "../shared/data";

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

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

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

export default Work;

• Router.js에 동적 루트 추가
  :id를 사용하여 동적인 값을 받는다. works/1, works/2 … works/100 모두 <work /> 페이지로 이동한다. :id는 useParams 훅에서 조회할 수 있는 값이 된다.

        <Route path="works/:id" element={<Work />} />

• Works.jsx에서 map함수 사용하여 뿌려주기

import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { data } from "../shared/data";

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;

오늘의 회고

---

새로운 개념이 나올 때마다 머리는 아프지만, 한편으로는 재밌다. 개인과제를 시작했는데, 그래도 과제 접근 순서를 알려주셔서 순서대로 차근차근 해보고 있다. 나만 이렇게 오래 걸리는걸까? ㅠㅠ

내일 할 일

---

• [개인Project] 팬레터함 만들기
  • props-drilling 사용하여 구현
  • 전역 context API 사용하여 리팩터링