[Angular] 컴포넌트와 모듈의 차이

[Angular] 컴포넌트와 모듈의 차이

컴포넌트와 모듈의 차이

Angular로 TickTock을 만들면서, 어떻게 보면 아주 기본적인 개념인 '컴포넌트(Component)'와 '모듈(Module)'의 차이가 정확하게 무엇인지 헷갈리는 부분이 있었습니다. 그래서 기본부터 찬찬히 다잡고 나가자는 마음으로 앵귤러 내에서의 컴포넌트와 모듈의 차이를 정리하고자 합니다.

 

컴포넌트란?

Angular 내에서 컴포넌트는 화면을 구성하는 뷰를 생성하고 관리하는 역할을 합니다. 이때, 컴포넌트는 하나의 독립적인 기능을 수행할 수 있도록 설계하는 것이 좋습니다. 하나의 기능을 수행하도록 분할된 컴포넌트를 조립할 수 있도록 앱을 구성하면, 재사용과 유지보수에 좋기 때문입니다.

Angular는 컴포넌트 기반의 프레임워크이기 때문에 각 컴포넌트에는 '부모-자식' 관계가 형성이 됩니다. 이렇게 형성된 부모-자식 관계를 바탕으로 데이터나 이벤트의 공유가 이루어지게 됩니다.

 

모듈이란?

Angular 내에서 모듈은 관련있는 구성요소(Component, Directive, Pipe, Service 등)을 하나로 묶어 구성할 수 있습니다. 또한, 모듈은 여러 모듈을 조합하여 사용할 수도 있습니다. Angular는 적어도 하나의 모듈(루트모듈: app.moduel.ts)은 가지고 있어야 하며, 더 많은 모듈로 구성할 수도 있습니다.

즉, 모듈은 컴포넌트의 상위개념입니다. Angular는 컴포넌트 기반의 프레임워크이지만, 모듈들의 조합이라고도 할 수 있습니다.

이때, 주의해야 할 점은 모듈 또한 컴포넌트처럼, 결합을 최소화하고 모듈의 응집성을 높여 재사용과 유지보수에 용이한 구조를 만드는 것이 좋습니다.

 

TicTock 프로젝트를 통한 이해

앵귤러 파일 구조

TicTock 프로젝트의 구조를 바탕으로 이해해보겠습니다.
루트 컴포넌트인 app을 살펴보면, html, scss(css), spec.ts, ts로 이루어져 있습니다. 각 역할을 간단하게 정리하면 아래와 같습니다.

• html: 뷰 생성
• scss(css): 뷰 꾸미기
• ts: 뷰 관리
• spec.ts: 소스 파일의 단위 테스트를 위한 파일(뒷내용에서는 생략하겠습니다.)

 

이 파일들이 각 컴포넌트를 구성하여 뷰를 생성하고 관리하는 역할을 하는 것입니다. section 컴포넌트도 동일하게 구성이 되며, ng g c 명령어로 생성된 컴포넌트들은 모두 같은 구성을 가지고 있게 됩니다.

모듈은 이러한 컴포넌트, 모듈 외에도 서비스 등을 하나로 묶어 구성하고 있습니다.

app.module.ts

app.module.ts(루트모듈)을 살펴보면 하위의 모듈들을 인식할 수 있도록 임포트한 것을 볼 수 있다. 특히, LayoutModule의 경우에는 FooterComponent와 HeaderComponent를 export하고 있기 때문에 header와 footer도 가져올 수 있습니다.

section.module.ts

이렇게 모듈은 관련 있는 기능들을 묶어 재사용과 유지보수를 용이하기 위해 사용됩니다. 애플리케이션이 커질수록 하나의 모듈에 여러 기능이 혼재되어 있을 수 있는데, 이때는 관리가 어려워지고 충돌이 발생할 수 있으므로 모듈을 분리하여 관리하는 것이 좋습니다.

 

마치면서

실습을 하면서 '왜 모듈을 만드는거지?'라는 의문에 빠지고 즉시 해결하지 못해 기능을 확장시킬 때 모듈 개념을 활용하지 못한 것이 아쉽다는 생각이 들었습니다. 그래도 모듈을 왜 사용하는 것인지, 컴포넌트와 모듈이 무엇이 다른 것인지에 대해 알게 된 것 같습니다.

 

잘못된 내용이나 개선할 사항이 있다면 댓글로 남겨주시면 감사하겠습니다:)