React에서 "Uncontrolled to Controlled Component" 경고 해결하기

react-hook-form을 사용하여 input을 개발하다가 다음과 같은 경고 메세지를 마주하게 되었습니다. 해당 경고의 원인과 해결방법을 정리한 내용입니다.

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

이 메시지는 입력 컴포넌트(input, textarea, select 등)가 비제어(uncontrolled) 상태에서 제어(controlled) 상태로 변경되었음을 알립니다. React에서 비제어 컴포넌트는 DOM이 데이터를 직접 관리하는 반면, 제어 컴포넌트는 React state가 데이터를 관리합니다.

경고의 주요 원인은 입력 컴포넌트의 value 속성이 undefined에서 정의된 값으로 변경될 때 발생합니다. 이는 컴포넌트가 초기에 비제어 상태로 시작하여 나중에 제어 상태로 전환되었음을 의미합니다. 이 문제를 해결하는 방법은 다음과 같습니다:

초기값 설정

컴포넌트의 초기값을 undefined 대신 ""(빈 문자열)이나 적절한 다른 값으로 설정하세요. 이렇게 하면 컴포넌트가 처음부터 제어 상태로 시작됩니다.

옵셔널 체이닝과 Nullish Coalescing Operator 사용

값이 undefined일 가능성이 있는 경우, 옵셔널 체이닝(?.)을 사용하여 이를 처리하고, Nullish Coalescing Operator(??)로 대체값을 제공하세요. 예: value={formValues?.fieldName ?? ""}

React Hook Form의 Controller 사용

React Hook Form을 사용하는 경우, Controller 컴포넌트로 입력 필드를 래핑하여 문제를 해결할 수 있습니다. Controller는 입력 필드의 값 관리를 내부적으로 처리하여, 이러한 유형의 경고를 방지합니다.

import { useForm, Controller } from "react-hook-form";

function MyForm() {
  const { control } = useForm();
  
  return (
    <form>
      <Controller
        control={control}
        name="myFieldName"
        render={({ field }) => <input {...field} />}
      />
    </form>
  );
}