프론트엔드에서 컴포넌트

1. 컴포넌트

1) "전체의 부분"

200개 정도의 주요 부품이 있는 비행기(동체, 꼬리, 날개 등..)
=> 더 작은 부품으로 나누어짐
=> 효율적인 설계 가능

2) 컴포넌트라는 구성이 없으면?

하나의 덩어리로 만들어야 함
이 때의 단점,

• 반복해서 사용 X
• 재사용 X
• 복잡도가 높은 규모가 큰 설계 X

2. 프론트엔드 컴포넌트

1) 과거의 웹사이트

HTML 페이지 하나로 구성됨
유저의 액션에 대해 매번 새로운 HTML 페이지를 서버에서 내려줌
=> 페이지의 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 함(비효율적)

옛날 네이버 페이지

=> 매우 정적이고 간단함
=> 하나의 덩어리

오늘날 웹

1990년대 후반에 AJAX가 등장하면서 웹의 변화 시작
필요한 데이터만 전달, 원하는 부분만 랜더

• 사용자의 인터렉션 증가
• 웹의 복잡성 증가
  => 복잡한 웹을 작게작게 나누기 시작

2) 리액트 컴포넌트 구성 예시

"프론트엔드의 컴포넌트란 element group을 반환하는 js 함수"

3. 컴포넌트 분리

Atomic Design

원자 => 분자 => 유기체 => 템플릿 => 페이지
인터페이스 설계에 대한 화학적 접근

• 원자
  : 물질을 구성하는 최소단위의 입자
  유저 인터페이스를 구성하는 최소단위의 블록
  (form, input, button,,,)
  

• 분자
  : 원자들을 하나의 단위로 동작시키는 컴포넌트
  컴색을 하기 위한 UI 컴포넌트가 됨
  재사용 가능
  

• 유기체
  : 원자, 분자 또는 유기체의 조합
  하나 이상의 책임 가짐
  특정 영역을 차지하는 기준에 따라 조합
  (헤더, 푸터 등)
  

• 템플릿
  : 화학적 비유 없음
  원자 분자 유기체 단계의 컴포넌트를 배치하는 레이아웃
  

• 페이지
  : 화학적 비유 없음
  빈 템플릿에 데이터를 합치면 페이지
  

Atomic Design에 관한 좋은 블로그가 있어 첨부.
https://velog.io/@teo/Atomic-Design-Pattern