React-Select로 검색 가능한 비동기 드롭다운을 만드는 방법
소개
HTML은 최종 사용자가 <option>
의 드롭다운 메뉴에서 선택할 수 있는 <select>
요소를 제공합니다. 그러나 사용자가 사용 가능한 선택 항목을 필터링할 수 있도록 하는 것과 같이 선택 메뉴가 추가적인 사용자 경험의 장점을 활용할 수 있는 상황이 있을 수 있습니다.
React Select는 동적 검색 및 필터 기능을 제공하는 고도로 구성 가능한 React용 선택 메뉴 라이브러리입니다. 또한 비동기 옵션 로딩, 접근성 및 빠른 렌더링 시간을 지원합니다.
이 튜토리얼에서는 React Select를 프로젝트에 추가합니다. 또한 사용 가능한 몇 가지 추가 기능인 다중 선택, 사용자 생성 옵션 및 비동기 옵션 로드를 살펴봅니다.
전제 조건
이 자습서를 완료하려면 다음이 필요합니다.
- Node.js용 로컬 개발 환경입니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법을 따르십시오.
이 튜토리얼은 Node v14.7.0, npm
v6.14.7, react
v16.13.1 및 react-select
v3.1.0에서 확인되었습니다.
1단계 - 프로젝트 설정
create-react-app
을 사용하여 React 앱을 생성한 다음 종속 항목을 설치하는 것으로 시작합니다.
- npx create-react-app react-select-example
새 프로젝트 디렉터리로 변경합니다.
- cd react-select-example
이제 React 애플리케이션을 실행할 수 있습니다.
- npm start
프로젝트의 오류나 문제를 수정한 다음 웹 브라우저에서 localhost:3000
을 방문하세요.
작동하는 React 애플리케이션이 있으면 React Select 추가를 시작할 수 있습니다.
2단계 - React Select 추가
프로젝트에 react-select
라이브러리를 설치해야 합니다.
- npm install react-select@3.1.0
참고: 현재 라이브러리의 최신 버전(3.1.0)에는 StrictMode
를 사용할 때 레거시 및 사용되지 않는 API에 대한 경고를 생성하는 문제가 있습니다. 이는 알려진 문제이며 몇 가지 보류 중인 끌어오기 요청을 통해 일부 문제를 해결할 수 있습니다.
다음은 수생 동물의 드롭다운 메뉴를 표시하도록 App.js
를 수정하는 예입니다.
- nano src/App.js
aquaticCreatures
에 대한 배열을 추가하고 React Select에서 제공하는 Select
구성 요소를 사용합니다.
import React from 'react';
import Select from 'react-select';
const aquaticCreatures = [
{ label: 'Shark', value: 'Shark' },
{ label: 'Dolphin', value: 'Dolphin' },
{ label: 'Whale', value: 'Whale' },
{ label: 'Octopus', value: 'Octopus' },
{ label: 'Crab', value: 'Crab' },
{ label: 'Lobster', value: 'Lobster' },
];
function App() {
return (
<div className="App">
<Select
options={aquaticCreatures}
/>
</div>
);
}
export default App;
다음 세 가지를 알 수 있습니다.
react-select
에서Select
구성 요소를 가져와야 합니다.- 옵션 배열
aquaticCreatures
의 각 개체에는 적어도 두 개의 값이 있어야 합니다. 유형. - 유일하게 필요한 소품은
options
배열입니다.
참고: label
및 value
를 수동으로 반복하는 대신 React Select 구성 요소를 문자열 배열로 채우는 경우 JavaScript의 맵 배열 방법을 사용하여 옵션
배열:
someArrayOfStrings.map(opt => ({ label: opt, value: opt }));
사용자가 옵션을 선택할 때 캡처하려면 onChange
소품을 추가합니다.
<Select
options={aquaticCreatures}
onChange={opt => console.log(opt.label, opt.value)}
/>
onChange
함수에 전달되는 값은 옵션 자체를 구성하는 동일한 개체이므로 label
및 value
변수를 포함합니다.
프로젝트 실행:
- npm start
그런 다음 웹 브라우저에서 localhost:3000
을 방문합니다.
aquaticCreatures
가 포함된 React Select 메뉴가 표시됩니다.
이 메뉴와 상호 작용하면 onChange
이벤트가 트리거되고 메시지가 콘솔에 기록됩니다. 브라우저의 개발자 콘솔을 열면 선택한 항목의 라벨
및 값
을 관찰해야 합니다.
Output'Shark' 'Shark'
이제 작동하는 React Select 메뉴가 있으므로 이 라이브러리가 제공하는 다른 기능 중 일부를 탐색할 수 있습니다.
3단계 - 고급 옵션 추가
검색 및 선택 외에도 React Select는 다중 선택, 사용자 생성 옵션 및 비동기 옵션 로드와 같은 다른 기능을 제공합니다.
다중 선택
HTML <select>
는 multiple
을 지원하여 여러 <option>
를 선택할 수 있도록 합니다.
마찬가지로 React Select에서 isMulti
소품을 요소에 추가하여 다중 선택을 활성화할 수 있습니다.
<Select
options={aquaticCreatures}
isMulti
/>
탐색을 위해 opt
가 더 이상 단일 객체가 아니므로 다중 선택을 지원하도록 onChange
소품도 수정해야 합니다. 다중 선택을 사용하면 중첩된 개체가 됩니다. 그렇지 않으면 opt.label
및 opt.value
가 undefined
를 반환했을 것입니다.
<Select
options={aquaticCreatures}
isMulti
onChange={opt => console.log(opt)}
/>
프로젝트 실행:
- npm start
그런 다음 웹 브라우저에서 localhost:3000
을 방문합니다.
aquaticCreatures
에서 옵션을 선택한 다음 다른 옵션을 선택합니다. 모든 다중 선택 항목은 구성 요소로 표시되어야 합니다.
이것으로 다중 선택 기능을 마칩니다.
사용자가 만들 수 있는 옵션
사용자가 만들 수 있는 옵션을 제공하여 사용자가 원하는 선택 항목이 메뉴에 없는 상황에서 선택 메뉴에 사용자 정의 값을 추가할 수 있습니다.
먼저 react-select/creatable
에서 Createable
구성 요소를 가져와야 합니다.
import Creatable from 'react-select/creatable';
그런 다음 Select
구성 요소를 Createable
로 바꿉니다.
<Creatable
options={aquaticCreatures}
/>
탐색을 위해 onChange
소품도 meta
값을 표시하도록 수정해야 합니다.
<Creatable
options={aquaticCreatures}
onChange={(opt, meta) => console.log(opt, meta)}
/>
프로젝트를 실행합니다.
- npm start
현재 존재하지 않는 옵션(예: Cuttlefish
)을 입력하면 만들기
옵션이 표시됩니다.
새 메뉴 항목을 생성한 후 브라우저의 개발자 콘솔 출력에서 다음을 관찰해야 합니다.
Output{ label: 'Cuttlefish', value: 'Cuttlefish', __isNew__: true }
{ action: 'create-option' }
이벤트가 새 옵션인지 감지하는 두 가지 방법이 있습니다. 선택한 옵션의 __isNew__
변수와 meta
action 값입니다. > 이벤트 핸들러의 인수.
또한 label
과 value
가 어떻게 동일한 문자열인지 확인하십시오. 사용자에게는 다른 값
이 있는 레이블
을 제공하는 옵션이 제공되지 않습니다. 이는 데이터 저장소의 일관성을 위해 솔루션에 접근하는 방식에 영향을 미칠 수 있습니다.
이것으로 사용자가 만들 수 있는 옵션 기능이 끝났습니다.
비동기 옵션 로딩
비동기 옵션 로드를 사용하여 사용자가 애플리케이션에서 더 빠른 초기 로드 시간을 경험할 수 있도록 할 수 있습니다. 이것은 사용자가 상호 작용할 때만 구성 요소를 채웁니다.
Creatable
구성 요소와 마찬가지로 react-select/async
에서 AsyncSelect
를 가져와야 합니다.
import AsyncSelect from 'react-select/async'
그런 다음 Select
구성 요소를 Async
로 바꿉니다.
<AsyncSelect
loadOptions={loadOptions}
/>
옵션을 로드하려면 다음과 같이 loadOptions
prop에 함수를 전달합니다.
const loadOptions = (inputValue, callback) => {
// perform a request
const requestResults = ...
callback(requestResults)
}
React Select는 초기화 시 loadOptions
함수를 호출하여 드롭다운을 채우는 defaultOptions
prop과 옵션을 캐시하는 cacheOptions
prop도 지원합니다. 그 가치는 진실입니다.
이것으로 비동기 옵션 로딩 기능을 마칩니다.
결론
이 자습서에서는 React Select를 프로젝트에 추가했습니다. React Select의 사용자 정의 및 기능 세트는 사용자에게 표준 선택 메뉴보다 더 나은 사용자 경험을 제공할 수 있는 잠재력이 있습니다.
고급 기능에 대한 추가 정보는 React Select 문서에서 찾을 수 있습니다.
React에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 React 주제 페이지를 살펴보세요.