프론트엔드에서 Component란

컴포넌트란 전체의 부분이란 뜻을 가지고 있다. 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을

수행할 수 있도록 구성한 작은 기능적 단위를 말하며 모듈(module)이라고도 한다.

 

예를 들어 동체, 꼬리, 날개 등으로 이루어진 비행기는 200개 정도의 주요 부품으로 이루어져 있으며

이 200개의 주요 부품은 더 작은 부품으로 이루어져 1대의 비행기는 약 200만 개의 부품으로 이루어져 있다.

하나의 덩어리가 아닌 각 부분을 컴포넌트로 분리하여 독립적으로 구현하면 효율적인 설계가 가능하다.

 

과거의 웹사이트는 HTML 페이지만으로 구성되어 있어 유저의 액션에 대해 매번 새로운 HTML 페이지를

서버에서 내려주어야 했으며 페이지의 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 했다.

이처럼 하나의 덩어리였던 웹이 JavaScript를 통해 사용자와의 interation이 증가했으며 웹의 복잡도 또한

높아지기 시작하였다. 그에 따라 복잡한 웹을 작은 문제로 나누기 시작했으며 전체 페이지에 대한 문제는

작은 element 그룹에 대한 문제로 바뀌게 되었다. JavaScript를 통해 element 그룹을 효율적으로 관리할 수 있기

때문에 복잡한 웹을 구성하는 프론트엔드의 컴포넌트는 element 그룹을 반환하는 JavaScript 함수라고

정의할 수 있으며 컴포넌트를 통해 웹을 효율적으로 설계해 나갈 수 있게 되었다.

 

Atomic Design (화학적 개념을 이용하여 컴포넌트를 분리하는 방법론 중 하나로 5단계로 구성되어 있다.)

atoms(원자) - 유저 인터페이스를 구성하는 최소 단위의 블록으로 각 원자들은 고유한 특성을 가지고 있어

                       서로 조합하여 더 넓은 방식으로 사용될 수 있다.

molecules(분자) - 원자들을 하나의 단위로 동작시키는 UI 컴포넌트로 하나의 책임을 가진다.

organisms(유기체) - 원자, 분자 또는 유기체들의 조합으로 하나 이상의 책임을 가질 수 있고

                                 특정 영역을 차지하는 기준에 따라 조합할 수 있다.

templates(템플릿) - 원자, 분자, 유기체 단계의 컴포넌트들을 배치하는 레이아웃

pages(페이지) - 실제 데이터가 templates에 전달되면 페이지가 완성된다.

 

아토믹 디자인의 단점으로는 원자들이 결합되어도 반드시 분자가 되는 것은 아닐 수 있으며 각 계층으로

어떤 요소들을 분리해야 할지 기준이 모호하다. 또한 계층을 5단계로 분리하다 보면 많은 시간이 소요될 수 있고

5단계나 되는 계층 때문에 원자 요소 하나의 변화가 끼치는 사이드 이펙트가 커지게 되며 화학적 비유가 적용되지

않은 template와 page 단계는 재사용되기 어렵다.

 

 

출처)

https://www.youtube.com/watch?v=2C1tXVHu9XQ