[인프런] 2. 리액트로 라우팅하기

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어 강의 - 대시보드 | 인프런 (inflearn.com)

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어 | 제

 

 

1. 기본 페이지 라우팅 하기 

 

- 앱은 세 가지 페이지를 가짐

 

1) 홈페이지 : 회원의 일기 목록 정보가 나타남

2) Signup 페이지 : 회원가입 폼이 존재함

3) 로그인 페이지 : 로그인 폼이 존재함 

 

라우터 

- 사용자가 요청한 URL에 알맞은 페이지를 보여주는 역할을 함

- 리액트 라우터는 컴포넌트 기반의 라우팅을 설정하도록 도와줌 

 

 

1) src 폴더 안에 pages 폴더를 만들고 각각 우리가 만들 페이지의 폴더(home, signup, login)을 생성함 

 

 

2) 각각의 폴더에 컴포넌트 파일과 module.css 파일을 생성한다. CSS를 JS 파일에 모듈로 불러오기 위해서는 파일 이름 뒤에 module.css를 붙여야 한다. 아래와 같은 코드를 컴포넌트 별로 이름을 바꿔 사용 한다. 

 

import styles from './Home.module.css'

export default function Home() {
    return (
        <div>
            HOME
        </div>
    )
}

 

 

3) 라우터를 사용하기 위해 react-router-dom을 설치한다. 

 

npm install react-router-dom

 

 

4) App.js 수정 

 

src/App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Home from './pages/home/Home'
import Login from './pages/login/Login'
import Signup from './pages/signup/Signup'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/signup" element={<Signup />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App

 

 

BrowserRouter 컴포넌트 

- UI와 URL을 연결한다. 

- 마치 SSR과 같이 URL을 사용할 수 있게 한다. 

 

Route 컴포넌트 

- 현재 URL과 매칭된 UI를 렌더링 하는 역할을 함

 

Routes 컴포넌트 

- URL이 변경되면 <Routes>는 모든 자식 <Route>를 살펴보고 가장 알맞은 것을 매칭한다.