230621 react로 input Select 만들기

230621 react input Select 만들기

 

 

Select 컴포넌트 구현해야 할 기능

1. onChange 함수를 props로 받아 옵션이 선택될 때 선택된 값을 인자로 onChange(value) 실행
2. defaultValue를 입력 받아 초기값으로 지정. 없으면 옵션 목록의 첫 번째로 지정
3. 선택 버튼을 클릭하면 옵션 목록이 열리고 다시 누르면 닫힘
4. 옵션 목록은 다른 요소의 위치를 방해하지 않아야 함
5. 옵션 목록에서 옵션을 클릭하거나 컴포넌트 바깥을 클릭하면 목록이 닫힘
6. Tab키로 옵션 목록을 이동할 때 밖으로 나오지 않고 순회.
   enter키를 사용해 옵션 목록을 누르는 것과 동일하게 선택 가능
   esc키를 누르면 옵션 목록을 닫고 선택 버튼으로 포커스 이동

포커스 이동하기

이번 Select 컴포넌트 focus 이벤트에 중점을 맞추어 만들었다

키보드 Tab을 사용해 포커스를 이동하면 뒤로 돌아가기 어렵고, 

옵션 목록에서 옵션 목록을 살펴 보기 위해  옵션 목록을 여러 번 순회하기 어렵다.

tabindex를 사용해 불필요한 요소의 포커스 이동을 막고, useRef를 사용해 특정 요소로 포커스를 이동했다.

단순히 요소를 감싸기만 하는 요소처럼  읽거나 상호작용할 필요가 없는 경우는

tab을 통해 포커스 이동하지 않도록 tabindex='-1'을 적용했다.

• tabindex='-1' -> 키보드 탐색 막기. 비대화형 콘텐츠의 기본 값
• tabindex='0' -> 대화형 콘텐츠의 기본 값
• tabindex='1 이상 값' -> 문서의 논리적 순서와 다르게 이동시킬 수 있으므로, 접근성 관점에서 방해가 될 가능성이 있음.

-1 과 0 값을 사용해 탐색할 콘텐츠를 구분시키고, 탭이 되는 순서는 문서의 논리적 순서를 따르게 하는 것이 좋다.

 

 

<Select
  defaultValue={'사과'}
  options={[
    '복숭아',
    '사과',
    '블루베리',
    '자두',
    '수박',
    '참외',
    '토마토',
  ]}
  onChange={(value) => alert(value)}
/>