컴포넌트란?
컴포넌트의 정의
컴포넌트는 전체 시스템을 구성하는 하나의 부품 혹은 모듈이다. 프론트엔드에서는 UI를 구성하는 요소를 의미한다.
역사적 배경
과거의 웹 페이지는 데이터 수정 요청 시마다 서버에서 새로운 HTML 페이지를 받아오는 방식이었다. 이는 사용자 경험을 저하시켰고, 재사용성과 유지보수에 어려움을 초래했다. AJAX 방식의 등장으로 이러한 문제를 해결하고, 웹을 컴포넌트 단위로 구분할 수 있게 되었다.
컴포넌트의 중요성
프론트엔드에서 컴포넌트를 잘 만들면 유지보수가 용이하고, 재사용성이 높아진다. 이는 결국 개발 효율성을 높이고, 사용자 경험을 개선한다.
컴포넌트 ‘잘’ 만들기
Headless 컴포넌트
Headless 컴포넌트는 UI를 보여주는 방법(Head)과 데이터를 다루는 로직(Body)을 분리하여 재사용성을 높이고, 부수효과를 최소화하기 위해 고안된 프로그래밍 패턴이다.
패턴 소개
Compound Component 패턴
- 컴포넌트 내부에서 공유할 상태를 Context API에 정의하고, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달한다.
- 예)
InputWrapper와 그 하위의input및label컴포넌트를 통해 데이터를 공유한다.
Function as Children Component 패턴
- 자식 컴포넌트로 함수가 들어가고, 부모 컴포넌트에서 데이터 로직을 정의하여 매개변수로 자식 컴포넌트에 전달한다.
- 예)
InputHeadless컴포넌트에서 데이터 로직을 정의하고, 자식 컴포넌트에서 해당 로직을 사용한다.
Custom Hook 패턴
- 데이터 로직을 Custom Hook으로 분리하여 필요할 때마다 이를 호출하여 사용한다.
- 예)
useInput이라는 Custom Hook을 정의하여 다양한 컴포넌트에서 재사용한다.
Headless 컴포넌트는 데이터 로직과 UI 로직을 분리하여 재사용성을 높이고 유지보수를 용이하게 만든다. 이 개념은 모든 상황에서 적용될 필요는 없지만, 관심사의 분리가 필요할 때 유용하게 사용할 수 있을 것 같다.