Angular 동적 라우팅 vs 쿼리 파라미터

Angular로 웹 애플리케이션을 개발할 때 URL을 통해 데이터를 전달하는 방식은 크게 두 가지가 있습니다

• 동적 라우팅 (Route Parameter) – /user/:id
• 쿼리 파라미터 (Query Parameter) – /user?id=123

이 두 방식은 모두 특정 데이터를 기반으로 뷰를 렌더링할 수 있게 도와주지만, 각각의 사용 목적과 장단점이 뚜렷하게 다릅니다. 

 

 

 

---

 

1. 동적 라우팅 (Route Parameter)

// 예: /products/123
const routes: Routes = [
  { path: 'products/:productId', component: ProductDetailComponent }
];




// ProductDetailComponent.ts
ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const id = params.get('productId');
    this.loadProduct(id);
  });
}

장점

• SEO에 유리: URL이 구조적으로 깔끔해서 검색 엔진이 잘 인식
• 의미론적 URL: RESTful URL처럼 읽기 쉬움 (/user/123)
• 브라우저 히스토리에 잘 남음

단점

• 여러 값을 넘기기 복잡 (ex: /user/123/edit/true)
• 필수가 아닌 파라미터 처리 어려움

 

2. 쿼리 파라미터 (Query Parameter)

// 예: /products?productId=123&mode=edit
const routes: Routes = [
  { path: 'products', component: ProductDetailComponent }
];



// ProductDetailComponent.ts
ngOnInit() {
  this.route.queryParamMap.subscribe(params => {
    const id = params.get('productId');
    const mode = params.get('mode');
    this.loadProduct(id, mode);
  });
}

장점

• 다수의 파라미터 처리에 유리: 검색 필터, 페이지네이션 등에 적합
• 선택적 파라미터 쉽게 처리 가능
• 값 변경에 유연: queryParams 변경만으로 뷰 리렌더링 가능

단점

• SEO 측면에서 덜 유리
• URL이 복잡하고 읽기 어려울 수 있음 (?filter=a&page=2&order=desc)

 

---

 

 

비교 표

항목	동적 라우팅 (:id)	쿼리 파라미터 (?id=123)
대표 용도	상세 페이지 (e.g. 상품, 유저)	검색, 필터, 페이지 등 UI 제어
SEO 적합성	우수	낮음
URL 의미 표현	자연스럽고 명확	다소 복잡
파라미터 개수	보통 1~2개 이하	여러 개 가능
값 변경 후 URL 갱신	재라우팅 필요	router.navigate로 즉시 가능
예시	/posts/42	/posts?page=2&sort=desc

 

 

---

어떤 상황에 어떤 걸 써야 할까?

동적 라우팅을 써야 하는 경우

• 특정 리소스를 ID 기반으로 불러올 때: /product/:id, /user/:userId
• RESTful URL이 필요할 때
• 해당 페이지가 독립적인 상세 페이지일 때

쿼리 파라미터를 써야 하는 경우

• 검색/필터 조건이 많을 때
• 리스트 페이지에서 URL 상태 공유가 필요할 때
• 뷰 상태(예: 모달 열기 여부)를 URL로 제어하고 싶을 때

 

---

 

 

실제 사용 예시 

 

상품 리스트 검색 페이지

// URL 예시: /products?category=shirt&sort=price&page=2
router.navigate([], {
  relativeTo: this.route,
  queryParams: { category: 'shirt', sort: 'price', page: 2 },
  queryParamsHandling: 'merge'
});

• 검색 조건이 많고, 사용자가 페이지를 리프레시하거나 공유해도 같은 조건을 유지하려면 쿼리 파라미터 사용이 유리합니다.
  
  

 

사용자 상세 페이지

// URL 예시: /user/123
this.route.paramMap.subscribe(params => {
  const userId = params.get('id');
  this.userService.getUserById(userId).subscribe(...);
});

• 사용자를 식별해서 상세 정보를 보여주는 구조에서는 :id 기반의 동적 라우팅이 명확하고 직관적입니다.
  
  

---

 

• 상세/ID 기반 페이지 → 동적 라우팅
• 상태/검색 조건 제어 → 쿼리 파라미터

둘을 조합해서 사용할 수도 있습니다. 예: /user/:id?tab=profile