React에서 드롭다운 옵션 채우기

내가 처음 React를 배우기 시작했을 때 — 배열이나 객체의 항목을 기반으로 드롭다운을 만드는 데 필요한 논리가 무엇인지 파악하기 위해 애썼던 기억이 납니다. 지금은 매우 간단하지만, 이와 같은 드롭다운이 필요한 React로 앱을 처음 빌드할 때 처음으로 어려움을 겪는 사람은 제가 마지막이 아닐 것이라고 확신합니다. 이 게시물의 목표는 미래에 필요할 수도 있는 사람들에게 도움이 되는 것입니다.

이 게시물에서는 배열의 데이터를 기반으로 드롭다운 옵션을 만들고 동적으로 채우는 방법에 대한 간단한 시나리오를 살펴봅니다. 이 게시물은 React가 어떻게 작동하는지에 대한 일반적인 아이디어와 관련 지식이 있다고 가정합니다.

그 상황

하드 코딩된 값이든 API와 같은 외부 소스에서 가져온 값이든 어떤 유형의 데이터를 포함하는 배열이 있습니다.

목표

그 과일 배열의 각 값을 드롭다운 메뉴 내에서 옵션으로 바꾸고 싶습니다. 그런 다음 드롭다운 위에 선택한 옵션을 표시합니다.

스타터 코드

다음과 같은 간단한 React 앱/구성 요소가 있습니다.

각각의 과일을 나타내는 객체의 배열과 그 값(선택한 후 React가 실제로 사용/보여주기를 원하는 것) 및 레이블(드롭다운 목록 옵션에서 볼 수 있는 것)에 대한 키가 있습니다.

상태 - 선택 항목을 표시하는 데 사용할 부분

선택 요소가 변경된 후 상태를 업데이트할 수 있도록 선택 요소의 handleFruitChange 함수

드롭다운의 기본/시작 옵션

import React, {useState} from 'react';
import './App.css';

function App() {
  // Array of objects containing our fruit data
  let fruits = [
    { label: "Apple", value: "🍎" },
    { label: "Banana", value: "🍌" },
    { label: "Orange", value: "🍊" }
]

// Using state to keep track of what the selected fruit is
let [fruit, setFruit] = useState("⬇️ Select a fruit ⬇️")

// Using this function to update the state of fruit
// whenever a new option is selected from the dropdown
let handleFruitChange = (e) => {
  setFruit(e.target.value)
}

  return (
    <div className="App">
    {/* Displaying the value of fruit */}
    {fruit}
    <br />

    {/* Creating our dropdown and passing it the handleFruitChange 
      so that every time a new choice is selected, our fruit state 
      updates and renders an emoji of the fruit.
    */}
    <select onChange={handleFruitChange}> 
        {/* Creating the default / starting option for our 
          dropdown.
         */}
      <option value="⬇️ Select a fruit ⬇️"> -- Select a fruit -- </option>
    </select>

    </div>
  );
}

export default App;

드롭다운 채우기

이제 앱의 기본 레이아웃과 드롭다운의 맨 처음이 있으므로 과일 배열의 각 개체를 살펴보고 해당 값/레이블과 함께 해당 개체에 대한 옵션 요소를 만들어야 합니다.

import React, {useState} from 'react';
import './App.css';

function App() {
  // Array of objects containing our fruit data
  let fruits = [
    { label: "Apple", value: "🍎" },
    { label: "Banana", value: "🍌" },
    { label: "Orange", value: "🍊" }
]

// Using state to keep track of what the selected fruit is
let [fruit, setFruit] = useState("⬇️ Select a fruit ⬇️")

// Using this function to update the state of fruit
// whenever a new option is selected from the dropdown
let handleFruitChange = (e) => {
  setFruit(e.target.value)
}

  return (
    <div className="App">
    {/* Displaying the value of fruit */}
    {fruit}
    <br />

    <select onChange={handleFruitChange}> 
      <option value="⬇️ Select a fruit ⬇️"> -- Select a fruit -- </option>
            {/* Mapping through each fruit object in our fruits array
          and returning an option element with the appropriate attributes / values.
         */}
      {fruits.map((fruit) => <option value={fruit.value}>{fruit.label}</option>)}
    </select>
    </div>
  );
}

export default App;

이제 드롭다운에는 과일 배열의 각 과일에 대한 옵션이 포함됩니다. 하나를 선택하면 드롭다운 위에 표시됩니다.

참고: 이 코드는 옵션에 키를 제공하지 않았기 때문에 콘솔에 경고를 표시합니다( which React wants for list items ). 경고를 없애려면 다음과 같이 코드를 업데이트하면 됩니다.

{fruits.map((fruit) => <option key={fruit.label} value={fruit.value}>{fruit.label}</option>)}

그리고 그거야! 이것의 라이브 데모를 보고 코드를 직접 탐색할 수 있습니다on this Replit.

질문, 제안 또는 인사가 필요하면 여기 또는 내 소셜에 자유롭게 연락하세요 👋