TIL29-04 React Router Dom - 소개, hooks, children

1. react-router-dom이란?

• 페이지를 구현할 수 있게 해주는 패키지
  네이버나 또는 다른 웹사이트를 우리가 사용할 때 보통 이 페이지에도 갔다가 저 페이지에도 갔다가 여러 페이지로 오가며 이동할 수 있는데, 우리는 항상 한 페이지에 머물러 있었다. react-router-dom을 사용하면 여러 페이지를 가진 웹을 만들 수 있게 됩니다!

2. react-router-dom 설치하기

yarn add react-router-dom 

3. react-router-dom 사용하기

• 아래 순서대로 코드를 작성하여, react-router-dom을 사용한다.

1. 페이지 컴포넌트 생성
2. Router.js 생성 및 router 설정 코드 작성

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

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

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

export default App;

4. 페이지 이동 테스트

4. react-router-dom Hooks

useNavigate

• 버튼의 클릭 이벤트 핸들러에 아래와 같이 코드를 작성하면 버튼을 클릭했을 때 우리가 보내고자 하는 path로 페이지를 이동시킬 수 있다. 꼭 버튼이 아니더라도, 컴포넌트의 클릭 이벤트 핸들러를 통해서 활용할 수 있다.

useLocation

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

Link

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

5. children 용도

• 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다.
• 여기서 말하는 범용적인 “박스” 역할을 하는 컴포넌트란 크게 봤을 때 Layout 역할을 하는 컴포넌트라고 생각해볼 수 있습다. children props를 찾아보시 composition이라는 말을 많이 보시게 된다. composition은 합성이라는 의미가 있다고 한다.
• children props를 가지고 페이지 레이아웃을 만들며 개별적으로 존재하는 Header, Footer, Page를 합성하여 개발자가 의도하는 UI를 만들어주는 Layout 컴포넌트를 만들 수 있다.