Skip to main content

커스텀 컴포넌트 API 레퍼런스

커스텀 컴포넌트 개발에 사용할 수 있는 모든 API에 대한 자세한 설명입니다.

커스텀 컴포넌트 기본 타입​

CustomComponentRenderProps​

모든 커스텀 컴포넌트는 CustomComponentRenderProps 타입을 통해 프로퍼티를 받습니다:

import { CustomComponentRenderProps } from '@hops/custom-component';

interface OwnProps {
  // 사용자 정의 프로퍼티
  label: string;
  placeholder: string;
}

function MyComponent(props: CustomComponentRenderProps<OwnProps>): ReactElement {
  // 컴포넌트 구현
}

CustomComponentRenderProps는 사용자가 정의한 프로퍼티를 포함하며, 아래의 추가적인 내부 프로퍼티도 포함할 수 있습니다:

  • name: string: 컴포넌트의 이름
  • isHidden: boolean | undefined: 컴포넌트가 숨겨진 상태인지 여부

훅(Hooks)​

useComponentState​

컴포넌트의 상태를 관리하고 외부에서 접근 가능하게 만드는 훅입니다.

타입 시그니처:

function useComponentState<T>(name: string, initialValue: T): [T, (value: T) => void];

매개변수:

  • name: 상태의 고유 식별자 (문자열)
  • initialValue: 초기값

반환값:

  • 현재 상태값과 상태를 업데이트하는 함수가 포함된 배열

사용 예시:

const [value, setValue] = useComponentState<string>('inputValue', '');
const [numberValue, setNumberValue] = useComponentState<number>(10, '');

// 상태 업데이트
setValue((value) => '새로운 값');
setNumberValue((value) => value + 1);

useLogger​

컴포넌트 내에서 로깅을 위한 훅입니다. 개발 및 디버깅에 유용합니다.

타입 시그니처:

function useLogger(): Logger;

interface Logger {
  trace(message: string): void;
  debug(message: string): void;
  info(message: string): void;
  warn(message: string): void;
  error(message: string): void;
}

반환값:

  • 로깅 메서드를 제공하는 Logger 객체

사용 예시:

const logger = useLogger();

// 로그 출력
logger.trace('상세한 로그 메시지');
logger.debug('디버그 메시지');
logger.info('정보 메시지');
logger.warn('경고 메시지');
logger.error('에러 메시지');

지원되는 라이브러리 및 버전​

커스텀 컴포넌트에서는 다음과 같은 라이브러리들을 사용할 수 있습니다:

라이브러리버전설명
React18.2.0UI 컴포넌트 라이브러리
React DOM18.2.0React의 DOM 렌더링 라이브러리
@hops/design-system-Hops 디자인 시스템 컴포넌트
@hops/custom-component-커스텀 컴포넌트 API
note

다른 외부 라이브러리를 사용해야 할 경우 Hops팀(contact@hopsoffice.com)에 문의하세요.