Function useDropdown

드롭다운의 상태와 동작을 관리하는 커스텀 훅입니다.

Example

const MyDropdown = () => {
  const {
    isOpen,           // 드롭다운의 열림/닫힘 상태
    focusedIndex,     // 현재 포커스된 옵션의 인덱스
    toggleDropdown,   // 드롭다운 토글 함수
    handleOptionClick,// 옵션 클릭 핸들러
    dropdownRef,      // 드롭다운 요소의 ref
    handleOptionKeyDown // 옵션 키보드 이벤트 핸들러
  } = useDropdown({
    shortcutKey: 'Q',
    handleChange: (value) => console.log(value),
    options: ['옵션1', '옵션2', '옵션3']
  });

  return (
    <div ref={dropdownRef}>
      <button onClick={toggleDropdown}>
        {isOpen ? '닫기' : '열기'}
      </button>
      {isOpen && (
        <ul>
          {options.map((option, index) => (
            <button
              key={option}
              ref={(el) => (optionRefs.current[index] = el)}
              data-focused={index === focusedIndex}
              onClick={() => handleOptionClick(option)}
              onKeyDown={handleOptionKeyDown}
            >
              {option}
            </button>
          ))}
        </ul>
      )}
    </div>
  );
}

Remarks

이 훅은 다음과 같은 기능을 제공합니다:

  • 단축키를 통한 드롭다운 열기/닫기
  • 키보드 방향키(상하)를 통한 옵션 탐색
  • Enter키를 통한 옵션 선택
  • Escape키를 통한 드롭다운 닫기
  • 외부 클릭 시 자동으로 드롭다운 닫기
  • 접근성을 위한 키보드 탐색 지원
  • useDropdown(props): {
        dropdownRef: MutableRefObject<HTMLDivElement>;
        focusedIndex: number;
        handleOptionClick: ((value: string) => void);
        handleOptionKeyDown: ((event: KeyboardEvent<HTMLButtonElement>) => void);
        isOpen: boolean;
        optionRefs: MutableRefObject<HTMLButtonElement[]>;
        toggleDropdown: (() => void);
    }

  • Parameters

    • props: UseDropdown

      드롭다운 설정을 위한 객체

    Returns {
        dropdownRef: MutableRefObject<HTMLDivElement>;
        focusedIndex: number;
        handleOptionClick: ((value: string) => void);
        handleOptionKeyDown: ((event: KeyboardEvent<HTMLButtonElement>) => void);
        isOpen: boolean;
        optionRefs: MutableRefObject<HTMLButtonElement[]>;
        toggleDropdown: (() => void);
    }

    드롭다운 제어에 필요한 상태와 함수들을 포함하는 객체

    • dropdownRef: MutableRefObject<HTMLDivElement>
    • focusedIndex: number
    • handleOptionClick: ((value: string) => void)
        • (value): void

        • Parameters

          • value: string

          Returns void

    • handleOptionKeyDown: ((event: KeyboardEvent<HTMLButtonElement>) => void)
        • (event): void

        • Parameters

          • event: KeyboardEvent<HTMLButtonElement>

          Returns void

    • isOpen: boolean
    • optionRefs: MutableRefObject<HTMLButtonElement[]>
    • toggleDropdown: (() => void)
        • (): void

        • Returns void

Settings

Member Visibility