[TIL] 동적 라우팅

저는 지금까지 프로젝트를 진행하면서 동적라우팅을 직접 사용해 본 적이 없습니다. 좀 더 구체적으로 말하자면 다른 팀원분들이 해당 부분을 코딩해주셔서 저는 따라가기만 했던 것인데요, 앞으로의 프로젝트에서는 분명 동적 라우팅을 해야하는 경우가 생길 것이기에 오늘 포스팅을 정리하면서 동적 라우팅을 좀 더 익혀보는 시간을 가져보도록 하겠습니다.

 

1. 동적 라우팅이 뭔가요? 

 

동적 라우팅이란 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것을 말합니다. 보통 react에서는 해당 기능이 없기 때문에 react-router라는 라이브러리를 통해 이 기능을 구현하곤 합니다.

 

react router에서는 두 가지 방법을 통해 유동 라우팅 기능을 구현할 수 있는데, 

 

1. Query parameters

2. URL parameters 

이 두가지로 기능을 구현할 수 있습니다.

 

2. 라우트로 설정한 컴포넌트의 3가지 props

 

라우트로 설정한 컴포넌트는 다음의 3가지 props를 전달받게 됩니다.

 

1) history

 

history 객체의 push, replace 를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환할 수 있습니다.

 

2) location

 

이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리에 대한 정보도 가지고 있습니다.

 

3) match

 

이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고, params 정보를 가지고 있습니다.

 

3. Query parameters

 

클래스형 컴포넌트 기준 this.props.location을 통해 URL 주소의 정보를 가지고 올 수 있습니다. 해당 URL에서 필요한 key값을 추출하여 백엔드와 데이터 통신을 하고, 백엔드와 통신한 데이터로 원하는 정보를 페이지에 담을 수 있습니다.

 

4. URL parameters

 

params에 대한 정보는 클래스형 컴포넌트 기준 this.props.match.params를 통해 가져올 수 있습니다. params 데이터를 사용하기 위해서는 Route.js에서 라우트 설정을 조금 수정해야 합니다. Route exact path 뒤에 /:id 를 붙여주면 해당 컴포넌트에서 this.props.match.params.id를 통해 해당 값을 가져올 수 있습니다.

 

 

5. String parameters VS Query parameters

 

string parameters를 쓰는 경우

• 해당 페이지에서 여러 정보가 필요한 경우
• Query parameters를 사용할 경우, routes.js를 수정해야 하기 때문에 유지 보수 측면에서 좋지 않다고 판단될 경우
• 필터링을 하고 싶은 경우

 

query parameters를 쓰는 경우

• 특정한 resource를 식별하고 싶은 경우. 즉, 하나만 딱 필요한 경우.

 

6. 마무리

 

오늘은 간단한 동적 라우팅의 개념에 대해 알아보았습니다. 아직은 체득되었다고 생각되지 않기 때문에 다양한 자료들을 보고 지금 제 프로젝트에 적용해보면서 해당 기능을 자유자재로 쓸 수 있도록 노력해야겠습니다.

 

 

참고 블로그: velog.io/@joonsikyang/React-Project-URL-parameters-Query-parameters#%EB%8F%99%EC%A0%81%EB%9D%BC%EC%9A%B0%ED%8C%85

React | Query parameters, URL parameters

velog.io/@mandarinduk/React-%EB%8F%99%EC%A0%81%EB%9D%BC%EC%9A%B0%ED%8C%85

[React] 동적라우팅