2022년 1월 6일 T.I.L

 

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. 메뉴 만들기

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

메뉴 제작을 위해 <ul> 태그와 <li> 태그를 이용.

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

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

export default App;

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