앵귤러 기초(Angular basic) 32. 공유 모듈(shared module)

공유 모듈을 만들고 모듈에서 이용해 보도록 하겠습니다.

 

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

1. 공유 모듈의 목적
2. 공유 모듈 정의하기
3. 공유 모듈 작성하기

---

공유 모듈의 목적

공유 모듈의 목적은 일반적으로 사용되는 기능 조각을 하나의 모듈로 정리하여 공유 모듈을 사용하는(import하는) 모든 모듈에서 사용할 수 있도록 내보내는 것(export) 입니다.

이를 통해 재사용 가능한 컴포넌트와 외부 모듈을 선택적으로 취합하여 통합 편의 모듈로 다시 export할 수 있습니다.

공유 모듈을 만들려면 모듈 파일인 SharedModule을 정의하고 공유된 조각이 이 모듈에 오도록 응용 프로그램의 조각을 재구성해야 합니다.

 

공유 모듈(Shared Module) 정의

공유 모듈을 사용하기 전의 기능 모듈인 MovieModule은 아래와 같이 정의되어 있습니다.

MovieModule

MovieModule에서 관리하고 있는 StarScoreComponent나 ConvertPipe는 영화 모듈의 기능이라기 보단 어플 전체의 공통된 기능이고, 이 기능들은 다른 모듈에서도 충분히 사용 가능한 것들입니다. 또한 Module이라면 공통으로 사용될만한 CommonModule도 import하고 있네요. 이러한 것들을 통합해서 SharedModule로 관리하도록 정의해 보겠습니다.

 

아래의 그림과 같이 Shard Module을 정의하였습니다.

SharedModule 구성

StarScoreComponent과 ConvertPipe에서 CommonModule을 필요하므로 SharedModule에 imports하였습니다. FormsModule은 SharedModule안에 선언되어 있는 컴포넌트에서 필요로 하지 않기 때문에 imports 하지 않습니다. 만약 StarScoreComponent가 양방향 바인딩을 사용했거나 여기에 추가된 다른 컴포넌트가 FormsModule의 기능을 사용했다면 FormsModule도 가져와야 합니다. 그리고 공유 모듈의 역할을 하기 위해 공유가 필요로 한 기능들을 전부 exports하였습니다.

 

 

---

공유 모듈 작성

이제 SharedModule의 정의를 내렸으니 정의한 내용을 바탕으로 공유모듈을 작성해 보겠습니다.

먼저 앵귤러CLI를 이용하여, 모듈 클래스를 작성합니다.

ng g m shared/shared --flat

커맨드 입력 후 아래와 같이 파일이 생성되었습니다.

생성된 파일을 바탕으로 아래와 같이 수정하였습니다.

공유하고 싶은 컴포넌트를 선언하였고, 컴포넌트들에서 필요한 모듈을 imports배열에 넣어주었습니다.

exports 배열은 SharedModule에서 import하는 모든 모듈(예의 CommonModule)과 SharedModule이 공유하는 내용을 정의합니다.  위 코드에서는 StartScoreComponet와 ConvertPipe를 exports 배열에 넣어주었는데, 이렇게 하면 SharedModule을 import하는 모듈의 컴포넌트에서 사용할 수 있습니다.

CommonModule 및 FormsModule을 다시 exports배열 안에 넣어줌으로, SharedModule을 가져오는 모든 모듈에서 해당 디렉티브 및 기타 기능을 사용할 수 있도록 합니다.

여기서 모듈을 먼저 import하지 않아도 export할 수 있다는 것을 알아두세요.

 

SharedModule 사용하기

만든 SharedModule을 기능 모듈(feature module)인 MovieModule에서 가져와서 사용하도록 하겠습니다.

MovieModule에서는 SharedModule을 imports배열에 넣어주었고, SharedModule로 인해 필요 없어진 StarScoreComponent, ConverPipe, CommonModule, FormsModule을 삭제해 주었습니다.

 

이제 SharedModule에는 우리가 공유하고 싶은 부분만 포함하게 되었고 SharedModule을 사용하는 MovieModule의 코드도 깨끗해진 것 같습니다. 애플리케이션에 기능을 추가할 때 SharedModule 및 향후 기능 모듈을 재사용할 수 있습니다.

---

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

앵귤러 기초 포스팅이 거의 끝나가는 것 같네요.

소스 코드를 원하시는 분은 댓글로 남겨주시면 공유해 드리도록 하겠습니다.