[React] (5) 리액트 라우터
1. 리액트 라우터?
리액트 라우터 = 라우팅 관련 라이브러리 (페이지 이동)
-> 신규 페이지를 불러오지 않는 SPA에서 각각의 url에 따라 선택된 페이지를 렌더링 해주는 라이브러리
** 리액트는 CSR을 통해 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링하는 SPA 방식
CSR, SPA에 대한 자세한 설명은 여기를 참고하자
https://coding-hana.tistory.com/15
2. 리액트 라우터 설치
npm install react-router-dom@6
v6로 설치했고, v5와 v6의 차이는 하단 블로그에서 확인하자
https://han-py.tistory.com/433
- index.js
import BrowserRouter from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
BrowserRouter import하기
<BrowserRouter>로 <App/> 감싸기
3. 리액트 라우터 활용하기
[ Routes / Route ]
function App() {
let [shoes, setShoes] = useState(data);
let navigate = useNavigate();
return (
<div className="App">
<Routes>
<Route path="/notice" element={ <h4>공지입니다.</h4> } />
<Route path="/event" element={<Event />} />
<Route path="/about/*" element={<About />} />
<Route path="/detail/:id" element={<Detail shoes={shoes} />} />
<Route path="*" element={ <div>없는 페이지임</div> } />
</Routes>
</div>
);
}
function About() {
return (
<div>
<h4>about 페이지임</h4>
<Routes>
`<Route path="/member" element={<div>멤버들</div>} />
<Route path="/location" element={<div>회사위치</div>} />`
</Routes>
</div>
)
}
function Event() {
return (
<div>
<h4>오늘의 이벤트</h4>
<Outlet></Outlet>
</div>
)
}
(1) Route 1 : event
- Route의 기본 형태
(2) Route 2 : event/ Route 3 : about
=> Nested routes : 여러 유사한 페이지 필요할 때 사용
<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />
-> Nested routes를 사용하지 않은 경우
- Route 2 : event
-> Outlet 사용
- Route 3 : about
-> Outlet 없이 서브 페이지 라우팅
** <Outlet> : 라우터의 충첩 경로에서 중첩된 라우트를 렌더링하기 위해 사용되는 컴포넌트
(3) Route 4 : detail
<Route path="/detail/0" element={<Detail shoes={shoes} />} />
<Route path="/detail/1" element={<Detail shoes={shoes} />} />
<Route path="/detail/2" element={<Detail shoes={shoes} />} />
-> URL 파라미터를 사용하지 않은 경우
( URL 파라미터에 대한 설명은 하단에서 확인 )
(4) Route 5 : *
-> 이 Route를 추가해주면 일치하는 Route가 없는 경우 처리
[ Link / Navigate ]
(1) Link
- 링크 이동
- a 태그 생성 -> 그냥 누르면 가게 하는 것
<Link to="/">HOME</Link>
<Link to="/about">About</Link>
<Link to="/event">Event</Link>
(2) Navigate
- 페이지 이동을 도와주는 hook
- 어떠한 조건을 만족했을 때, 이동을 할 수 있도록 하는 것
import { useNavigate } from 'react-router-dom';
function App() {
let navigate = useNavigate();
return (
<div className="App">
<button onClick={()=>{ navigate('/about') }}>About</button>
<button onClick={()=>{ navigate('/event') }}>Event</button>
</div>
);
}
[ URL 파라미터 ]
- App.js
import Detail from './routes/Detail';
<Route path="/detail/:id" element={<Detail shoes={shoes} />} />
상세페이지처럼 같은 화면에 대하여 페이지를 여러 개 만들고 싶은 경우 URL 파라미터 사용
url 파라미터는 여러개 사용가능 => /detail/:id/:name/:eng
- Detail.js
import { useParams } from 'react-router-dom'
function Detail() {
let {id} = useParams();
return (
<div className="container">
<h4>{idx.title}</h4>
<p>{idx.content}</p>
</div>
)
}
App.js에서 url 파라미터 값(id)를 가져오려면? useparams()
## 코딩애플 React part2 강의 내용 ##
https://codingapple.com/course/react-basic/