이전에는 일단 테스트용으로 만든 id에서 무한 스크롤이 구현되게끔 하였다.
이번에는 쿼리값에 따른 동적인 렌더링을 구현할 차례.
{id} 페이지
구현 과정
- 테스트용 id (서버상으로는 recipientId) 더 만들기
- 프로젝트 서버에 아무 데이터도 없었기에 내가 수신자 아이디를 만들어야 했다. 덕분에 스웨거 공부도 겸사겸사 하게 되었음..
- 쿼리 값을 useParams로 가져온다.
- recipient 목록을 조회하는 api 만들기
- 스웨거 상으로 recipient들을 조회하는 엔드포인트와 해당 recipient의 메시지를 조회(getMessage) 하는 엔드포인트가 달랐기에, recipient들을 조회하는 리퀘스트 함수(getRecipient 함수 )를 따로 만들어야 했다.
- useParams로 가져온 값 (=id) 을 getRecipient 로 각 recipient의 정보가 담긴 객체를 담은 배열을 순회하여 해당하는 id가 존재하는지 확인
- id 값에 따라서 데이터를 가져올수 있게 getMessage 리퀘스트 수정
- 해당 메시지가 페이지에 렌더링
### -1. 테스트용 recipient 더만들기
- 2,3,4. 쿼리 값을 가져오고, recipient 목록을 조회하는 api 에서 일치하는지 확인
- useParams로 쿼리값 가져오기
- getRecipient 리퀘스트 함수 내부에서
find 메소드를 활용하여 리퀘스트로 받아온 데이터에서 id가 일치하면 리턴되게끔하였다. - getRecipient 를 요청하는 컴포넌트에서는 id를 구조분해로 가져오고, 다른 필요한 데이터들을 여기서 추가로 구조분해하면 된다!
ex) backgroundColor , MessageCount 등
5. id가 존재한다면 해당 id를 수정한 기존 getMessage 리퀘스트에 같이 보내주어야함.
- 그렇게 받아온 id 값을 기존의 getMessage 리퀘스트에 넣어주었다.
