TIL : 최종프로젝트 4일차

오늘은 select안에 있는 값에 접근하는 작업을 했다. 이제 state에 저장하는 작업을 서버에 저장하는 작업까지 해야하는데, RTK-query에 대한 공부가 필요해서 이것저것 찾아보다보니 하루가 또 금방 지나갔다. 공식문서도 눈에 잘 안들어오는 날이라 내일 다시 공부해서 적용해봐야 할 것 같다.

react-select

: select box를 쉽게 구현할 수 있는 라이브러리

설치하기

npm i --save react-select
yarn add react-select

사용방법

• option 한 개만 선택하는 select box

import Select from "react-select";
.
.
const PostTitle = () => {
//
const regionOptions = [
  { value: "서울", label: "서울" },
  { value: "경기/인천", label: "경기/인천" },
  { value: "충청남도", label: "충청남도" },
  { value: "충청북도", label: "충청북도" },
  { value: "강원도", label: "강원도" },
  { value: "경상북도", label: "경상북도" },
  { value: "경상남도", label: "경상남도" },
  { value: "전라북도", label: "전라북도" },
  { value: "전라남도", label: "전라남도" },
  { value: "제주도", label: "제주도" },
];

return (
  <div>
      <Select
      options={regionOptions}
      placeholder={"지역명"}
      autoFocus={true}
      />
  </div>
  );
};

• option을 여러 개 선택하는 select box

import Select from "react-select";


const PostHash = () => {
  const hashTagOptions = [
    { value: "#커플끼리", label: "#커플끼리" },
    { value: "#부모님과", label: "#부모님과" },
    { value: "#반려동물", label: "#반려동물" },
    { value: "#아이들과", label: "#아이들과" },
    { value: "#친구들과", label: "#친구들과" },
  ];
  return(
    <div>
      <Select
        options={hashTagOptions}
        placeholder={"#해시태그"}
        isMulti  // 이 속성을 추가하면 다중선택 가능!
        isSearchable={true} // 검색 가능여부
        isClearable={true} // 전체삭제 가능여부
      />
    </div>
  );
};

select 값 가져오기

• 한 개의 옵션에 대한 값 가져오기

  const [category, setCategory] = useState("");
  const handleTypeSelect = (event:any) => {
    setCategory(event.value);
  };

<Select
   options={regionOptions}
   placeholder={"지역명"}
   autoFocus={true}
   onChange={handleTypeSelect}
   value={regionOptions.filter(function (option) {
         return option.value === category;
         })}
   />

• 여러개의 옵션에 대한 값 가져오기

  const [selectedTags, setSelectedTags] = useState<tagType[] | null>([]);

  function handleSelect(data: any) {
    setSelectedTags(data);
  }

  // 테스트용 submit handler
  const submitHandle = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    //데이터베이스에 문자열 배열로 들어가야 하기 때문에, 오브젝트 배열을 문자열배열로 바꿉니다.
    let selectedValues = selectedTags?.map((tag) => tag.value);
    return selectedValues;
  };

	<form onSubmit={submitHandle}>
      <Select
        options={hashTagOptions}
        placeholder={"#해시태그"}
        value={selectedTags}
        onChange={handleSelect}
        isMulti
        isSearchable={true}
        isClearable={true}
      />
  	</form>

---

생각보다 자료가 많지 않아서 원하는 형태로 값을 받아오는 데에 시간은 걸렸지만, 잘 받아와져서 다행이다 ! 내일 저장하는 것까지 잘 구현해봐야지!