발생한 문제

React-hook-form을 활용하여 특정 기능들의 옵션들의 form상태를 취합한 뒤 서버로 데이터를 보내는 작업 중에 다음과 같은 에러가 발생하여 트러블 슈팅한 내용을 적어두려고 한다.

컴포넌트에서 같이 토스팀의 라이브러리로 여러 토글들의 값을 formSchema에 저장하여 데이터를 등록 및 참조하였다.

// 특정 컴포넌트
const { getValues, setValue } = useFunctionForm();

  const { list, toggle, isChecked } = useCheckList<{
    id: CheckTypes;
    checked: boolean;
    label: string;
  }>([
    {
      id: '기능-1',
      label: '기능1',
      checked: getValues('기능1'),
    },
    {
      id: '기능-2',
      label: '기능2',
      checked: getValues('기능2'),
    },
    {
      id: '기능-3',
      label: '기능3',
      checked: getValues('기능3'),
    },
  ]);

  const isChecked기능1 = isChecked('기능-1');
  const isChecked기능2 = isChecked('기능-2');
  const isChecked기능3 = isChecked('기능-3');

위의 코드처럼 토글값이 변경됨에 따른 상태를 각각의 토글마다 상태로 만들어서 해당 상태가 true즉, checked 일 때 그 기능에 필요한 다른 컴포넌트를 렌더링해야했다.

그런데 토글을 on/off 했을 때 즉, input을 제어하려고 할 때 해당 input의 value가 undefined나 null 인 상태에서 값을 제어하려고 하면 안된다는 에러가 발생했다.

관련 리액트 공식 문서를 찾아보았다. 문제는 말그래도 input의 value를 상태로 제어하려는데 input을 초기에 제어하려는 당시 상황에 undefined 혹은 null 값이였기 때문이였다.

트러블슈팅

그 이유는 해당 컴포넌트를 감싸고 있는 부모 컴포넌트(Provider로 커스텀훅을 내려줌)가 해당 기능값들을 초기에 불러올 때 비동기로 가져오게되고 해당 값들이 nullish한 상태이다.

그러므로 해당 스키마에 값을 가지고 있는 hook-form의 getValues의 초기값도 nullish하다. 그러므로 해당 토글의 input이 가지고 있는 값도 nullish한 상태이다.

그 이후, 토글을 on/off 했을 때 nullish한 값을 제어하려고 했으므로 해당 에러가 발생한 것으로 보인다.

const { list, toggle, isChecked } = useCheckList<{
    id: CheckTypes;
    checked: boolean;
    label: string;
  }>([
    {
      id: '기능-1',
      label: '기능1',
      checked: getValues('기능1') ?? false,	// 초기값 할당
    },
    {
      id: '기능-2',
      label: '기능2',
      checked: getValues('기능2') ?? false,	// 초기값 할당
    },
    {
      id: '기능-3',
      label: '기능3',
      checked: getValues('기능3') ?? false,	// 초기값 할당
    },
  ]);

그래서 해당 checked의 초기(boolean) 값을 넣어줘서 해결했다.