동적인 Selectbox

사용자가 선택할 수 있는 옵션을 동적으로 관리해야 할 때가 있습니다. 예를 들어, 이미지 관리 페이지에서 사용자가 이미지를 특정 구분에 따라 필터링할 수 있는 드롭다운 메뉴를 만들어야 할 수 있습니다. 이처럼 React 컴포넌트를 사용하여 Select 옵션 기능을 구현해보겠습니다.

컴포넌트 만들기

우선, 선택 옵션을 관리할 Form 컴포넌트를 만들어 보겠습니다. 이 컴포넌트는 드롭다운 메뉴를 표시하고 사용자가 선택한 값을 상태로 관리합니다. 다음은 Form 컴포넌트의 코드입니다.

import React from "react";
import styled from "styled-components";

function Form({ options, initialValues  }) {
 // 현재 선택된 옵션을 상태로 관리합니다.
  const [values, setValues] =  React.useState(initialValues || { category: "" });


  // 드롭다운 메뉴에서 옵션을 선택했을 때 호출되는 함수입니다.
  const handleSelectChange = (e) => {
    setValues({ ...values, category: e.target.value });
  };

  return (
 	<SelectWrapper value={values.category} onChange={handleSelectChange}>
      {/* 옵션 데이터를 매핑하여 드롭다운 메뉴에 표시합니다. */}
      {options.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </SelectWrapper>
  );
}

export default Form;

const SelectWrapper = styled.select`
  /* 스타일을 적용할 수 있는 CSS 속성들 */
  flex: 0 1 0;
  height: 3.9rem;

  border-radius: 0.25rem;
  border: 1px rgba(255, 255, 255, 0.1) solid;
  justify-content: space-between;
  align-items: center;
  display: flex;
  background-color: #262626;
  color: #cccccc;
  font-size: 1rem;
  font-family: Pretendard;
  font-weight: 400;
  line-height: 1rem;
  word-wrap: break-word;
`;

Form 컴포넌트 사용하기

Form 컴포넌트를 사용하여 선택 옵션을 관리해 보겠습니다. 먼저, 필요한 선택 옵션 데이터를 가지고 있는 더미 데이터를 정의합니다. 그리고 이 데이터를 Form 컴포넌트에 전달합니다.

import React from "react";
import Form from "./Form";

// 선택 옵션에 대한 더미 데이터를 정의합니다.
const optionsDummy = [
  { value: "", label: "구분" },
  { value: "image", label: "이미지" },
  { value: "other", label: "그외" },
];

function App() {
  return (
    <div>
      {/* 초기값을 설정하여 Form 컴포넌트를 사용합니다. */}
      <Form options={optionsDummy} initialValues={{ category: "" }} />
    </div>
  );
}

export default App;

Form 컴포넌트에서 초기값을 설정할 수 있습니다. 초기값을 설정하지 않으면 기본적으로 빈 문자열이 선택됩니다. 만약 특정 값으로 초기화하고 싶다면 initialValues props를 통해 전달할 수 있습니다.

이제 브라우저에서 앱을 실행하면 드롭다운 메뉴가 표시되고 사용자가 옵션을 선택할 수 있게 됩니다.

결론

React에서 동적으로 선택 옵션을 사용하는 것에 대해 알아보았습니다. 위의 예시에서 알 수 있듯이 useState 훅을 사용하여 선택한 값을 관리하고, 컴포넌트를 재사용할 수 있도록 설계하는 것이 좋습니다.