1. Routing
route + -ing : 경로(route)를 찾아가는 행위
SPA (Single Page Application, 단일 페이지 애플리케이션)
- SPA 는 사용자가 웹 애플리케이션과 상호 작용하는 방식을 획기적으로 바꾼 기술.
- 사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림.
- SPA는 MPA(Multi Page Application) 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 일반적으로 더 나은 UX를 제공. (페이지 전체를 새로고침 하지 않기 때문! ← 매우 중요)
// index.html
<!DOCTYPE html>
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>// index.html
<!DOCTYPE html>
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>// Routes.js
const Routes = () => {
return (
<Router>
<Nav />
<Switch>
<Route exact path="/" component={App} />
<Route exact path="/users" component={Users} />
<Route exact path="/products" component={Products} />
<Route path="*" component={NotFound} />
</Switch>
<Footer />
</Router>
);
};
index.html: public/index.html에 위치하며 React 페이지 로드 시 가장 먼저 호출되는 영역index.js: React 앱을 렌더하고 index.html의div#root이하에 끼워넣는 역할Routes.js: React 앱이 경로에 따라 어떤 컴포넌트를 보여줄지 결정(switch)하는 역할 (화면 바꿔 끼우기)
2. 정적 라우팅
"/" => <App />
"/users" => <Users />
"/products" => <Products />이런식으로는 정해진 경우(정적, static)에 대해서만 경로를 표현할수 있었다.
3. 동적 라우팅
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 /> // this.props.match.params.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 /> // this.props.location.search
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.