Routing

경로에 따라 각기 다른 화면을 보여주기

• route + -ing : 경로를 찾아가는 행위
• 즉 라우팅이란, 다른 경로(url 주소)에 따라 다른 View(화면)을 보여주는 것.

SPA (Single Page Application, 단일 페이지 애플리케이션)

• 사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림.
• SPA는 MPA 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 일반적으로 더 나은 UX를 제공.(페이지 전체를 새로고침 하지 않기 때문)

// Routes.js 기본적인 코드 구조
const Routes = () => {
  return (
    <Router>
			<Nav />
      <Switch>
        <Route exact path="/" component={App} />
      </Switch>
			<Footer />
    </Router>
  );
};

-> React 앱이 경로에 따라 어떤 컴포넌트를 보여줄지 결정(switch)하는 역할(화면 바꿔 끼우기)

정적 라우팅, 동적 라우팅

지금까지 해온 라우팅 방법으로는 완전히 정해진 경우에 대해서만 경로를 표현할 수 있었다. 하지만 동적 라우팅 방법이 생기면서 정적이지 않은 동적일 수 있는 경로에 대하여 라우팅 할 수 있게 되었다.

Path Parameter

// Good
"/users/:id" => <Users /> // this.props.match.params.id

Query Parameter

// Good
"/search?keyword=something" : <Search /> // this.props.location.search

동적 라우팅(Dynamic Routing)

보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지로 구성된다. 이때 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 동적 라우팅이라고 한다.

Path Parameter

라우트 경로 끝에 들어가는 각기 다른 id 값들을 저장하는 매개 변수를 Path Parameter 라고 한다.

<Router>
	<Switch>
		<Route exact path='/product/**:id**' component={productDetail} />
	</Switch>
</Router>

• :는 Path Parameter 가 올 것임을 의미한다.
• id는 해당 Path Parameter 의 이름을 의미한다. 변수 명을 짓듯이, 임의의 이름을 지정해줄 수 있다.

history, match, location 객체

React Router 에서 제공하는 history, match, location 객체를 사용하여 위의 id 값을 가져올 수 있다.

• history 객체는 페이지 이동을 위한 여러 메서드들을 담고 있다.
• location 객체는 현재 url 경로에 관한 정보를 담는다.
• match 객체는 Path Parameter에 관한 정보를 담는다.

this.props.match.params.id

Path Parameter로 명시해둔 값은 match 객체에 담기기 때문에 match 객체를 이용하여 URL에 담겨있는 id값을 가져올 수 있다.
따라서 componentDidMount 메서드에서 해당 id값을 통해 서버에 요청을 보내는 것을 통해 원하는 정보를 받아올 수 있다.

componentDidMount() {
	fetch(`${API}/${this.props.match.params.id}`)
	.then(res => res.json())
	.then(res => ...);

Query Parameter

쿼리 스트링이란 말 그대로 해당 엔드포인트에 대해 질의문을 보내는 요청을 뜻한다.
예를 들어 localhost:8000/product?limit=10&offset=5라는 주소가 있다면 API 뒷 부분에 붙어있는 ?로 시작하는 텍스트가 바로 쿼리스트링이다.
?limit=10&offset=5의 경우 "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라" 는 요청으로 해석된다.

• ? 기호는 쿼리스트링의 시작을 알린다.
• limit : 한 페이지에 보여줄 데이터 수
• offset : 데이터가 시작하는 위치(index)
• parameter=value로 필요한 파라미터의 값을 적는다.
• 파라미터가 여러개일 경우 &를 붙여서 여러개의 파라미터를 넘길 수 있다.

this.props.location.search

Path Parameter에 대한 정보는 match 객체 안에 담겨있었듯이, 쿼리스트링에 대한 정보는 location 객체 안에 담겨있다.
따라서 url에서 쿼리 스트링에 대한 정보를 받아와서, 해당 정보를 통해 데이터를 요청할 수 있다.

fetch(`${API}${this.props.location.search}`)
	.then(res => res.json())
	.then(res => ...)