[React] URL parameter

🐫URL Parameter

• 똑같은 레이아웃 내에서 출력 내용 일부만 달라질 때 사용
  - 상품의 상세페이지(레이아웃은 같으나 어떤 상품인지에 따라 출력 내용이 달라짐)
• /detail/0, /detail/1, /detail/2 등

---

1. URL에 파라미터 지정 (/detail/:id)
2. 해당 라우터 컴포넌트에 props 전달
3. 해당 컴포넌트 내에서 useParams 임포트
4. useParams를 이용해 URL의 파라미터 가져오기
5. 해당 파라미터 사용

---

App.js

• Line 9
  - Route Path에서 /detail의 뒤쪽에 :id 라는 이름의 파라미터 붙이기
      [Path=”/detail/:id]
  - ProductDetail 컴포넌트에 상품 정보를 담고있는 products를 전달

---

ProductDetail.js

• Line 3
  - URL 내 파라미터를 사용하기 위해 useParams를 임포트
• Line 6
  - id 라는 이름의 파라미터를 useParams()를 이용해 가져오기
  - 괄호 내 변수 명은 URL에 지정한 파라미터 이름(:id) 와 일치해야함
• Line 12 ~ 14
  - 가져온 파라미터(id)를 이용해 정보 출력 (props.products[id]

• 기존의 ProductDetail 컴포넌트에서는 파라미터 값을 그대로 배열의 인덱스로 사용
  - 기존 배열이 다른 순서로 정렬되면 잘못된 상품 정보를 가져올 수 있음
• Line 7
  - array의 find() 함수를 이용해, 상품의 고유 id와 파라미터값을 매칭

Line 13 ~ 15
- 매칭된 상품을 저장한 변수 product를 이용하여 상품 정보 출력