5강 — 라우팅과 배포
2024 DTC
| → / Space | 다음으로 |
| ← | 이전으로 |
| ↓ / ↑ | 같은 주제 안에서 단계 이동 |
| O | 전체 슬라이드 한눈에 보기 |
| F | 전체화면 |
아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다
| 1강 | JSX, 컴포넌트, props |
| 2강 | state, 이벤트, 폼 |
| 3강 | useEffect, 데이터 가져오기 |
| 4강 | Context, 커스텀 훅 |
오늘은 여러 화면을 붙이고 세상에 내보냅니다
화면이 여러 개라면
주소마다 HTML 파일
이동할 때마다 새로고침HTML은 하나
JS가 화면을 갈아끼운다주소가 바뀌면
어떤 컴포넌트를 보여줄지 정하는 것
그것이 라우팅
| / | <Home /> |
| /about | <About /> |
| /todos/3 | <TodoDetail /> |
주소마다 다른 화면을 보여주려면
npm install react-router-dom
import {
BrowserRouter, Routes, Route
} from 'react-router-dom';
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
/ 에서는 Home
/about 에서는 About
import { Link } from 'react-router-dom';
<Link to="/about">소개</Link>
새로고침 없이 화면만 바뀐다
<a href="/about">소개</a>
여기서 Link 대신 a 태그를 쓰면?
<Route path="*" element={<NotFound />} />
주소에서 값을 꺼내려면
<Route
path="/todos/:id"
element={<TodoDetail />}
/>
/todos/3id = "3"/todos/7id = "7"
import { useParams } from 'react-router-dom';
function TodoDetail() {
const { id } = useParams();
return <h1>{id}번 할 일</h1>;
}
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
function handleSave() {
save();
navigate("/todos");
}
저장 후 목록으로 이동
path="/todos/:id" 로 자리를 만든다useParams() 로 꺼낸다. 항상 문자열useNavigate()내보낼 수 있는 파일로 만들려면
npm run build
dist/ 안의 파일이 전부다
npm run preview
인터넷에 올리려면
| Vercel | 깃허브 연결하면 자동. 가장 쉽다 |
| Netlify | dist 폴더를 끌어다 놓아도 된다 |
| GitHub Pages | 무료. 설정이 조금 필요하다 |
// vite.config.js
export default {
base: "/저장소이름/",
};
// 새로고침하면 404
https://내앱.com/about
배포한 뒤 /about 에서 새로고침하면?
npm run build → dist/base 설정이 필요하다배운 것을 전부 써봅시다
뭘 만들지 모르겠으면 4번을 고르세요
React 5강 전체
| 1강 | JSX, 컴포넌트, props, map + key, 조건부 |
| 2강 | useState, 이벤트, 불변성, 폼, 끌어올리기 |
| 3강 | useEffect, 의존성 배열, 정리 함수, fetch |
| 4강 | Context, useRef, useMemo, 커스텀 훅 |
| 5강 | 라우팅, 빌드, 배포 |
수고하셨습니다