Refactor(select): Select 컴포넌트를 제어 혹은 비제어컴포넌트로 스위칭이 가능하도록 수정

[juchanhwang]

주요 기능

• Select 컴포넌트가 제어 혹은 비제어 컴포넌트로 스위칭이 가능하도록 수정
• 비제어 및 제어 상태 값을 반환하는 useControllableState 훅 추가
  • headlessUI 라이브러리의 useControllable훅을 참고하였습니다.

제어 컴포넌트:

• 부모 컴포넌트에서 상태를 관리하는 방식
• 자식 컴포넌트들끼리 상태를 공유(의존성)되고 있으면 부모 컴포넌트에서 상태를 관리해야한다.
• 동적인 UI를 제공할 수 있다
• 상태가 바뀔 때 상태와 의존성이 없는 모든 컴포넌트가 �re-rendering된다.

비제어 컴포넌트

• 자식 컴포넌트에서 상태관리를 하는 방식
• 상태가 바뀔 때 바뀐 컴포넌트만 re-rendering이 일어나고 나머지 컴포넌트는 re-rendering되지 않는다.
• 동적인 UI변화가 필요없을 때 유용하다.
• Form을 submit하는 시점에 데이터를 불러와서 값을 처리한다.

사용 방법

• useControllableState

{ value, onChange } = useControllableState(props.defaultValue, props.value, props.onChange)

• Select Component 제어컴포넌트 형식

const [value, setValue] = setState();

return (
  <Select value={value} onChange={setValue}>
    <Select.Trigger>Trigger</Select.Trigger>
    <Select.Options>
      <Select.Option item="1">Option 1</Select.Option>
      <Select.Option item="2">Option 2</Select.Option>
      <Select.Option item="3">Option 3</Select.Option>
    </Select.Options>
  </Select>
)

• Select Component 비제어컴포넌트 형식

const ref = useRef()
const handleSubmit = (e: Event) => {
  e.preventValue();
  console.log(ref.current.value);
}

<from onSubmit={handleSubmit}>
    <Select ref={ref}>
      <Select.Trigger>Trigger</Select.Trigger>
      <Select.Options>
        <Select.Option item="1">Option 1</Select.Option>
        <Select.Option item="2">Option 2</Select.Option>
        <Select.Option item="3">Option 3</Select.Option>
      </Select.Options>
    </Select>
</form>

• Select Component 비제어컴포넌트 형식 (React-hook-form)

const {register, handleSubmit} = useForm();

const onSubmit = (data) => {
  console.log(data);
}

<from onSubmit={handleSubmit(onSubmit)}>
    <Select {...register('select')}>
      <Select.Trigger>Trigger</Select.Trigger>
      <Select.Options>
        <Select.Option item="1">Option 1</Select.Option>
        <Select.Option item="2">Option 2</Select.Option>
        <Select.Option item="3">Option 3</Select.Option>
      </Select.Options>
    </Select>
</form>

래퍼런스

• HeadlessUI 라이브러리, useControllable
• 제어 컴포넌트와 비제어 컴포넌트의 차이점
• 비제어 컴포넌트
• 제어 컴포넌트