React

React Router Dom

설치

1. 해당 프로젝트 디렉토리로 이동하여 라우터 관련 라이브러리를 설치

% cd router-tutorial
% npm install react-router-dom

2. 프로젝트에 라우터 적용
   라우터 적용은 App.js 에서 BrowserRouter 라는 컴포넌트를 사용하여 구현

사용법

Route: 특정 주소에 컴포넌트 연결하기

Route 컴포넌트를 사용하여 사용자가 요청하는 주소에 따라 다른 컴포넌트를 보여준다.
<Route path="주소규칙" component={보여주고싶은 컴포넌트}>

Link: 누르면 다른 주소로 이동시키기

Link 컴포넌트는 클릭하면 다른 주소로 이동시키는 컴포넌트이다.
React Router를 사용할 땐 일반 <a href="...">...</a> 태그를 사용하면 안 된다. 그 대신에 Link 컴포넌트를 사용해야 하는데, a 태그의 기본적인 속성은 페이지를 이동시키면서, 페이지를 아예 새로 불러오기 때문이다. 리액트 앱이 지닌 상태들도 초기화되고, 렌더링 된 컴포넌트도 모두 사라지고 새로 렌더링하게 된다. 만약 a 태그를 사용하려면 onClick 에 event.preventDefault()를 호출하고 따로 자바스크립트로 주소를 변환시켜주어야 한다. Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만 바꿀 뿐 페이지를 새로 불러오지는 않는다.

example

App.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Navigation from "./components/Navigation";
import Footer from "./components/Footer";
import Home from "./pages/Home";
import About from "./pages/About";
import Profile from "./pages/Profile";

function App() {
  return (
    <Router>
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profiles/:username" element={<Profile />} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

Navigation.js

import React from "react";
import { Link } from "react-router-dom";
import styles from "../styles/Navigation.module.css";

const Navigation = () => {
  return (
    <nav className={styles.navigation}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

Profile.js

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

const ProfileDate = {
  mingyeong: {
    id: 1,
    name: "hello kitty",
    decription: "헬로키티는 일본의 캐릭터 전문 기업인 산리오에서 캐릭터 상품용으로 만들어낸 캐릭터군, 혹은 주인공인 키티를 가리킨다.",
  },
  jaeyeon: {
    id: 2,
    name: "푸바오",
    decription: "현재 에버랜드에서 사육 중인 동물들 중 호랑이 남매들(태범, 무궁, 호랑이 오둥이)과 함께 가장 인기가 높은 동물이다. 이름의 뜻은 '행복을 주는 보물'이라는 뜻이다.",
  },
};

const Profile = () => {
  const navigate = useNavigate();
  const { username } = useParams();
  const profile = ProfileDate[username];

  return (
    <div>
      <h3>
        Who is {profile.name}({username})?
      </h3>
      <p>{profile.decription}</p>
      <div onClick={() => navigate(-1)}>뒤로가기</div>
    </div>
  );
};
export default Profile;

참고문서
React Router, https://react.vlpt.us/react-router/01-concepts.html

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.