앵귤러 기초(Angular basic) 27. 라우팅 파라미터 건네기

현재 페이지에서 다음 페이지로 이동할 때, 다음 페이지에 필요한 정보를 전달해야 될 경우가 많이 생깁니다.

라우팅 하면서 매개변수를 건네는 법에 대해 알아봅시다.

 

이번 포스트는 아래 내용을 다루고 있습니다.

1. 매개변수를 건네는 경로 설정
2. snapshot을 이용하여 URL에서 매개변수 가져오기
3. paramMap을 이용하여 URL에서 매개변수 가져오기

---

매개 변수 경로 설정

매개 변수를 경로에 전달하는 첫 번째 단계는 매개 변수로 경로를 정의하는 것입니다.

'movies/:id'와 같이 / : 후 표시자를 사용해서 매개변수를 정의할 수 있습니다.

그리고 템플릿에서 routerLink를 설정하고 필요한 매개변수를 전달합니다.

배열의 첫 번째 요소는 문자열 경로이고, 두 번째 요소는 매개변수의 값입니다.

라우터가 URL을 작성할 때 이 배열 요소를 사용하여 정의된 매개변수를 구성하게 됩니다.

 

브라우저에서 확인해 보겠습니다.

영화 제목을 클릭하면 아래와 같이 페이지 이동을 하게 되네요.

url도 하위 세그먼트가 영화 아이디로 바뀐 걸 볼 수 있습니다.

이제  URL에서 매개변수를 읽어와서, MovieDetailComponent에서 제대로 된 영화 상세 정보를 표시할 일이 남았습니다.

 

---

URL에서 매개변수 가져오기

매개변수를 가져오기 위해서는 라우터에서 제공하는 ActivatedRoute서비스를 이용합니다.

서비스의 인스턴스가 필요하므로, 생성자에서 의존성을 정의합니다.

route라는 private변수를 정의하였고, ActivatedRoute인스턴스를 할당하였습니다.

 

컴포넌트에서 매개변수를 읽는 방법은 두 가지가 있습니다.

1.snapshot이용

컴포넌트가 경로의 매개변수를 한 번만 읽어야 하는 경우는 snapshot을 사용하여 paramMap에 액세스하고 매개변수를 가져옵니다.

this.route.snapshot.paramMap.get('id');

스냅 샷은 한 시점에서 정보를 제공합니다. 컴포넌트를 표시하는 동안 경로가 변경되지 않을 때는 이 기술을 사용하게 됩니다.

 

MovieDetailComponent의 경우 route매개변수는 영화 id이므로 컴포넌트가 표시하는 영화를 정의하게 됩니다.

해당 매개 변수는 컴포넌트를 표시하는 동안 변경되지 않습니다.

영화 정보를 변경하기 위해서는 영화 상세 페이지를 떠나서 영화 목록 페이지에서 다른 영화를 선택해야 합니다.

이런 흐름을 생각해보면, MovieDetailComponent에서는 snapshot을 이용하여 매개변수를 읽어오는 것이 편리하겠네요.

 

2.paramMap을 구독

컴포넌트가 변경됨에 따라 매개 변수를 다시 취득해야 하는 경우에는 observable paramMap을 사용합니다.

this.route.paramMap.subscribe((params) => {
	console.log(params.get('id'));
});

매개변수가 변경될 때마다 알림을 받기 위해서는 Observable을 구독해야 합니다.

예를 들어 영화 상세 컴포넌트에서 다음 및 이전 버튼이 있는 경우 MovieDetail페이지를 벗어나지 않고도 경로가 변경될 수 있습니다.

이런 경우 paramMap Observable을 구독하면 경로의 매개변수가 변경될 때마다 화면에 변경해야 할 영화 데이터 id를 취득할 수 있습니다.

 

현재 MovieDetailComponent는 route 매개 변수를 한 번만 읽으면 되므로 스냅샷 방식을 사용해 코드에 적용해 보겠습니다.

OnInit훅에서 ActivatedRoute인스턴스를 route를 사용하여 경로정보의 스냅샷에 접근하고 paramMap에 액세스 합니다.

그런 다음 paramMap의 get메서드를 호출합니다. get을 호출할 때는 가져올 매개변수의 이름을 매개변수로 넣어줍니다. 위 경우 'id'에 해당합니다. 가져온 id를 Number로 바꿔주고, 타이틀에 id를 붙여 출력하도록 해주었습니다.

 

브라우저에서 확인해 보겠습니다.

이전 화면에서 건네받은 데이터를 잘 표시하고 있네요.

---

여기까지 수고하셨습니다.

다음 포스트에서는 템플릿의 RouterLink디렉티브가 아닌 컴포넌트 코드상에서 라우팅 하는 법에 대해 알아보겠습니다.