path의 콜론 이름이 useParams 객체의 키가 된다
/product/:id에서 :id는 주소 조각을 담을
이름입니다. 실제 URL이 /product/456이면 컴포넌트는
{id: "456"}을 기준으로 데이터와 화면 분기를 고릅니다.
| 구간 | 입력 값 | 컴포넌트에서 보는 값 | 점검 기준 |
|---|---|---|---|
| Route path | /product/:id |
키 이름은 id
|
path 이름과 구조 분해 이름 일치 |
| URL match | /product/456 |
id = "456"
|
문자열 값이라 숫자 변환 여부 확인 |
| data lookup | 상품 목록 또는 API | id로 상세 데이터 선택 | 없는 id와 로딩 상태 처리 |
| render branch | 조회 성공 또는 실패 | 상세 화면 또는 안내 화면 | 라우트 매치와 데이터 없음 구분 |
name
:id와 useParams().id 이름이 같아야
합니다.
string
params 값은 문자열이므로 숫자 비교 전에 변환을 확인합니다.
empty
라우트는 맞았지만 데이터가 없는 경우를 별도로 처리합니다.
scope
컴포넌트가 라우터 안에서 렌더링되는지 확인합니다.