React Hook Forms v7에서 ‘Argument of type string is not assignable’ 오류 문제 해결

React Hook Form v7에서 ‘Argument of type string is not assignable to parameter’ 오류 이해하기

React Hook Form v6에서 v7로 최근에 마이그레이션한 경우, register 메소드를 사용할 때 ‘Argument of type ‘string’ is not assignable to parameter of type ‘${string} | ${string}.${string} | ${string}.${number}'”라는 오류 메시지가 표시될 수 있습니다. 이 오류는 register 메소드의 인수로 문자열 리터럴 대신 일반 문자열을 제공할 때 발생합니다.

문자열과 문자열 리터럴의 차이

TypeScript에서 문자열 리터럴은 코드에서 직접 사용되는 특정한 문자열 값입니다. 반면 문자열은 어떤 문자열 값이든 받을 수 있는 일반적인 타입입니다. React Hook Form v7에서 register 메소드는 필드 이름을 문자열 리터럴로 기대하며, 일반 문자열이 아닙니다.

오류 수정 방법

오류를 해결하려면, 폼에서 정의된 필드 이름 중 하나와 일치하는 문자열 리터럴을 register 메소드의 인수로 전달해야 합니다. 예를 들어보겠습니다:

interface IFormValues {
  firstName: string;
  lastName: string;
}

const { register, handleSubmit } = useForm<IFormValues>();

이 예제에서 register 메소드는 "firstName" 또는 "lastName"을 올바른 인수로 기대합니다. 다른 문자열을 제공하면 TypeScript가 “Argument of type ‘string’ is not assignable” 오류를 발생시킵니다.

useFieldArray를 사용하고 map을 사용하여 동적으로 필드를 생성하는 경우, 이름을 register 메소드에 전달하기 전에 상수로 단언해야 합니다. 이는 문자열 리터럴과 인덱스 번호를 혼합할 때 타입 확장이 발생하는 것과 관련이 있습니다. 다음은 예시입니다:

useFieldArray().map((field, index) => (
  <input
    {...register(`test.${index}.test` as const)}
    // 기타 속성들
  />
))

조건부 렌더링과 Controller 사용하기

Controller 컴포넌트를 사용하는 경우, 오류를 피하기 위해 이름 속성에 대한 조건부 렌더링을 활용할 수 있습니다. 다음은 예시입니다:

const textFieldData = [
  {
    id: 1,
    name: "youtubeUrl",
    placeholder: "Youtube URL",
  },
  {
    id: 2,
    name: "videoName",
    placeholder: "Video Name",
  },
];

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    {textFieldData.map((item) => (
      <Box key={item.id}>
        <Controller
          name={item.name === "youtubeUrl" ? "youtubeUrl" : "videoName"}
          control={control}
          render={({ field: { onChange, value } }) => (
            <TextField
              size="small"
              error={errors[item.name] ? true : false}
              fullWidth
              onChange={onChange}
              value={value}
              placeholder={item.placeholder}
              inputProps={{
                "aria-label": item.placeholder,
              }}
            />
          )}
        />
      </Box>
    ))}
  </form>
)

필드 이름을 기반으로 조건부 렌더링을 추가하면 오류가 해결됩니다.

문자열과 문자열 리터럴의 차이를 이해하고, register 메소드에 올바른 타입의 인수를 사용하거나 Controller를 활용하여 조건부 렌더링을 구현함으로써 React Hook Form v7에서 ‘Argument of type string is not assignable to parameter’ 오류를 해결할 수 있습니다. 이 가이드라인을 따르면 원활한 마이그레이션을 할 수 있고 쉽게 폼을 구축할 수 있습니다.

참고 자료 : 

reactjs