React Academy · 강의

React Hook Form 시작하기

RHF를 설치하고 useForm을 호출한 뒤 입력을 등록하고 양식 제출을 처리합니다.

React Hook Form 시작하기은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

이 학습에서는 React Hook Form을 설치하고, useForm을 호출하며, 입력을 등록하고, 개별 상태 변수를 관리하지 않고 양식 제출을 처리합니다.

React Hook Form을 사용하는 이유

React의 기존 제어 양식에서는 필드마다 useState 하나와 입력마다 onChange 하나가 필요합니다. React Hook Form(RHF)은 제어되지 않는 입력을 사용해 이 모든 작업을 내부적으로 처리하므로, 더 간단한 API와 더 적은 다시 렌더링을 제공합니다.

설치

패키지를 설치합니다. 기본 사용에는 추가 피어 종속성이 필요하지 않습니다.

npm install react-hook-form

useForm Hook

useForm()을 호출하면 register 함수, handleSubmit 래퍼, formState를 가져옵니다. 이 세 가지가 모든 양식에 필요한 핵심 요소입니다.

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

입력 등록하기

각 입력에 register('fieldName')의 결과를 전개하여 전달합니다. RHF는 내부적으로 입력에 ref와 이벤트 처리기를 연결하므로 value나 onChange가 필요하지 않습니다.

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

onSubmit 콜백

handleSubmit은 모든 필드를 검증하고 양식이 유효할 때만 형식이 지정된 데이터 객체를 onSubmit 콜백에 전달해 호출합니다. 검증에 실패하면 대신 formState.errors를 채웁니다.

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

기본값

양식 필드를 미리 채우려면 `defaultValues`를 useForm에 전달합니다. 기존 데이터를 불러오는 편집 양식에 유용합니다.

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

formState 속성

formState는 유용한 불리언 값을 제공합니다. `isSubmitting`(handleSubmit이 실행되는 동안 true), `isDirty`(필드가 하나라도 변경되면 true), `isValid`(오류가 없으면 true), 그리고 `errors` 객체입니다.

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

양식 초기화하기

`reset()`을 호출해 모든 필드를 지우고 formState를 초기화합니다. 새 기본값을 선택적으로 전달할 수도 있습니다.

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

성능상의 이점

RHF는 제어되지 않는 입력을 사용하므로 제어되는 React 양식과 달리 키를 입력할 때마다 양식이 다시 렌더링되지 않습니다. 검증 오류와 제출 상태가 변경될 때만 다시 렌더링되므로 큰 양식도 빠르게 반응합니다.

빠른 확인

사용자가 양식을 제출할 때 handleSubmit(onSubmit)을 호출하면 어떤 작업이 수행되나요?

정리

RHF를 설치하고 useForm을 호출해 register와 handleSubmit을 가져옵니다. 입력에 register()를 전개하고 제출 처리기를 handleSubmit으로 감쌉니다. 편집 양식에는 defaultValues를 설정하고 제출이 성공한 후 reset()을 호출합니다.

다음 학습

다음 학습: **검증 규칙 및 오류 메시지** — 기본 제공 검증 규칙을 적용하고 사용자에게 오류 메시지를 표시합니다.

자주 묻는 질문

“React Hook Form 시작하기” 강의는 무료인가요?

네 — “React Hook Form 시작하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“React Hook Form 시작하기”에서 뭘 배우나요?

RHF를 설치하고 useForm을 호출한 뒤 입력을 등록하고 양식 제출을 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“React Hook Form 시작하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기