react-router-dom

1. VScode에서 yarn add react-router-dom 패키지 설치

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

3. App.js에 import 적용

<Router.js>

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from "../pages/Main";
import Contents from "../pages/Contents";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는,
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="contents" element={<Contents />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

<App.js>

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

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

export default App;

path는 우리가 사용하고 싶은 주소, element는 우리가 이동시키고 싶은 컴포넌트를 넣어주자.

다른 컴포넌트가 아닌 App.js에 직접 import를 해주는 이유는 App.js가 최상위 컴포넌트 이기 때문이다.

그렇기에 우리는 App.js => Router.js 거치도록 코드를 구현해야 한다.

위 코드를 실행시켜보면 Main이 정상적으로 나오는 것을 볼 수 있다.

그런데 페이지를 이동하려면 위에 주소에 컴포넌트 이름을 입력해야 이동이 가능하다.

버튼을 클릭해서 쉽게 이동할 수 있도록 useNavigate를 사용해보자.

 

• useNavigate란?
  useNavigate는 페이지를 이동할 때 사용된다.
  Link를 써도 페이지 이동을 시킬 수 있지만 단순하게 이동만 시켜야 하는 경우 Link를 사용하면 좋고,
  useNavigate를 사용하면 특정 이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요한 경우 useNavigate를 사용한다.

<Main.jsx>

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

const Main = () => {
  const navigate = useNavigate();
  return (
    <button
      onClick={() => {
        navigate("/Contents");
      }}
    >
      contents로 이동하자
    </button>
  );
};

export default Main;

Mian.jsx에 useNavigate를 추가해주고 button에 onClick에 이동하고 하는 컴포넌트를 적어주자.

여기서 추가로 shared에 Layout.js를 만들어 주고 props.children을 사용해서 Layout을 만들어보자.

<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>제목입니다.</span>
    </div>
  );
}

function Footer() {
  return (
    <div style={{ ...FooterStyles }}>
      <span>화이팅 합시다.</span>
    </div>
  );
}

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

export default Layout;

위에 코드를 작성해주고 Router.js에 <BrowserRouter> 밑에 <Layout>을 넣어주자.

컴포넌트를 이동해도 똑같이 Layout이 적용되는 것을 확인할 수 있다.

이 밖에도 여러가지 훅이 있다니 공부를 해봐야겠다.