const { coinId } = useParams<RouteParams>();
>>>
<Switch>
<Route path={`/:coinId/price`}>
<Price />
</Route>
<Route path={`/${coinId}/chart`}>
<Chart />
</Route>
</Switch>:coinId === ${coinId}
🚀 React Router 동적 경로 완전 이해하기
✅ 1. 핵심 요약
:coinId= URL의 빈칸(패턴 정의)${coinId}= 빈칸에 실제로 들어가는 값
두 개념은 비슷해 보이지만 의미와 쓰임새가 다릅니다.
✅ 2. 구체적 차이
| 구분 | :coinId | ${coinId} |
|---|---|---|
| 역할 | URL에서 가져올 빈칸 | 가져온 값을 넣는 문자열 |
| 사용 시기 | Route 경로 등록 시 | 링크, 동적 경로 생성 시 |
| 예 | /:coinId/price | /bitcoin/chart |
| 특징 | 어떤 값이 와도 작동 | 정확히 일치해야 작동 |
✅ 3. 실전 예제 흐름
1️⃣ 경로 패턴 등록 (:coinId)
<Route path="/:coinId/price">
<Price />
</Route>- URL
/bitcoin/price,/eth/price등 모두 작동 coinId값은useParams()로 꺼낼 수 있음
2️⃣ 경로에서 coinId 값 가져오기
const { coinId } = useParams();URL: /bitcoin/price→coinId = 'bitcoin'으로 할당됨
3️⃣ 링크 생성 시 ${coinId}
<Link to={`/${coinId}/chart`}>차트 보기</Link>coinId = 'bitcoin'이면- 링크는
/bitcoin/chart로 생성
4️⃣ 고정 경로 등록 (${coinId})
<Route path={`/${coinId}/chart`}>
<Chart />
</Route>- URL 이 정확히
/bitcoin/chart일 때만 작동
✅ 4. 한눈에 보는 동작 흐름
사용자 URL 입력
↓
/bitcoin/price 접속
↓
<Route path="/:coinId/price"> 작동
↓
useParams() → coinId = 'bitcoin'
↓
<Link to={`/${coinId}/chart`}> → '/bitcoin/chart' 생성
↓
클릭 시 '/bitcoin/chart' 이동
↓
<Route path={`/${coinId}/chart`}> 작동✅ 5. 외워두면 좋은 문장
:coinId는 “URL의 빈칸”,${coinId}는 “빈칸에 넣는 값”.
이 문장만 기억하면 앞으로 Route 등록과 링크 생성이 헷갈리지 않습니다.
✅ 6. 실전 실수 방지 TIP
✅ 동적 경로 등록 시: /:coinId/price
✅ 링크/네비게이션 생성 시: /${coinId}/chart
YOLO