컴포넌트 기반 구조

웹 애플리케이션이 점차 대형화되고 작업 범위가 넓어짐에 따라, 구조화해야 되는 필요성이 있다.

 

보통 웹 개발 시, 아래와 같이 HTML 문을 작성하고, 해당 오브젝트 별로 id를 지정해서, JS에서 이벤트들을 바인딩해주는 형태로 진행한다. 간단한 웹프로젝트라면 문제가 없지만, 대형 웹앱일경우, 수많은 js 를 만들어야하며 서로간에 경계선이 존재하지 않아, 무질서하게 다른 js의 이벤트들을 사용할 수 있게 된다.

Agular은 기본적으로 컴포넌트 기본 구조이다.

컴포넌트 기반구조에서는 웹 애플리케이션의 부분 부분을 컴포넌트로 구분한다. 이때 각 컴포넌트는 자신만의 클래스 혹은 태그를 통해 나타내지기 때문에, 세부적인 HTML의 나열이 아니라 컴포넌트 단위의 UI로 구성하게 된다.

특히 컴포넌트는, 컴포넌트별로 또 하위 컴포넌트들을 조합해 자체의 구조를 만들어가면서 점점 세부적이지만 지역적인 부분들로 구분되게 된다. 이렇게 되면 애플리케이션은 전체적으로 컴포넌트드르이 트리 형태로 구성된다.

 

이렇게 되면 트리의 각 단계마다 그 단계에서 보는 추상적인 단위로 애플리케이션을 보게 되기 때문에, 애플리케이션의 구조 파악이 쉬워지고 작업 단위도 자연스럽게 컴포넌트별로 분산되어 유지보수나 수정이 훨씬 용이하다.