14. React Router
1. React Router란?
React Router는 React에서 페이지를 이동하는 라이브러리입니다.
HTML에서는
index.html
↓
course.html
↓
gallery.html
↓
reservation.html
처럼 HTML 파일을 이동합니다.
React에서는
Home
↓
Course
↓
Gallery
↓
Reservation
컴포넌트만 변경됩니다.
브라우저는 새로고침하지 않고 필요한 화면만 변경합니다.
2. React Router 설치
설치
npm install react-router-dom
설치 후 package.json에
react-router-dom
이 추가됩니다.
3. 폴더 구조
예를 들어
동부산CC
src
pages
Home.jsx
Course.jsx
Gallery.jsx
Reservation.jsx
Notice.jsx
Contact.jsx
페이지마다
컴포넌트를 하나씩 만듭니다.
4. BrowserRouter
main.jsx
import { BrowserRouter }
from "react-router-dom";
사용
<BrowserRouter>
<App />
</BrowserRouter>
BrowserRouter가
React Router를 사용할 수 있게 만들어 줍니다.
5. Routes
App.jsx
import{
Routes,
Route
}
from "react-router-dom";
기본 구조
<Routes>
<Route
path="/"
element={<Home/>}
/>
</Routes>
6. 여러 페이지 만들기
<Routes>
<Route
path="/"
element={<Home/>}
/>
<Route
path="/course"
element={<Course/>}
/>
<Route
path="/gallery"
element={<Gallery/>}
/>
<Route
path="/reservation"
element={<Reservation/>}
/>
</Routes>
7. Link
HTML
<a href="">
React
import{
Link
}
from
"react-router-dom";
사용
<Link
to="/course"
>
코스안내
</Link>
8. Header 예제
<nav>
<Link to="/">
홈
</Link>
<Link to="/course">
코스
</Link>
<Link to="/gallery">
갤러리
</Link>
<Link to="/reservation">
예약
</Link>
</nav>
버튼을 누르면
페이지가 이동합니다.
9. useNavigate
JavaScript로 이동
import{
useNavigate
}
from
"react-router-dom";
사용
const navigate=
useNavigate();
예약 완료
navigate("/reservation");
자동으로
예약 페이지로 이동합니다.
10. 동부산CC 구조
/
Home
↓
/course
↓
/gallery
↓
/reservation
↓
/notice
↓
/contact
이렇게
URL이 구성됩니다.
11. 메뉴 클릭 흐름
Header
↓
Link
↓
React Router
↓
페이지 변경
↓
새 컴포넌트 출력
브라우저는
새로고침하지 않습니다.
12. 404 페이지
<Route
path="*"
element={<NotFound/>}
/>
존재하지 않는 주소는
404 페이지가 출력됩니다.
13. Layout
실무에서는
Header와 Footer를
공통으로 사용합니다.
Layout
↓
Header
↓
Pages
↓
Footer
이렇게 구성합니다.
14. 동부산CC 실무 구조
src
components
Header.jsx
Footer.jsx
Layout.jsx
pages
Home.jsx
Course.jsx
Gallery.jsx
Reservation.jsx
Notice.jsx
Contact.jsx
App.jsx
<Routes>
<Route
path="/"
element={<Layout/>}
>
<Route
index
element={<Home/>}
/>
<Route
path="course"
element={<Course/>}
/>
<Route
path="gallery"
element={<Gallery/>}
/>
<Route
path="reservation"
element={<Reservation/>}
/>
</Route>
</Routes>
15. React Router 실행 흐름
사용자 클릭
↓
Link
↓
React Router
↓
URL 변경
↓
해당 컴포넌트 실행
↓
화면 변경
16. BrowserRouter와 HashRouter
BrowserRouter HashRouter
URL이 깔끔함 #이 포함됨
서버 설정 필요 서버 설정 없이 사용 가능
실무에서 많이 사용 정적 호스팅에서 자주 사용
예)
BrowserRouter
domain.com/course
HashRouter
domain.com/#/course
카페24처럼 서버 설정이 제한되는 환경에서는 HashRouter가 더 쉽게 동작하는 경우가 있습니다.
17. React Router에서 많이 사용하는 기능
✔ BrowserRouter
✔ Routes
✔ Route
✔ Link
✔ useNavigate
✔ Outlet
✔ NotFound 페이지
정리
React Router는 React 애플리케이션에서 페이지 이동을 담당하는 라이브러리입니다.
HTML처럼 여러 개의 파일을 이동하는 것이 아니라, 컴포넌트를 교체하여 화면을 변경합니다.
주요 구성 요소는 다음과 같습니다.
BrowserRouter : 라우터 활성화
Routes : 페이지 그룹
Route : 경로와 컴포넌트 연결
Link : 메뉴 이동
useNavigate : JavaScript로 페이지 이동
동부산CC 프로젝트에서는 Home, Course, Gallery, Reservation, Notice, Contact 페이지를 구성하고, Header 메뉴를 통해 자연스럽게 이동하는 구조를 만들 수 있습니다.
1. React Router란?
React Router는 React에서 페이지를 이동하는 라이브러리입니다.
HTML에서는
index.html
↓
course.html
↓
gallery.html
↓
reservation.html
처럼 HTML 파일을 이동합니다.
React에서는
Home
↓
Course
↓
Gallery
↓
Reservation
컴포넌트만 변경됩니다.
브라우저는 새로고침하지 않고 필요한 화면만 변경합니다.
2. React Router 설치
설치
npm install react-router-dom
설치 후 package.json에
react-router-dom
이 추가됩니다.
3. 폴더 구조
예를 들어
동부산CC
src
pages
Home.jsx
Course.jsx
Gallery.jsx
Reservation.jsx
Notice.jsx
Contact.jsx
페이지마다
컴포넌트를 하나씩 만듭니다.
4. BrowserRouter
main.jsx
import { BrowserRouter }
from "react-router-dom";
사용
<BrowserRouter>
<App />
</BrowserRouter>
BrowserRouter가
React Router를 사용할 수 있게 만들어 줍니다.
5. Routes
App.jsx
import{
Routes,
Route
}
from "react-router-dom";
기본 구조
<Routes>
<Route
path="/"
element={<Home/>}
/>
</Routes>
6. 여러 페이지 만들기
<Routes>
<Route
path="/"
element={<Home/>}
/>
<Route
path="/course"
element={<Course/>}
/>
<Route
path="/gallery"
element={<Gallery/>}
/>
<Route
path="/reservation"
element={<Reservation/>}
/>
</Routes>
7. Link
HTML
<a href="">
React
import{
Link
}
from
"react-router-dom";
사용
<Link
to="/course"
>
코스안내
</Link>
8. Header 예제
<nav>
<Link to="/">
홈
</Link>
<Link to="/course">
코스
</Link>
<Link to="/gallery">
갤러리
</Link>
<Link to="/reservation">
예약
</Link>
</nav>
버튼을 누르면
페이지가 이동합니다.
9. useNavigate
JavaScript로 이동
import{
useNavigate
}
from
"react-router-dom";
사용
const navigate=
useNavigate();
예약 완료
navigate("/reservation");
자동으로
예약 페이지로 이동합니다.
10. 동부산CC 구조
/
Home
↓
/course
↓
/gallery
↓
/reservation
↓
/notice
↓
/contact
이렇게
URL이 구성됩니다.
11. 메뉴 클릭 흐름
Header
↓
Link
↓
React Router
↓
페이지 변경
↓
새 컴포넌트 출력
브라우저는
새로고침하지 않습니다.
12. 404 페이지
<Route
path="*"
element={<NotFound/>}
/>
존재하지 않는 주소는
404 페이지가 출력됩니다.
13. Layout
실무에서는
Header와 Footer를
공통으로 사용합니다.
Layout
↓
Header
↓
Pages
↓
Footer
이렇게 구성합니다.
14. 동부산CC 실무 구조
src
components
Header.jsx
Footer.jsx
Layout.jsx
pages
Home.jsx
Course.jsx
Gallery.jsx
Reservation.jsx
Notice.jsx
Contact.jsx
App.jsx
<Routes>
<Route
path="/"
element={<Layout/>}
>
<Route
index
element={<Home/>}
/>
<Route
path="course"
element={<Course/>}
/>
<Route
path="gallery"
element={<Gallery/>}
/>
<Route
path="reservation"
element={<Reservation/>}
/>
</Route>
</Routes>
15. React Router 실행 흐름
사용자 클릭
↓
Link
↓
React Router
↓
URL 변경
↓
해당 컴포넌트 실행
↓
화면 변경
16. BrowserRouter와 HashRouter
BrowserRouter HashRouter
URL이 깔끔함 #이 포함됨
서버 설정 필요 서버 설정 없이 사용 가능
실무에서 많이 사용 정적 호스팅에서 자주 사용
예)
BrowserRouter
domain.com/course
HashRouter
domain.com/#/course
카페24처럼 서버 설정이 제한되는 환경에서는 HashRouter가 더 쉽게 동작하는 경우가 있습니다.
17. React Router에서 많이 사용하는 기능
✔ BrowserRouter
✔ Routes
✔ Route
✔ Link
✔ useNavigate
✔ Outlet
✔ NotFound 페이지
정리
React Router는 React 애플리케이션에서 페이지 이동을 담당하는 라이브러리입니다.
HTML처럼 여러 개의 파일을 이동하는 것이 아니라, 컴포넌트를 교체하여 화면을 변경합니다.
주요 구성 요소는 다음과 같습니다.
BrowserRouter : 라우터 활성화
Routes : 페이지 그룹
Route : 경로와 컴포넌트 연결
Link : 메뉴 이동
useNavigate : JavaScript로 페이지 이동
동부산CC 프로젝트에서는 Home, Course, Gallery, Reservation, Notice, Contact 페이지를 구성하고, Header 메뉴를 통해 자연스럽게 이동하는 구조를 만들 수 있습니다.
#14. React Router