[React] select box - API 호출로 option 조회시, placeholder 초기화 문제

Select 컴포넌트 사용시 placeholder가 초기화되지 않는 문제 -> 키 설정하기

 

 

두 개의 select box가 있다. 

 

채널 선택항목은 팀 항목에 종속적이다.

즉, 팀 선택 후에 -> 채널 선택 하는 방식

 

다시 말해,

팀 선택시, 선택지들은 API로 호출하여 선택 옵션을 불러오고,

채널 선택시, 채널 선택지들 또한 '팀 선택' 항목에서 지정한 값에 따라 동적으로 목록을 불러오는 방식인 것이다.

 

 

문제상황

내가 원했던 것은 1회차 선택에서 팀 -> 채널 선택을 한 번 마친 뒤

 

만약, 사용자가 팀 옵션을 바꾸면

채널 선택 항목도 초기화가 되면서

채널의 placeholder 항목이 "채널을 선택해주세요" 라는 표기로 초기화가 되길 바랐다.

 

그런데 placeholder 항목이 초기화가 되지 않고, 표기가 비어있었다.

 

팀 항목을 재선택하면 채널 항목의 표기가 비어 나옴

 

 

 

문제파악 및 해결   --> React 컴포넌트에서 Key 개념의 부재

이것은 value에 대한 key를 제대로 지정하지 않아서 생긴 문제이다.

 

팀 선택지를 열 때마다 ( onOpenChange  )   (--> shadcn/ ui의  select box 사용시에 있는 옵션인듯)

 

해당 key 값을 사용자가 value를 선택하는 시점의 시간을 기록하여 유니크하게 할당되도록 설정했다.

 

그래서 사용자가 한 번 팀 선택, 채널 선택을 마친 뒤

 

다시 팀 선택을 하기기로 하면 onOpenChange  에 대하여 함수가 작동하여 useState의 Set 함수로 채널 항목의 key가 변경되게 만들었다.

 

 

              setChannelKey(+new Date());

 

 {/* 셀렉트 */}
      <div className="flex flex-col py-20 gap-10">
        <div className="flex flex-col w-40">
          <button
            onClick={fetchTeamsDriveList}
            disabled={isFetchDisabled}
            className="bg-blue-500 text-white p-2 rounded disabled:bg-gray-500 disabled:text-gray-300 disabled:cursor-not-allowed"
          >
            {!isFetchDisabled ? "팀 목록 조회" : "로딩중..."}
          </button>
        </div>
        <div>
          <Select
            disabled={isTeamDisabled}
            onValueChange={(teamId) => {
              handleTeamChange(teamId);
              setSelectedChannel(null);
            }}
            onOpenChange={() => {				// 팀 항목 선택지를 열 때마다 
              setChannelKey(+new Date());     // setChannelKey 함수로 channelKey 변수에 새로운 키 지정
            }}
          >
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="팀을 선택해주세요" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectLabel>
                  {teamslist[0] ? "팀 목록" : "로딩중..."}
                </SelectLabel>

                {teamslist.map((team: any) => (
                  <SelectItem key={team.id} value={team.id}>
                    {team.displayName}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>

        <div>
          <Select
            disabled={isChannelDisabled}
            onValueChange={handleChannelChange}
            key={channelKey}                      // 채널 항목의 key
          >
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="채널을 선택해주세요" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectLabel>
                  {channelFolderList ? "채널 목록" : "로딩중..."}
                </SelectLabel>
                {channelFolderList.map((channelFolder: any) => (
                  <SelectItem key={channelFolder.id} value={channelFolder.id}>
                    {channelFolder.displayName === "General"
                      ? "일반"
                      : channelFolder.displayName}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>
      </div>

 

<select> – React

<select> – React

https://ko.react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

리스트 렌더링 – React

 

 

How can i reset a Select field? · shadcn-ui/ui · Discussion #638 (github.com)

How can i reset a Select field? · shadcn-ui ui · Discussion #638

 

 

리액트에서 폼 요소의 기본값 설정하기 - value와 defaultValue (velog.io)

리액트에서 폼 요소의 기본값 설정하기 - value와 defaultValue