React Router Hands-on

1. 개발 환경 구축하기

• 터미널을 열고 다음 명령어를 실행하여 simpleroute 디렉토리에 React 프로젝트를 생성

npx create-react-app simpleroute
cd simpleroute
npm start

• React Router DOM을 설치

npm install react-router-dom@5.3.0
# 이번 스프린트에서는 5.3.0 버전을 사용합니다

• 라이브러리 설치 확인? package.json으로 들어감.

package.json 의 dependencies 에 react-router-dom 이라는 라이브러리가 등록된 것 확인

이제 App.js 파일로 가서 최상단에 react-router 라이브러리가 제공하는 컴포넌트들을 사용하기 위한 세팅을 진행

import React from 'react'
import { BrowserRouter, Route, Switch, Link } from "react-router-dom"; // 이 구문을 넣어주세요

2. 라우트 준비하기

페이지를 표시하는 컴포넌트 Home, MyPage, Dashboard를 만들어봅시다. App.js 하단에 아래와 같이 작성

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

3. 메뉴 만들기

페이지를 표시하는 컴포넌트를 만들었고, 각 컴포넌트로 이동할 메뉴를 제작.

메뉴 제작을 위해

태그와
• 태그를 이용.

  기존에 App() 안의 내용은 삭제!

    function App () {
    return (
        <div>
          <nav>
            <ul>
              <li>
                <Home />
              </li>
              <li>
               <MyPage />
              </li>
              <li>
                <Dashboard />
              </li>
            </ul>
          </nav>
        </div>
    )
  }
  
  export default App;

  <nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.
  <nav> 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다.