[react-hook-form] value-Controller-query string으로 빈 값을 보내야 하는데, MUI Select안의 빈 value(””)를 인식하지 못하는 경우

한 프로젝트에서 react-hook-form과 MUI를 사용하여 select 옵션을 주어야 하는 상황

OrgSelect.tsx

const selectList = [
  {
    label: "전체",
    value: "all",
  },
  {
    label: "a",
    value: "XX",
  },
  {
    label: "b",
    value: "XX",
  },
  {
    label: "c",
    value: "XX",
  },

...

    	<Controller
          name="X"
          control={control}
          render={({ field }) => (
            <>
              <InputLabel id="">{placeholder}</InputLabel>
              <Select
                {...field}
                labelId=""
                id=""
                label={placeholder}
                renderValue={(value) => {
                  const selected = selectList.find((v) => v.value === value)
                  if (selected) {
                    return selected.label
                  } else {
                    return placeholder
                  }
                }}
              >
                {selectList?.length
                  ? selectList.map((v, idx) => (
                      <MenuItem value={v.value} key={`${v.value}_${idx}`}>
                        {v.label}
                      </MenuItem>
                    ))
                  : null}
              </Select>
            </>
          )}
        />

 

기능 구현은 했지만, Controller로 흘러 올라가야 하는 value값 중 ‘전체’에 해당하는 value 값이 빈 문자열이라 마치 value가 없는 것처럼 인식 됐다. Query String에는 빈 값이 들어가는 것이 맞았기 때문에 별 문제가 없었지만, select 상에서 어떤 문자열을 표시해 줄지를 결정하는 renderValue가 문제였다. 이상하게 else로 처리해도 전체를 표시해주지 않았다.

 

W님께서 해결한 방법은 임의의 selectList(리스트 속 딕셔너리)를 만들어 놓고, ‘전체’에 해당하는 value를 ‘all’로 지정했다. 그리고 map 함수를 이용해 각 MenuItem을 표시했다. 이로써 ‘전체’의 value에는 ‘all’ 문자열이 들어가게 되었다.

 

그리고 renderValue에서는 해당 value와 일치하는 딕셔너리의 label을 렌더링 해주었다.

 

Institution.tsx

const { data, isLoading, refetch } = useQuery(["a", "b", c, d, e, X ?? ""], () =>
    Api.get(a, b, c, X !== "all" ? X : "")
  )

 

남은 문제는 어떻게 올바른 Query String(””)으로 교체해주냐다.

 

W님은 이를 해당 GET 호출 부분에서 삼항 연산자로 해결하셨다. 우선 X 인자는 ‘all’ 아니면 ‘xx’로 시작하는 코드로 들어올 터이다. 그러면 X이 all가 아닌지 체크한다. 맞다면 X을 그대로 보내주고, 아니라면 빈 문자열로 바꿔준다.

 

스스로 해결하지 못해 아쉽지만 그래도 잘 구현했다고 말씀해주셨다! 굿굿

 

*조건(삼항) 연산자

조건(삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자다. 앞에서부터 조건문, 물음표, 조건문에 참일 경우 실행할 표현식, 콜론, 조건문이 거짓일 경우 실행할 표현식이 패치된다. 해당 연산자는 if…else문의 대체재로 빈번히 사용된다.