3월 4일 여정 55일차이다.

오늘의 Today I Learned

react-router-dom이라는 것은 무엇일까?
블로그 사이트 같은 곳을 가면 이 페이지에서 저 페이지로 이동 할 수 있다.

이렇게 여러페이지로 오가는 것을 도와주는 것이 바로 react-router-dom이다. 이 패키지를 사용하면 여러페이지를 가진 웹을 만들 수 있다.

리엑트 라우터 덤에서 중요한 것은 URL을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게끔 만드는것이 중요하다. 보통 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;

이동하고 싶은 컴포넌트 파일을 import하고 react-router-dom에서 API들을 import한다. 마지막으로BrowserRouter라는 것으로 Router로 감싸게 된다. SPA의 장점은 브라우저가 깜박이지 않고 다른 페이지로 이동할 수 있게 만들어준다는 것이다.

그럼 react-router-dom에서 제공하는 훅을 살펴보자.

1. useNavigate
이 훅은 어떤 버튼을 눌렀을 때, 다른 페이지로 이동하게 도와주는 훅이다.

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

<button
      onClick={() => {
        navigate("/works");
      }}
    >

위와 같이 사용하게 된다.

2. useLocation

react-router-dom을 사용하면, 우리는 우리가 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다. 이 정보들을 이용해서 페이지 안에서 조건부 렌더링에 사용하는 등, 여러가지 용도로 활용할 수 있다.

import { useLocation } from "react-router-dom";

  const location = useLocation();
  console.log("location :>> ", location);

Link

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;

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

마지막으로

많이 사용해왔지만, 이렇게 깊게 공부하니 색달라 보인다.