앵귤러 기초(Angular basic) 26. 라우팅, 메뉴 만들기

라우팅 모듈에 계속해서 RouterLink를 사용해서 라우팅 하는 애플리케이션을 완성해 보겠습니다.

지난 포스트와  내용적으로 이어지니 참고해 주세요.

 

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

1. routerLink디렉티브를 이용한 메뉴 작성
2. router-outlet 디렉티브로 뷰 지정하기
3. 라우팅 작동 방식  정리

---

라우팅

라우팅을 통해 유저는 애플리케이션을 탐색합니다.

우리는 흔히 메뉴의 옵션, 링크, 이미지 또는 버튼 등을 클릭해서 애플리케이션(웹페이지)을 탐색하게 됩니다.

또는 URL 뒤에 연결된 URL 세그먼트를 입력하거나 해당 URL에 대한 북마크를 사용하거나 브라우저의 앞으로 또는 뒤로 단추를 누를 수도 있습니다.

 

개발자는 유저에게 라우팅을 하기 위해 어떤 행위를 해야 하는지 또 그것이 어떻게 보여줄지 결정해야 합니다.

예를 들어 링크가 있는 탐색 창을 표시할 수도 있고, 툴바나 이미지를 제공하거나, 내비게이션 메뉴를 만들 수도 있습니다.

 

라우팅 메뉴 만들기

애플리케이션을 탐색할 수 있게 AppComponent템플릿에 메뉴를 만들어 보겠습니다.

라우팅 메뉴

 

이제 브라우저에서 localhost:4200/을 입력하면 아래와 같이 나오게 됩니다.

이제 기존에 보였던 영화 리스트의 뷰는 보이지 않고, 최상위 컴포넌트(AppComponent)의 템플릿 내용만 표시되고 있네요.

또한 localhost:4200/welcome으로 주소가 바뀐 걸 볼 수 있습니다.

localhost:4200/로 들어갔는데 welcome으로 바뀐 이유는 경로 설정의 디폴트 설정을 welcome으로 지정했기 때문입니다.

 

이제 routerLink 디렉티브를 추가해서 각 a태그(앵커태그)를 클릭했을 시 이동할 경로를 설정해 보겠습니다.

routerLink 디렉티브

routerLink 디렉티브를 사용하면 앵귤러는 경로를 탐색하는 추가 기능이 있는 앵커태그를 제공해 줍니다.

routerLink 디렉티브에서는 배열을 반환하는 템플릿 표현식에 바인딩해야 합니다.

이 배열의 첫 번째 요소는 경로의 문자열입니다. 그리고 경로의 매개변수를 지정하기 위해 배열에 요소를 추가할 수 있습니다.

아직 경로에 매개변수가 필요 없으므로 경로의 문자열만 전달하였습니다.

 

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

해당 메뉴를 클릭 해면 주소는 바뀌지만 화면에 출력되는 것이 하나도 없습니다.

아직 라우팅 된 컴포넌트의 템플릿을 표시할 위치를 지정하지 않았기 때문입니다.

 

뷰 지정하기(router-outlet)

routerLink로 만들어진 앵커를 클릭하면 연관된 컴포넌트의 뷰가 표시되어야 합니다.

뷰를 표시할 위치는 어떻게 지정해야 할까요?

답은 router-outlet 디렉티브를 사용하는 것입니다.

<router-outlet></router-outlet>을 템플렛에 작성하면, 작성한 디렉티브 위치에 라우팅 된 컴포넌트의 뷰가 나타나게 됩니다.

 

코드를 추가해 보겠습니다.

router-outlet의 사용

이제 경로가 바뀔 때마다 연관된 컴포넌트가 표시될 것입니다.

 

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

 

라우팅이 잘 작동하네요!!🎉

---

개발자 도구에서 요소를 살펴보도록 하겠습니다.

유저가 애플리케이션을 탐색할 때 router-outlet 아래의 콘텐츠가 변경되어 라우팅 된 컴포넌트의 템플릿이 표시된 걸 확인해 볼 수 있습니다.

welcome화면

welcome 템플릿이 표시된 상태

movieList화면

movieList가 표시된 상태

---

라우팅 작동 방식 정리

이제 지금까지 해왔던 라우팅 작동방식을 정리해 보도록 하겠습니다.

라우터 작동 방식

1. 유저가 routerLink디렉티브를 사용하여 경로에 연결된 곳으로 이동하려 액션을 취합니다. routerLink는 링크 매개변수 배열을 사용하여 URL 세그먼트를 구성하게 됩니다.

 

2. 브라우저의 URL이 애플리케이션 URL과 구성된 URL세그먼트로 변경됩니다.

 

3. 라우터는 유효한 경로를 검색하고 일치 항목을 선택합니다.

그리고 라우터는 해당 경로와 관련된 컴포넌트의 인스턴스를 찾거나 만듭니다.

 

4.router-outlet디렉티브에 정의된 위치에 컴포넌트의 뷰가 삽입되고 페이지가 표시됩니다.

---

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

아직 라우팅의 여러 기술적인 부분이 남아있습니다. 다음 포스트에서 이어가도록 하겠습니다.

 

함께 읽으면 좋은 글🙃

앵귤러 기초(Angular basic) 25. 라우팅 모듈