웹사이트 검색

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 앱을 생성한 다음 종속 항목을 설치하는 것으로 시작합니다.

  1. npx create-react-app react-select-example

새 프로젝트 디렉터리로 변경합니다.

  1. cd react-select-example

이제 React 애플리케이션을 실행할 수 있습니다.

  1. npm start

프로젝트의 오류나 문제를 수정한 다음 웹 브라우저에서 localhost:3000을 방문하세요.

작동하는 React 애플리케이션이 있으면 React Select 추가를 시작할 수 있습니다.

2단계 - React Select 추가

프로젝트에 react-select 라이브러리를 설치해야 합니다.

  1. npm install react-select@3.1.0

참고: 현재 라이브러리의 최신 버전(3.1.0)에는 StrictMode를 사용할 때 레거시 및 사용되지 않는 API에 대한 경고를 생성하는 문제가 있습니다. 이는 알려진 문제이며 몇 가지 보류 중인 끌어오기 요청을 통해 일부 문제를 해결할 수 있습니다.

다음은 수생 동물의 드롭다운 메뉴를 표시하도록 App.js를 수정하는 예입니다.

  1. 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 배열입니다.

참고: labelvalue를 수동으로 반복하는 대신 React Select 구성 요소를 문자열 배열로 채우는 경우 JavaScript의 맵 배열 방법을 사용하여 옵션 배열:

someArrayOfStrings.map(opt => ({ label: opt, value: opt }));

사용자가 옵션을 선택할 때 캡처하려면 onChange 소품을 추가합니다.

<Select
  options={aquaticCreatures}
  onChange={opt => console.log(opt.label, opt.value)}
/>

onChange 함수에 전달되는 값은 옵션 자체를 구성하는 동일한 개체이므로 labelvalue 변수를 포함합니다.

프로젝트 실행:

  1. 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.labelopt.valueundefined를 반환했을 것입니다.

<Select
  options={aquaticCreatures}
  isMulti
  onChange={opt => console.log(opt)}
/>

프로젝트 실행:

  1. 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)}
/>

프로젝트를 실행합니다.

  1. npm start

현재 존재하지 않는 옵션(예: Cuttlefish)을 입력하면 만들기 옵션이 표시됩니다.

새 메뉴 항목을 생성한 후 브라우저의 개발자 콘솔 출력에서 다음을 관찰해야 합니다.

Output
{ label: 'Cuttlefish', value: 'Cuttlefish', __isNew__: true } { action: 'create-option' }

이벤트가 새 옵션인지 감지하는 두 가지 방법이 있습니다. 선택한 옵션의 __isNew__ 변수와 metaaction 값입니다. > 이벤트 핸들러의 인수.

또한 labelvalue가 어떻게 동일한 문자열인지 확인하십시오. 사용자에게는 다른 이 있는 레이블을 제공하는 옵션이 제공되지 않습니다. 이는 데이터 저장소의 일관성을 위해 솔루션에 접근하는 방식에 영향을 미칠 수 있습니다.

이것으로 사용자가 만들 수 있는 옵션 기능이 끝났습니다.

비동기 옵션 로딩

비동기 옵션 로드를 사용하여 사용자가 애플리케이션에서 더 빠른 초기 로드 시간을 경험할 수 있도록 할 수 있습니다. 이것은 사용자가 상호 작용할 때만 구성 요소를 채웁니다.

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 주제 페이지를 살펴보세요.