Skip to main content

커스텀 컴포넌트 개요

커스텀 컴포넌트란?​

커스텀 컴포넌트는 기본으로 제공되는 컴포넌트만으로는 구현하기 어려운 복잡하고 특별한 UI를 직접 구현할 수 있는 기능입니다. 리액트(React) 기반으로 직접 컴포넌트를 작성하고, 다른 기본 컴포넌트와 동일하게 페이지에서 사용할 수 있습니다.

왜 커스텀 컴포넌트가 필요한가요?​

기본 컴포넌트는 다양한 용도로 활용할 수 있지만, 특정 비즈니스 요구사항을 완벽하게 충족시키기 어려울 수 있습니다. 다음과 같은 경우에 커스텀 컴포넌트가 필요합니다:

  • 특별한 인터랙션이 필요한 경우: 복잡한 사용자 인터랙션이 필요한 UI를 구현할 때
  • 특화된 입력 컴포넌트: 특정 비즈니스 요구에 맞는 데이터 입력 방식이 필요할 때
  • 브랜드 일관성: 기업 브랜드에 맞춘 맞춤형 UI 컴포넌트를 구현할 때
  • 복잡한 레이아웃: 여러 컴포넌트를 조합한 복잡한 레이아웃이 필요할 때

커스텀 컴포넌트 특징​

커스텀 컴포넌트는 다음과 같은 특징을 가지고 있습니다:

  • React 기반: 익숙한 React 컴포넌트 작성 방식을 그대로 사용합니다.
  • 상태 관리: useComponentState 훅을 이용하여 컴포넌트의 상태를 관리하고 외부에서 접근할 수 있습니다.
  • 쉬운 테스트: 컴포넌트 에디터에서 바로 결과를 확인하고 테스트할 수 있습니다.
  • 재사용성: 한번 만든 커스텀 컴포넌트는 여러 페이지에서 재사용할 수 있습니다.

시작하기​

커스텀 컴포넌트를 만들기 위해서는 React 기본 지식이 필요합니다. 아래 문서들을 통해 커스텀 컴포넌트 작성 방법과 API에 대해 자세히 알아보세요:

info

커스텀 컴포넌트는 React와 TypeScript 지식을 활용하여 더 효과적으로 작성할 수 있습니다.