Numeric Spinner

NumericSpinner 컴포넌트는 정수 입력을 쉽게 처리할 수 있도록, 숫자를 증감시키는 버튼을 제공해요. 키보드 없이 숫자를 입력하거나 수정할 때 사용해요.

사용법

입력값 관리

입력값을 외부에서 관리하기

NumericSpinner 컴포넌트의 입력값을 외부에서 관리하려면, number, onNumberChange 속성을 함께 사용하세요. number는 컴포넌트에 현재 값을 제공하고, onNumberChange는 입력값이 바뀔 때 호출되는 함수예요.

function Controlled() {
  const [value, setValue] = React.useState(0);

  return (
    <NumericSpinner
      size="large"
      number={value}
      onNumberChange={(number) => {
        setValue(number);
      }}
    />
  );
}

입력값을 내부에서 관리하기

NumericSpinner 컴포넌트의 입력값을 내부에서 관리하려면, defaultNumber 속성에 값을 설정하세요. 설정한 값이 초기 입력값이 되고 이후 입력값의 변경은 NumericSpinner 컴포넌트 내부에서 처리돼요. 이 방식은 외부에서 값을 따로 관리할 필요가 없을 때 적합해요.

<NumericSpinner size="large" defaultNumber={0} />

크기 변경하기

NumericSpinner 컴포넌트의 크기를 변경하려면 size 속성을 사용하세요. 지원되는 크기는 small, medium, large가 있어요.

<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
  <NumericSpinner size="tiny" defaultNumber={0} />
  <NumericSpinner size="small" defaultNumber={0} />
  <NumericSpinner size="medium" defaultNumber={0} />
  <NumericSpinner size="large" defaultNumber={0} />
</div>

비활성화하기

NumericSpinner 컴포넌트를 비활성화하려면 disable 속성을 사용하세요. 비활성화된 NumericSpinner 컴포넌트는 버튼을 클릭해도 숫자가 변하지 않아요.

<NumericSpinner size="large" defaultNumber={0} disable />

접근성

NumericSpinner 컴포넌트는 기본적으로 접근성을 지원하는 여러 속성을 포함하고 있어요. 이 속성들은 스크린 리더 사용자들이 컴포넌트를 명확하게 이해하고 상호작용할 수 있도록 도와줘요.

추가로 지원해야 하는 접근성

기본적인 접근성 제공 외에도, decreaseAriaLabel과 increaseAriaLabel props를 사용해서 더 구체적인 상황에서 사용자 경험을 개선할 수 있어요. 예를 들면 이 props들은 기본값으로 "빼기", "더하기"로 설정되어 있지만, 상황에 따라 의미가 달라지면 반드시 변경해야 해요. 예를 들어 상품 수량과 관련된 UI에서 사용될 때, 다음과 같이 라벨의 값을 바꿔서 버튼의 기능을 더 명확하게 설명할 수 있어요.

<NumericSpinner
  number={value}
  onNumberChange={setValue}
  decreaseAriaLabel="상품 수량 줄이기"
  increaseAriaLabel="상품 수량 늘리기"
/>

이렇게 적절한 aria-label을 제공하면, 스크린 리더 사용자들이 버튼의 목적을 정확히 이해하고 사용할 수 있어요. 상황에 맞게 명확한 레이블을 제공하는 것이 접근성 향상에 매우 중요해요.

인터페이스

NumericSpinnerProps