변경에 유연한 컴포넌트에 대하여

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

2차 과제를 같이 진행한 민승님께서 해당 영상을 추천해주셨다.
마침 3차 과제가 select 박스 구현하기라서 미리 select를 만들어 봤었다. 영상 속의 select와 너무 달라서 놀랐다. 내가 좀 하드코딩하는 편이라서 추상화나 재사용성을 고려해야하는 법을 익혀야하는데 참고하기 매우 좋은 영상이었다.

Headless 컴포넌트

UI 부분과 데이터 관리 부분을 분리하여 UI 부분을 제거한 컴포넌트
데이터를 추상화 , 모듈화 -> hooks로 만들어서 재사용성을 늘린다.

상호작용 부분도 UI와 분리하여 모듈화 -> hooks로 만들어서 재사용성을 늘린다.
(꼭 모듈화 hooks로 만들라는 건 아니다)

이 과정으로 컴포넌트가 한가지 역할만 맡을 수 있도록 만들어준다.

action point

1. 인터페이스 먼저 고민해보기

• 의도가 무엇인가?
• 이 컴포넌트의 기능은 무엇인가?
• 어떻게 표현해야하는가?

2. 컴포넌트를 나누는 이유

• 컴포넌트를 분리하면 실제로 복잡도를 낮추는가
• 컴포넌트를 분리하면 재사용 가능한 컴포넌트인가