TIL #14 동적라우팅

프로젝트를 시작하니 시간을 갖고 배운 것을 되짚어보는 시간이 부족하다고 느껴졌다. 뭔가 기능 구현을 하고 싶은 것들은 넘쳐나는데

내 실력은 따라가지 못하고... 근데 또 세션은 계속되고...

 

그래도 시간을 내서 공부하고 기록을 해야 나에게 남는 것이 있다고 생각하기 때문에 시간관리를 잘해서 가능하다면 공부와 기록을 최대한 끊기지 않고 하려고 한다.  화이팅팅

 

동적 라우팅

리액트에서 서버와의 통신을 통해 그때그때 다른 데이터를 보여줘야 할 경우에는 가변적으로 통신이 가능하도록 동적 라우팅을 사용해야 한다.

 

 

위의 예와 같이 클릭한 카드의 id를 url에서 확인할 수 있고, 해당 아이디에 맞는 카드에 대한 세부 정보를 표시해 주는 창으로 넘어가게 된다.

(쇼핑몰의 홈페이지에서 상품 클릭 시 상품에 대한 상세페이지로 넘어가는 기능을 생각하면 이해가 쉽다.)

 

이러한 기능을 위해서는 먼저 Routes.js 파일에서 연결되는 주소와 컴포넌트 설정이 필요하다.

            <Router>
                <Switch>
                    <Route
                        exact
                        path="/monsters/detail/:id"
                        component={MonsterDetail}
                    />
                </Switch>
            </Router>

 

위 코드의 ":id" 부분에 상세 정보를 확인하고자 하는 요소의 id 값이 들어가게 된다.
( ": "뒤의 이름은 어떠한 값으로 지정해도 상관없다.) => 나중에 params의 key값으로 사용하게 된다.

그 후 컴포넌트 마운트 시에 fetch를 통해 받아온 데이터를 이용하여 해당 요소들의 아이디 값을 받아온다.

(세세히 적지는 않으려고 한다 중요한 건 흐름이니까 )

 

각 요소들의 아이디 값을 알고 있다면 해당 요소 클릭 시 url을 변경하여 페이지 이동이 가능하도록 onClick 이벤트를 설정해준다.

(클릭 시 이동하는 url 주소의 마지막에 템플릿 리터럴을 사용하여 저장된 id값을 마지막에 적어준다.)

 

여기까지 진행할 경우 url은 우리의 의도대로 마지막에 클릭한 요소의 id 값이 정상적으로 적용이 되지만,

막상 페이지에 보이는 데이터는 바뀐 부분이 없다.

 

이때 url과 연결된 MonsterDetail 컴포넌트에서 해당 아이디에 맞는 새로운 데이터를 받아와야 하는데,

이때 중요한 것이 react-router 라이브러리 사용 시 접근 가능한 match 객체의 params 속성 값이다.

 

 

카드 클릭시 카드의 props를 보여주는 화면

 

위는 카드 클릭 시 클릭된 카드의 props를 출력한 화면이다.

 

위 화면에서 보다시피 this.props.match.params에 우리가 클릭한 카드의 id값이 객체 형식으로 들어가 있다.

이때 객체의 key값이 되는 "id"는 우리가 가장 처음 라우터에서 url 마지막에 적어준 ":" 뒤의 문자열이 사용된다.

 

여기서 잠깐 흐름을 짚고 넘어가자면,

클릭한 카드의 id값에 따라 자동으로 변경되는 url과 연결된 컴포넌트의 props값을 통해 우리가 클릭한 요소의 id 값에 접근 가능하게 되었다.

라고 이야기할 수 있을 것 같다.

 

그리고 fetch를 통해 새로 필요한 데이터를 받아올 때에,

기존에 데이터를 받아온 url에 템플릿 리터럴을 활용하여 위의 방식으로 접근 가능했던 id 값을 첨부하여 보내줌으로써,

우리가 필요한 요소의 데이터를 골라서 받아올 수 있게 된다.

 

(id 값을 어떻게 첨부하여 request를 보내주는지는 API를 설계하는 백엔드 개발자와의 소통을 통해 결정할 수 있다.)

 

설명과 연습은 이렇게까지만 하고 현재 내가 프로젝트에서 구현 중인 상품 리스트 페이지와 상품 상세페이지를 연결해서 실습을 진행해 봐야 할 것 같다.

구현이 완성된 후에 구체적인 코드를 올려보려고 한다.