프론트엔드에서 Component란

본 내용은 10분 테코톡 브랜님의 강의를 토대로 작성하였습니다.

1. 컴포넌트

컴포넌트의 사전적 의미

A part or element of a larger whole, especially a part of a machine or vehicle.

• 전체의 부분

컴포넌트의 존재 의의

• 무엇인가를 하나의 덩어리 만으로 구성한다면,
  • 높은 의존성을 가진다.
  • 재사용성이 낮다.
  • 규모가 큰 설계에 적용하기 어렵다.

2. 프론트엔드 컴포넌트

element group을 반환한는 JavaScript 함수

• 예전 웹 페이지의 html은 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 했다.
  • 비효율적
  • 하나의 덩어리
• AJAX등장 이후, 필요한 데이터만을 전달받고 일부분만 다시 그릴 수 있게 됨
  • 웹의 성격이 점점 더 동적으로 바뀌어감
• 자바스크립트로 인터렉션이 늘어나며, 웹의 복잡도 증가
• 복잡한 웹을 작은 것(element)으로 나누기 시작함
  • 자바스크립트를 통해 element 그룹을 효율적으로 관리 가능
• 부품을 이용하여 복잡한 기계를 만드는 것처럼 웹을 설계 가능

3. 컴포넌트 분리

Atomic Design

• 화학적 개념을 이용하여 컴포넌트를 분리하는 방법론
• Atoms: 유저 인터페이스를 구성하는 최소 단위의 블록, 각 원자들을 고유 특성을 가지고 있어서 서로 조합하여 넓은 방식으로 사용 가능
  • 하나의 책임을 가진다.
  • form, input, button
• Molecules: 원자들을 하나의 단위로 동작시키는 컴포넌트
  • 어떤 목적, 기능을 가지지 않았던 button, input, from이 결합하여 기능을 구현
• Organisms: 원자, 분자 또는 유기체들의 조합
  • 하나이상의 책임 이상의 가짐
  • 특정 영역을 차지하는 기준에 따라 조합
  • 메인 로고, 검색창, 내 정보보기 버튼이 존재하는 헤더영역
• Templates: 원자, 분자, 유기체 단계의 컴포넌트들을 배치하는 레이아웃

Atimoic Design 단점

• 기준
  • 어떤 기준으로 요소를 분리해야할지 모호
• 사이드 이펙트
  • 원자 요소 하나의 변화가 끼치는 사이드 이펙트가 커짐
• 소요시간
  • 많은 시간 소요
• 재사용성
  • Template, Page에서의 재사용성 떨어짐

4. 디자인 시스템

• 컴포넌트와 스타일을 관리하는 시스템

디자인 시스템의 이점

• 제약
• 일관된 경험
  • 여러 프로덕트에서 고객에게 브랜드에 일관된 인터페이스 제공 가능
• 지속성

Reference

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