TIL 24. Dynamic Routing

우선 동적 라우팅에 대해 알기 전에 어떤 리스트가 있다면 그 중 클릭한게 무엇인줄 알고 넘어가는가에 대해 의문을 가질 수 있다.. ❓
지금 하고 있는 프로젝트의 Route.js를 봐보자 !

코드를 보면 exact path를 통해 정해진 component로 이동하게 되어있다.

동적 라우팅이란 ❓

Route의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것 (Dynamic Routing)

React Router에서는 두가지 방법으로 유동 라우팅 기능을 구현 할 수 있다.

• Query parameters
• URL parameters

Route로 설정한 컴포넌트의 3가지 props

Route로 설정한 component는 3가지의 props를 받는다 ❗️

1. history

• 이 객체를 통해 push, replace 를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있다!
• class를 사용했을 때 this.props.history.push('/page') 를 통해 이동할 수 있었던 이유 !

2. location

• 이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/company_list?category=3)에 대한 정보도 가지고 있습니다.

3. match

• 이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/company_detail/:id) 정보를 가지고있습니다.

로그인 성공시 메인 페이지 이동

• login을 시도하면 API와 통신하고 토큰 유무를 확인합니다.
• 토큰이 있으면 로컬 스토리지에 저장하고,
• /Main 주소의 URL로 이동하도록 설정되어 있습니다.

❓만약 /Main 뒤에 ?category=3이 붙어 /Main?category=3 이라면 무슨 뜻 일까요

즉, 로그인 성공 시 /Main?category=3 주소의 URL로 이동하도록 설정되어 있는 것은 처음 메인 화면 진입 시에 해당하는 데이터를 화면에 보여주겠다는 뜻

여기서 사용한 방법이 Query Parameters ❗️❗️❗️

🔥 Query Parameters

❓ location

• 이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/Main?category=3)에 대한 정보도 가지고 있습니다.

🔥 URL Parameters

❓ match

• 이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/company_detail/:id) 정보를 가지고있습니다.

🚨 주의) URL 쿼리의 경우엔 컴포넌트 내에서 동적으로 사용 할 수 있고, params 의 경우엔 사용하기 전에 꼭 라우트에서 지정을 해주어야합니다.

두 가지 방법은 언제 쓰는게 좋을까?

String parameters

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

Query parameters

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

/users // 사용자 전체의 목록을 가져온다.
/users/123 // id 값이 123인 사용자를 가져온다.
/users?job=programer // 필터링 >>> 직업이 프로그래머인 사용자 목록만 가져온다.