TIL049 동적 라우팅

1차 프로젝트를 하며 상당히 애먹었던 동적 라우팅...! 이번 기회에 제대로 정리해보려 한다!

1. 라우팅이란?

1) 라우팅의 정의

• 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.

2) SPA

• SPA는 MPA 대비 페이지 간 이동시 사용자가 느낄 수 있는 딜레이(새로고침시 나타나는 딜레이)를 제거해 일반적으로 더 나은 UX를 제공한다.
• 리액트는 기본적으로 라우팅 시스템을 갖추고 있지 않은 라이브러리라서 react-router-dom과 같은 부가적인 라이브러리를 설치하여 라우팅 기능을 추가한다.
• react-router-dom 을 사용한 라우팅에 필요한 기본적인 코드 구조는 아래와 같다.

// 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} />
      </Switch>
			<Footer />
    </Router>
  );
};

2. 동적 라우팅

1) 동적 라우팅의 정의

• Routes의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것.
• 동적일 수 있는 경로에 대하여 라우팅 하는 것.
• 즉, URL에 변수를 넣는 것이라 생각하면 편하다!

3) 동적 라우팅을 처리하는 법

Path parameter

<Router>
	<Switch>
		<Route exact path='/product/:id' component={productDetail} />
      // this.props.match.params.id
	</Switch>
</Router>

• :는 Path parameter가 올 것임을 의미한다.
• id는 path parameter의 이름을 의미한다. 변수명과 같이 임의의 이름을 지정해줄 수 있다.

Query parameter

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

3. history.push vs Link to

• Link : a 태그와 같다. 하지만 SPA 특성상 a태그 처럼 새로고침이 발생하면 안되기에, a 태그를 기반으로 기능상의 개선을 통해 새로고침없이 다른 뷰를 렌더 하기위해 사용하는 것이다.
• history.push : Route는 컴포넌트에 기본적으로 match, history, location 이라는 것을 넘겨준다. 이때 histroy.push(‘/인자’) 함수에 인자를 넣어주면 해당 인자로 url을 새로고침 없이 이동시켜준다.

4. match, history, location

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

1) history

브라우저의 window.history 와 유사
주소를 임의로 변경하거나 되돌아 갈 수 있도록 한다.
주소 변경시, SPA 특성을 지키기 위해 페이지 전체를 리로드 하지 않는다.
location 이 포함되어 있다.

2) location

브라우저의 window.location 와 유사
현재 페이지 정보를 지니고 있다.
url의 query 정보를 search라는 프로퍼티에 가지고 있다.

3) match

Route의 path에 정의한 것과 매칭된 정보를 가지고 있다.
params 에 설정한 파라미터를 담고 있다.

5. URL에 담겨있는 id값 가져오기

match객체를 통해 가져올 수 있다. path parameter로 명시해둔 값은 match 객체에 담기기 때문이다.

// ProductDetail.js
// current url -> localhost:3000/product/1

class ProductDetail extends React.Component {
	...
	render() {
		console.log(this.props.match.params.id) // 1
		return (
			...
		);	
	}
}

따라서 componentDidMount 메서드에서 해당 id 값을 통해 서버에 요청을 보내는 것을 통해 원하는 정보를 받아올 수 있다.

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