팀프로젝트를 진행하면서 동적라우팅 세션을 듣게 되었다. 그 당시 팀 프로젝트로 바쁘기도 해서 정확히 이해하지는 못하고 팀프로젝트에서 사용하면서 익혀나갔었는데 팀프로젝트가 종료되고 지금 다시 천천히 정리해보면서 벨로그를 작성하게 되었다.
동적라우팅이란?
동적라우팅 리액트를 사용하면서 라우트를 사용하게 된다.
그리고 동적라우팅은 커머스 사이트 처럼 제품 판매 하는 곳에 강력하게 사용되는것 같다. 제품 카드들이 있을 경우 제품 상세를 보기 위해 클릭하게 되었을때 url주소 끝만 변경되는 것을 본적이 있을 것이다. 동적라우팅은 그런 기능을 쉽게 가능하게 해준다.
<Router>
<Switch>
<Route exact path='/product/detail/:id' component={productDetail} />
</Switch>
</Router>끝에 값인 :id값이 변수처럼 처리가 되어서 동적으로 값이 변경되고
우리는 변수를 계속 변경해주면서 각각 다양한 제품들의 속성을 전달해줄수있다.
저 값을 Path Parameter 라고 불린다.
Path Parameter
: 뒤에 사용되는 것을 Path Parameter라고 불린다.
:id 라고 적혀있지만 저값을 우리는 백엔드팀과 맞춰서 사용할수 있기 때문에
변경이 가능하다. :page 이렇게 사용하면된다. 즉 page 위치는 변수이다.
우리는 onclick 함수를 통해서 주소를 변경하게 할수 있다.
onClick={() => this.props.history.push('/product/detail/145')}이런 식으로 history.push 를 이용해서 클릭하면 원하는 주소로 이동이 가능하게 하는데 우리는 결국 145인 :id값을 변경만 해주면 된다.
그렇다면 :id값은 어떻게 알 수 있을까 ?
React Router 는 Route 에 명시되어 있는 컴포넌트에 라우팅 기능 뿐 아니라 history, location, match 라는 객체를 프롭스에 포함시켜 제공한다.
- history 객체는 페이지 이동을 위한 다양한 메서드들을 포함합니다.
- location 객체는 현재 url 경로에 관한 정보를 담습니다.
- match 객체는 Path Parameter 에 관한 정보를 담습니다.
match.params를 콘솔로 찍게 되면 id:0 이렇게 값들을 알수있다.
따라서 아래 처럼 사용하게 된다면 동적으로 라우팅 주소를 변경이 가능하다.
componentDidMount() {
fetch(`${API}/${this.props.match.params.id}`)
.then(res => res.json())
.then(res => this.setState({ data: res.result }));
}사용
앞에서 언급했듯이 프로젝트를 사용하면서 동적라우팅 기능을 사용하게 되었다.
배울때는
fetch(`$ {API}/${this.props.match.params.id}
이렇게 적혀있어서 this.props.history.id 라고 하면
사용이 가능할 것이라고 생각했다.
하지만 라우트에서만 패스 파라미터를 사용하고 나머지는 백틱과 ${id }로 값을 주어야 했다. 왜 오류가 나는지 궁금했었는데
확실히 공부를 더하고 사용해봐야 할것 같다.
나는 메인 페이지를 맡았고 제품 카드 까지 만드는 역할을 맡았는데
라우터에 주소 설정 => 제품카드 컴포넌트에 onclick 이벤트 형성
그리고 제품 세부 컴포넌트에서 라우트 fetch를 받도록 설정을 했다.
마침 제품 카드 컴포넌트까지 작성을 해서 제대로 확인해 보지 못하였다.
다음 프로젝트 때는 조금더 활용을 해보면서, 다른 역할을 맡으면서 진행하고 익혀야겠다.
