지속가능한 컴포넌트를 향하여

📺 토스ㅣSLASH 22 - Effective Component 지속 가능한 성장과 컴포넌트

제품의 ‘변경’은 언제? => 고객의 니즈에 의해
그렇다면 우리는 변경을 예측해야 한다.
평소 개발하는 습관은 어떠한가? 규모가 커지면 적당히 분리..
“적당히”란? 명확한 기준을 만들기!

변경에 유연한 컴포넌트 만들기

1. Headless 기반 추상화
   • 변하는 것과 vs 상대적으로 변하지 않는 것 분리
     a. 데이터 추상화
     ex) 달력 - useCalendar 커스텀 훅을 만든다면
     - 일자들은 변경이 있는 데이터
     - 일~월 요일 UI는 동일
     → hooks로 모듈화하는 방식.. 이러한 패턴을 headless
     b. 인터랙션을 추상화
2. 한가지 역할만 하는 컴포넌트로 만들거나 그 조합으로 만들기
   ex) 드롭다운 - isOpen, 상태값들, 노출여부(Menu), 각 메뉴 아이템, ...
3. 도메인 분리
   • 도메인을 포함하는 것과 / 포함하지 않은 컴포넌트 분리
     ex) SelectFrameWork -> Select
     : 일반적인 인터페이스로 분리해야 컴포넌트의 역할을 이해하기 쉬움

Action Items

1. 인터페이스 먼저 고민
   • 인터페이스의 의도
   • 컴포넌트가 해야할 기능
   • 어떤 데이터를 다루고 있고 어떻게 표현되어 있는지
     => 변경할 때 파악해야하는 것들이라. 구현 자체보다 중요함
2. 컴포넌트를 나누는 이유
   • 분리함으로써 복잡도가 줄어드는지 / 바로 재사용 가능한지 / 꼭 분리해야하는 이유가 있는 건지
   • 미래의 나에게 도움이 될 것…!