동적 라우팅 실습 순서

동적 라우팅 실습에 사용되는 요소는 컴포넌트 총 4개와 Router.js로 이루어져 있다.

• 데이터를 받아오는 가장 부모 컴포넌트인 Monsters
• 받아온 데이터를 넘겨받는 테두리의 역할을 하는 CardList
• 테두리 안의 하나하나의 요소를 맡는 Card
• Card 컴포넌트를 클릭했을 때 Card의 자세한 정보를 보여주는 MonsterDetail

📄 목표

메인 페이지에서 한 요소를 클릭했을 때, 요소의 상세 정보를 그리는 페이지로 이동하고 뒤로가기버튼과 카드이동(전,후)버튼의 기능을 구현할 것

---

1. Monsters에서 데이터를 받아오자

1. useEffect => fetch()로 받아와 state에 저장해준다.
2. CardList에 monster state를 내려준다.

2. CardList에서 다수의 Card생성

1. CardList에서 Card에서 필요한 요소들을 map()통해 생성해준다.

3. Card를 눌렀을 때, 상세페이지로 넘어갈 준비를 하자

1. Card에서 사용되는 정보를 가변정인 요소로 표현하자. props로 받은 요소들을 카드에서 사용하는 카드의 이름, 카드의 이메일, 카드의 사진로 사용한다.
2. 카드를 눌렀을 때, 카드의 상세페이지로 넘어가는 경로를 설정한다.

const goToDetail = () => {
navigate(`detail/${props.id}}`);
onclick={goToDetail}

여기서 props의 id는 map()를 통해 각자 카드만의 id를 가지고 있다.

4. Card의 수 많은 경로를 설정하려면..?

1. Router.js의 상품디테일 컴포넌트의 path 값뒤에 /:id를 사용한다.

위대로만 한다면 카드 하나하나를 클릭했을 때, URL뒤에 id값(숫자)가 변화하는 것을 볼 수 있을 것이다.

---

✅ 중간 정리

• Card 하나하나의 요소를 클릭할 때마다, URL의 id값이 변화한다.
• Router.js에서 상세제품 페이지path뒤에 /:id를 붙혀주어 /뒤에 id를 동적인 모습으로 만들어주었다.

5. 중요한 상세페이지의 역할

상세페이지를 보여줄 모든 조건들이 완성되었다. props로 UI에 사용될 정보도 받았으며 상세페이지가 나타날 URL주소도 생성해주었다. 이제 이것을 그대로 사용하여 상세페이지를 그려보자.

1. 상세페이지에서 보여줄 Card 컴포넌트에 사용할 정보를 내려준다.
2. useParams를 사용하여 path parameter 정보를 담고 있는 객체 를 가져온다.
   Router.js에서 /:id의 id값을 useParams가 객체에 담아 가져온다.
3. useEffect => fetch()을 사용해 데이터를 받아오는 주소의 마지막에 동적인 ${id}값을 대입해준다.
4. 받아온 정보를 set state를 통해 state에 담아 UI를 그려준다.

이로써 우리가 한 카드 컴포넌트를 클릭했을 때, 카드의 상세페이지로 넘어가고 정보가 화면에 나타나게되는 페이지이동이 가능해졌다.

---

6. ..?뭔가가 이상하다??

완성된 줄 알았지만 뭔가가 이상하다. 클릭해서 상세페이지로 넘어가면 클릭한 모습의 사진이 바로 나타나지않고 다른 사진에서 클릭한 모습의 사진으로 넘어가는 현상이 생겼다.
뭔가 부자연스러운 모습이였다.

7. 조건부 렌더링으로 해결하자

1. 어떠한 조건이 충족했을 때만 return 이하의 모습을 그려주면, 내가 원하는 모습의 사진만 나올 것이다.
2. monster의 이름이 있을 때만, return 이하의 모습을 그려주기로 했다.

return (
{monster.name && (
... <Card/>
 )};

---

8. 해결완료!

이제 다시 몬스터페이지로, 전과 후로 넘어가는 페이지네이션 버튼을 만들어 보자.

메인페이지로

1. 몬스터페이지로 이동하는 기능은 버튼을 눌렀을때,

const goToMonster = () => {
		navigate('/monsters');
	};

---

뒤로!

const movePreviousMonster = () => {
  navigate(`/monsters/detail/${Number(params.monsterId) - 1}`);
};

params.id는 string 값이다. string은 - 1를 할때, string값도 숫자라고 생각하여 연산이 가능하다. 하지만 +는 연산이 안되고 단순히 string 뒤에 값을 붙혀주기만 하기 때문에 Number로 변환 후 사용해야 한다.

앞으로!

const moveNextMonster = () => {	
  navigate(`/monsters/detail/${Number(params.monsterId) + 1}`);
};

---

9. ..? 왜 안넘어가고 뒤로 안가지..?

우리는 URL이 변할 때마다 데이터 fetching을 새로 해주어야한다.
이는 useEffect의 두번째 인자인 배열값에 기준값을 만들어주면 된다.
여기서 우리는 URL이 변화하는 값을 기준으로 삼아야하니까 params.monsterId를 배열 안에 넣어주어 URL이 변화할때 마다 바뀐 UI를 렌더링 해주는 것이다.

---

처음 접하는 편하면서도 혼란스러운 동적 라우팅을 더 이해하기 쉽게 순서를 정리한 글입니다.!