Advanced Router
1. 동적 라우팅(Dynamic Routing) : 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것(ex. 상품 목록 페이지에서 상품 상세 페이지로 이동할 때 활용되는 기능)
2. 사용자 브라우저에 입력되는 URL 주소 vs. 백엔드에 요청하는 API 주소 구분 필요
3. 페이지네이션 : 백엔드와 함께 구현하는 기능
1. Routing
(1) 경로에 따라 각기 다른 화면 보여주기
라우팅(routing)
: 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것
(2) SPA (Single Page Application)
-
SPA
: 사용자가 웹 애플리케이션과 상호 작용하는 방식을 획기적으로 바꾼 기술 -
사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림
-
SPA는 MPA(Multi Page Application) 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 일반적으로 더 나은 UX를 제공
- 페이지 전체를 새로고침 하지 않기 때문
2. 정적 라우팅, 동적 라우팅
(1) 정적 라우팅(Static Routing)
Routes.js : React 앱이 경로에 따라 어떤 컴포넌트를 보여줄지 결정(switch)하는 역할 (화면 바꿔 끼우기)
- 지금까지 해온 라우팅 방법으로는
Routes.js
를 통해 완전히 정해진 경우(정적, static)에 대해서만 경로를 표현 할 수 있었음
(2) 동적 라우팅(Dynamic Routing)
- URL에 들어갈 id를 변수처럼 다뤄야 할 필요성이 생김
- 동적인 경로를 처리할 수 있는 방법으로 Path Parameter 와 Query Parameter 가 있음
-
URL 마지막에 특정 id 값이 들어감
- 해당 id 값에 따라 서로 다른 상세 페이지 정보가 화면에 그려지게 됨
-
id 값에 따라 무수히 많은 URL 이 나타날 것이고, 각각의 모든 URL 에 대해 미리 경로의 형태와 갯수를 결정할 수 없게 됨
1) Path Parameter
"/users/:id" => <Users /> // this.props.match.params.id
ex) https://rrbsb.csb.app/netflix
https://rrbsb.csb.app/yahoo
https://rrbsb.csb.app/modus-create
2) Query Parameter
"/search?keyword=something" : <Search /> // this.props.location.search
ex) https://mfh8p.csb.app/account?name=netflix
https://mfh8p.csb.app/account?name=yahoo
https://mfh8p.csb.app/account?name=modus-create
3. Dynamic Routing & Path Parameter
(1) 동적 라우팅 (Dynamic Routing)
- 보통의 웹 사이트는 전체 아이템이 보여지는
리스트 페이지
와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는상세 페이지
로 구성됨
(2) Path Parameter
localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125
-
라우트 경로 끝에 들어가는 각기 다른 id 값들(
2
,45
,125
)을 저장하는 매개 변수를 Path Parameter 라고 함 -
Path Parameter 는 Routes 컴포넌트에서 다음과 같이 정의됨
<Router>
<Switch>
<Route exact path='/product/:id' component={productDetail} />
</Switch>
</Router>
:
는 Path Parameter 가 올 것임을 의미id
는 해당 Path Parameter 의 이름을 의미. 변수 명을 짓듯이, 임의의 이름을 지정해줄 수 있음 (ex.:productId
)
(3) history, match, location 객체
-
React Router 에서 제공하는
history
,match
,location
객체를 사용하여 위의 id 값을 가져올 수 있음 -
Routes.js
의Route 컴포넌트
의component 프로퍼티
에 직접 연결되어 있는 하위 컴포넌트는history
,location
,match
3가지 객체를props
를 통해 제공 받음
// Routes.js
<Route exact path='/product/detail/:id' component={ProductDetail} />
// ProductDetail.js
render() {
console.log(this.props) // { history: {}, location: {}, match: {}, ... }
return (
...
);
}
- 위의 예제에서,
ProductDetail 컴포넌트
는 Route 컴포넌트를 통해 3가지 객체를 제공 받음
history
객체 : 페이지 이동을 위한 여러 메서드들을 담고 있음 (ex.push
)location
객체 : 현재 URL 경로에 관한 정보를 담음match
객체 : Path Parameter 에 관한 정보를 담음
(4) this.props.match.params.id
-
match
객체를 이용하여 URL 에 담겨있는 id 값을 가져올 수 있음 -
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 => ...);
(5) 동적 라우팅을 구현 로직 정리
-
리스트 페이지의 개별 상품을 클릭
→this.props.history.push("/product/1")
로 상세 페이지로 이동 -
상세 페이지로 이동하면 URL은
"http://localhost:3000/product/1"
과 같이 변경되어 있음 -
페이지에 필요한 데이터를 CDM 에서 fetching 함
- 필요한 id는 URL에 존재하므로
this.props.match.params.id
에서 가져올 수 있음 - 해당 id를 가지고 백엔드에서 만들어준 API를 호출
- 필요한 id는 URL에 존재하므로
componentDidMount() {
const id = this.props.match.params.id
fetch(`http://123.456.123.123:8000/products/${id}`) // 1
.then(res => res.json())
.then(res => this.setState({ data: res }))
}
- 서버에서 가져온 데이터(
res
)를 컴포넌트의 state 객체에 저장 - state 객체에 담긴 데이터로 컴포넌트 UI 를
render
4. Pagination & Query Parameter
(1) Pagination
-
백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용
-
모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 함
-
프론트엔드에서 현재의 위치(Offset)와 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달
-
백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현
(2) Query Parameter
쿼리 스트링(Query String)이란? : 말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 뜻함
- 이 과정에서 Query Parameter(혹은, Query String)를 사용하게 됨
// API 주소
localhost:8000/product?limit=10&offset=5
쿼리스트링
:?
로 시작하는 텍스트limit
: 한 페이지에 보여줄 데이터 수offset
: 데이터가 시작하는 위치(index)parameter=value
: 필요한 파라미터의 값을 적음- 파라미터가 여러개일 경우
&
를 붙여서 여러개의 파라미터를 넘길 수 있음
(3) this.props.location.search
- Path Parameter 에 대한 정보는
match
객체 안에 담겨있었듯이, 쿼리스트링에 대한 정보는location
객체 안에 담겨있음
// current url -> localhost:3000/products?offset=10&limit=10
class ProductList extends React.Component {
...
render() {
console.log(this.props.location.search) // ?offset=10&limit=10
return (
...
)
}
}
- 따라서 URL 에서 쿼리 스트링에 대한 정보를 받아와서, 해당 정보를 통해 데이터를 요청할 수 있음
fetch(`${API}/${this.props.location.search}`)
.then(res => res.json())
.then(res => ...)
5. 동적 라우팅 vs. 페이지네이션
(1) 동적 라우팅
- 리스트 페이지에서 카드를 클릭
- URL 이동. 이때, 카드의 고유한 id 값이 URL 에 포함됨
- 이동한 페이지에서, URL 에 담겨있는 id 값을
match
객체를 이용하여 가져옴 - 가져온 id 값을 이용하여 백엔드에 데이터를 요청
(2) 페이지네이션
- 리스트 페이지에서 버튼을 클릭
- URL 이동. 이때 URL 에는 각 버튼에 해당하는 쿼리스트링이 포함됨
- 이동한 페이지에서, URL 에 담겨있는 쿼리스트링을
location
객체를 이용하여 가져옴 - 가져온 쿼리스트링을 이용하여 백엔드에 데이터를 요청
<출처> wecode(코딩 부트캠프) 세션
Author And Source
이 문제에 관하여(Advanced Router), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ahnjh/Advanced-Router저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)