React Hook Form의 trigger를 알아보자!

김강민·2025년 7월 23일

목록 보기

18/32

trigger

trigger 함수는 React Hook Form 라이브러리에서 제공하는 강력한 기능으로, 개발자가 원하는 시점에 폼 또는 특정 필드의 유효성 검사(validation)를 수동으로 실행할 수 있게 해줍니다.

이 글은 아래 영상을 바탕으로 작성하였습니다.
React Hook Form - useForm: trigger

1. 주요 사용 사례 (When to use it?)

trigger는 다음과 같은 상황에서 매우 유용합니다.

의존성 검사: '비밀번호'와 '비밀번호 확인' 필드처럼, 한 필드의 값이 다른 필드에 의존할 때 실시간으로 일치 여부를 검사할 수 있습니다.
단계별 폼: 여러 단계로 구성된 폼에서 '다음' 버튼을 누를 때, 현재 단계에 있는 필드들만 유효한지 검사할 수 있습니다.
사용자 경험(UX) 향상: 사용자가 입력 필드를 벗어났을 때(onBlur 이벤트) 즉시 유효성을 검사하고 피드백을 주어, 폼 제출 시 한꺼번에 에러를 마주하는 경험을 줄여줍니다.

2. 기본 사용법 (How to use it?)

trigger 함수는 인자를 어떻게 전달하느냐에 따라 세 가지 방식으로 동작합니다.

trigger()

폼에 등록된 모든 필드의 유효성 검사를 실행합니다.

  const handleCheckAll = async () => {
    await trigger();
  };

trigger('fieldName')

문자열로 전달된 특정 필드 하나만의 유효성 검사를 실행합니다.

    const handleBlur = () => {
      trigger("email");
    };

trigger(['field1', 'field2'])

배열로 전달된 여러 개의 특정 필드들의 유효성 검사를 실행합니다.

   const handleNextStep = async () => {
     await trigger(["firstName", "lastName"]);
   };

3. 핵심 고급 기능 (Advanced Features)

trigger는 단순한 실행을 넘어 다음과 같은 강력한 기능을 제공합니다.

비동기 처리 및 결과 반환

trigger 함수는 Promise<boolean>을 반환합니다. 이는 유효성 검사가 완료될 때까지 기다린 후, 그 결과를 true(유효함) 또는 false(유효하지 않음)로 받아볼 수 있음을 의미합니다.

async/await와 함께 사용하면 서버 API를 호출하는 비동기 유효성 검사(예: 아이디 중복 확인)를 처리하거나, 유효성 결과에 따른 조건부 로직을 쉽게 구현할 수 있습니다.

   const handleSubmit = async () => {
     // 'username' 필드의 유효성을 검사하고 결과를 기다립니다.
     const isUsernameValid = await trigger("username");
   
     // 유효한 경우에만 다음 로직을 실행합니다.
     if (isUsernameValid) {
       // 서버에 데이터 전송 로직
     }
   };

에러 필드에 자동 포커스

shouldFocus 옵션을 사용하면 유효성 검사 실패 시, 사용자 경험을 크게 향상시킬 수 있습니다.

   trigger("password", { shouldFocus: true });

위 코드는 password 필드가 유효성 검사에 실패했을 경우, 자동으로 해당 입력창에 커서를 이동시켜 사용자가 어느 부분을 수정해야 하는지 즉시 알려줍니다.

4. 성능 최적화 규칙 (Performance Rule)

React 개발자라면 반드시 알아야 할 중요한 성능 관련 규칙입니다.

최적화됨 (Optimized): trigger('fieldName')처럼 단일 필드를 대상으로 할 경우, React Hook Form이 렌더링을 최적화하여 해당 필드와 관련된 부분만 업데이트합니다.
전체 리렌더링 (Re-render): trigger() 또는 trigger(['field1', ...])처럼 여러 필드를 대상으로 할 경우, 폼 전체가 다시 렌더링(re-render)될 수 있습니다. 복잡하고 큰 폼에서는 성능에 영향을 줄 수 있으므로 사용에 주의가 필요합니다.