[10분 테코톡] 🎁 브랜의 프론트엔드에서 Component란

Component란?

 

비행기는 200만 개의 부품으로 이루어져 있다. 비행기는 날개, 꼬리, 몸체 등으로 구분할 수 있고, 이러한 구분을 컴포넌트라고 생각해볼 수 있다.

 

 

 

​[ Component의 분리 ]

 

Atomic Design - 아토믹 디자인은 화학적 개념을 이용하여 컴포넌트를 분리하는 방법론 중 하나(총 5단계 구성)
Atoms(원자)	인터페이스를 구성하는 최소단위의 블록 (html 태그들이 원자에 해당)
Molecules(분자)	원자들을 하나의 단위로 동자시키는 UI 컴포넌트
Organisms(유기체)	유기체는 하나 이상의 책임을 갖거나 반복적인 원자, 분자 조합
Templates(템플릿)	컴포넌트들을 배치하는 레이아웃
pages(페이지)	실제 데이터가 템플릿에 전달되면 페이지가 완성됨

 

 

 

 

[ Component의 단점 ]

 

- 우선 키워드로는 기준, 사이드이팩트, 소요시간, 재사용성을 제시할 수 있는데, 각 단계를 나누는 기준이 모호해질 수 있다. - 각 단계를 분류하여 시간이 더 소요된다. - 5단계나 되는 계층 때문에 원자요소가 하나 변경되는 사소한 변경에도 사이드 이펙트가 커지게 된다. - 또한 화학적 비유가 적용되지 않는 템플릿과 페이지는 재사용이 되기 힘들다.

 

 

 

[ Component의 관리 ]

 

- 스타일 요소들이 많을 경우 변경할 때 디자인 시스템(Component와 Style을 관리하는 시스템)을 이용하여, 변경하게 되면 Style을 재사용의 용이 - 재약을 통해 디자인 시스템을 이용하는 사람이 올바른 방식으로 Component를 사용할 수 있도록 해준다. - 일관된 경험( Interface )를 제공 가능하며, Component들을 통합적으로 관리할 수 있게 된다.

 

 

 

---

 

 

< 영상 >

 

https://youtu.be/2C1tXVHu9XQ