[React] React Router Dom(1) : 페이지 이동 & path 지정, Hooks, Layout & children

 

 

💡리액트 라우터 돔을 활용해 보자

1. 페이지 컴포넌트 작성 ➡️ 다중 페이지(우리는 원래 단일 페이지)

2. Router.js 파일 생성, router 를 구성하는 설정 코드 작성

    ex) redux 할 때도 설정 파일을 만들어서 연결했다.

3. App.jsx import 하고(2번) 적용 : 연결(주입)

4. 페이지 이동 테스트

 

 

먼저 터미널에 npm add react-router-dom ~

1.  페이지 컴포넌트 작성

 

2. Router.js 파일 생성 & router 구성하는 설정 코드 작성

 

- BrowserRoutr, Route, Routes 셋을 import 해온다

- 각 페이지들도 import

- Route 에 페이지 연결

  path="/" 이 부분은 url 뒤 들어가는 부분, 이동할 주소!

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 />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

3. App.jsx import 하고(2번) 적용 : 연결(주입)
4. 페이지 이동 테스트

App.jsx

import "./App.css";
import React from "react";
import Router from "./shared/Router"; {/*import 시 경로 잘못 부르지 않게 주의*/}

{/*App.jsx 로 보자.*/}
function RouterApp() {
  return <Router />; {/*아까 export 한 Router 가져온다.*/}
}

export default RouterApp;

그럼 Home 으로 이동하게 되는데,

url 뒤 값을 빈 값으로 설정해 둔 Home 으로 이동한 것

 

🌳 react-router-dom 의 Hooks

리액트 라우터 돔에서 잘 쓰이는 훅을 알아보자.

 

🍋 useNavigate : 다른 페이지로 보내고자 할 때 사용

위 예시에선 직접 브라우저에 path 를 입력해서 페이지를 바꿨지만,

어떤 버튼(or component)을 눌렀을 때 페이지를 이동하도록 만든다.

 

home ➡️ about ➡️ home 으로 이동해 보자 ~

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

function Home() {
  const navigate = useNavigate(); {/*useNavigate import*/}

  return (
    <div>
      <h1>Home</h1>
      <button
        onClick={() => {
          navigate("/about"); {/*클릭 시 이동할 주소 입력*/}
        }}
      >
        About 으로 가자!
      </button>
    </div>
  );
}

export default Home;

 

About.jsx 도 똑같이 연결해 줬다!

 

🍋 useLocation : 리액트 라우터 돔을 사용하면, 현재 위치해 있는 페이지의 여러 정보를 얻을 수 있다.

이 정보들을 이용해 페이지 안에 조건부 렌더링에 사용하는 등, 여러가지로 활용할 수 있다.

 

function About() {
  const navigate = useNavigate();
  const location = useLocation();

  console.log(location);
 ...

 

🍋 Link : 훅은 아니지만, 꼭 알아야 할 API

Link 는 html 태그 중 a 태그를 대체한다.

JSX 에서 a 태그를 써야한다면 반드시 Link 로 구현해야 한다.

 

a 태그를 사용하면 페이지 이동 시 브라우저가 새로고침(refresh) 되기 때문!

브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링 되고,

우리가 redux, useState 로 메모리상에 구축해 놓은 모든 상태값이 초기화된다.

 

❗️ 꼭 앞에 / 를 붙여야 한다. 

http://localhost:3000/contact 로 이동하겠단 의미인데

만약 내가 /login 에 있고, / 를 붙이지 않은 'contact' 로 이동하면

/login/contact 이런 식으로 이동하게 된다.

그러니 절대경로인 / 꼭 붙여주기..

<Link to="/contact">Contact 로 가자!</Link> {/*import 해와야 한다*/}

 

About.jsx 에서 버튼 아래 코드를 추가했다.

 

🍋 Children : 닫는 태그 사이에 있는 모든 엘리먼트

function Layout({ children }) {
  return (
    <div>
      <Header />
      <div>{children}</div>
      <Footer />
    </div>
  );
}

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;

Header, Footer 는 고정되어 있고,

들어오는 children 에 따라 가운데 내용이 바뀌게 된다.