1. Routing
1-1. 경로에 따라 각기 다른 화면을 보여주기
route+-ing: 경로(route)를 찾아가는 행위- 다른 경로(url 주소)에 따라 다른 view(화면)을 보여주는 것.
1-2. SPA(Single Page Application, 단일 페이지 애플리케이션)
- SPA는 사용자가 웹 애플리케이션과 상호 작용하는 방식을 획기적으로 바꾼 기술
- 사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림
- SPA는 MPA(Multi Page Application) 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 일반적으로 더 나은 UX를 제공. (페이지 전체를 새로고침 하지 않기 때문이다. 이는 우리가 a태그를 써보면 화면이 이동하면서 전체를 새로고침한다. 그 차이를 생각하면 된다.)
React는 기본적으로 라우팅 시스템을 갖추고 있지 않으므로(라이브러리), react-router-dom과 같은 부가적인 라이브러리를 설치해서 라우팅 기능을 추가할 수 있다.
react-router-dom을 사용한 라우팅에 필요한 기본적인 구조는 아래와 같다.
// index.html
<!DOCTYPE html>
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>// index.js
ReactDOM.render(<Routes />, document.getElementById("root"));// Routes.js
const Routes = () => {
return (
<Router>
<Nav />
<Routes>
<Route path="/" element={<App />} />
<Route path="/users" element={<Users />} />
<Route path="/products" element={<Products />} />
</Routes>
<Footer />
</Router>
);
};- index.html : public/index.html에 위치하며 React 페이지 로드 시 가장 먼저 호출되는 영역
- index.js : React 앱을 랜더하고 index.html의
div#root이하에 끼워넣는 역할 - Routes.js : React 앱이 경로에 따라 어떤 컴포넌트를 보여줄지 결정(switch)하는 역할(화면 바꿔 끼우기)
2. 정적 라우팅, 동적 라우팅
보통의 방법은 완전히 정해진 경우(정적, static)에 대한 경로를 표현한다.
"/" => <App />
"/users" => <Users />
"/products" => <Products />아래 사진처럼 레이아웃은 같지만 안의 내용이 다른 경우라면?
- url을 살펴보면 url 마지막에 특정 id값이 들어가고(
/32692,/53424), 해당 id 값에 따라 서로 다른 상세페이지 정보가 화면에 그려지는 것을 볼 수 있다. id 값에 따라 무수히 많은 url이 나타날 것이고, 각각의 모든 url에 대해 미리 경로의 형태와 갯수를 결정할 수 없게 된다. - 즉, url에 들어갈 id를 변수처럼 다뤄야 할 필요성이 생긴 것이다.
- 이처럼 정적이지 않은, 동적일 수 있는 경로에 대하여 라우팅을 하는 것을 동적 라우팅(Dynamic Routing)이라고 부른다.
2-1. 동적인 라우팅을 처리하는 방법
- 동적인 경로를 처리할 수 있는 방법으로 Path Parameter, Query Parameter가 있다.
1) Path Parameter
// Bad
"/users/1" => <Users id={1} />
"/users/2" => <Users id={2} />
"/users/3" => <Users id={3} />
"/users/4" => <Users id={4} />
"/users/5" => <Users id={5} />
// Good
"/users/:id" => <Users /> // useParams().id2) Query Parameter
// Bad
"/search?keyword=위코드" : <Search keyword="위코드" />
"/search?keyword=리액트" : <Search keyword="리액트" />
"/search?keyword=라우팅" : <Search keyword="라우팅" />
"/search?keyword=쿼리스트링" : <Search keyword="쿼리스트링" />
"/search?keyword=SPA" : <Search keyword="SPA" />
// Good
"/search?keyword=something" : <Search /> // useLocation().search
不怕慢, 只怕站