TIL : 최종프로젝트 12일차

오늘은 수정기능구현을 마무리했다.
기존 내용들을 가져와서 데이터를 입력하는 곳에 초기값으로 넣어주고, 바뀐내용들을 state에 저장해서 다시 업로드 하도록 구현했다.

구현하다가 react-select에서 defaultValue가 적용이 안되는 문제가 있었는데, 안에 있는 속성들을 하나씩 지워보다가 value 가 따로 지정되어 있어서 defalutValue가 적용이 안된다는 사실을 알게 되었다.

<Select
   options={regionOptions}
   defaultValue={filterRagion}
   onChange={handleCategorySelect}
   isMulti
   className="z-20"
   classNamePrefix="select"
   isSearchable={true}
   isOptionDisabled={(ragion) =>
    ragions && ragions.length >= regionLimit}
/>

defaultValue 안에는 배열 객체가 들어가야 해서, 데이터를 어떻게 불러올까 고민하다가, (데이터베이스는 문자열배열로 들어있음)

const filterRagion = regionOptions.filter((ragion) =>
    course?.location.includes(ragion.value)
  );

옵션으로 지정했던 배열 안에서 데이터베이스 안에 있는 값을 포함한 객체만 남기도록 필터링 해주어서 적용하면서 해결할 수 있었다.

다른 값들도 초기 랜더링 시에, 데이터베이스 안에 있는 내용으로 setState 될 수 있도록 적용하여 페이지 안에 나타낼 수 있었다.

  useEffect(() => {
    setCourseTitle(course?.title);
    if (course?.travelStatus === true) {
      setTravelStatus(true);
    } else {
      setTravelStatus(false);
    }
    setRagions(filterRagion);
    setSelectedTags(filterTags);
    setLists(tripCourse);
    if (courseList.length < 1) {
      tripCourse.forEach((course: any) => dispatch(addCourse(course)));
    }
    setGalleryCover(course?.cover);
  }, []);