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를 받는다 ❗️
- history
- 이 객체를 통해 push, replace 를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있다!
- class를 사용했을 때
this.props.history.push('/page')
를 통해 이동할 수 있었던 이유 !
- location
- 이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/company_list?category=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 // 필터링 >>> 직업이 프로그래머인 사용자 목록만 가져온다.
Author And Source
이 문제에 관하여(TIL 24. Dynamic Routing), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rhdwnals1/TIL-24.-Dynamic-Routing저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)