Skip to content
♥

Advanced Usage

복잡하고 접근성 있는 폼 구축

접근성(A11y)

React Hook Form은 네이티브 폼 검증을 지원하며, 이를 통해 여러분은 직접 정의한 규칙으로 입력값을 검증할 수 있습니다. 대부분의 경우 커스텀 디자인과 레이아웃으로 폼을 만들어야 하기 때문에, 이러한 폼이 접근성(A11y)을 갖추도록 하는 것은 우리의 책임입니다.

다음 코드 예제는 검증을 위해 의도한 대로 동작하지만, 접근성 측면에서 개선이 필요합니다.

import { useForm } from "react-hook-form"


export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = (data) => console.log(data)


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name</label>
      <input
        id="name"
        {...register("name", { required: true, maxLength: 30 })}
      />
      {errors.name && errors.name.type === "required" && (
        <span>This is required</span>
      )}
      {errors.name && errors.name.type === "maxLength" && (
        <span>Max length exceeded</span>
      )}
      <input type="submit" />
    </form>
  )
}

다음 코드 예제는 ARIA를 활용하여 개선된 버전입니다.

import { useForm } from "react-hook-form"


export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = (data) => console.log(data)


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name</label>


      {/* aria-invalid를 사용하여 오류가 있는 필드를 표시 */}
      <input
        id="name"
        aria-invalid={errors.name ? "true" : "false"}
        {...register("name", { required: true, maxLength: 30 })}
      />


      {/* role="alert"를 사용하여 오류 메시지를 알림 */}
      {errors.name && errors.name.type === "required" && (
        <span role="alert">This is required</span>
      )}
      {errors.name && errors.name.type === "maxLength" && (
        <span role="alert">Max length exceeded</span>
      )}


      <input type="submit" />
    </form>
  )
}

이렇게 개선한 후, 스크린 리더는 다음과 같이 읽습니다: "Name, edit, invalid entry, This is required."

위자드 폼 / 퍼널

사용자 정보를 여러 페이지와 섹션을 통해 수집하는 것은 매우 일반적인 작업입니다. 여러 페이지나 섹션을 통해 사용자 입력을 저장하기 위해 상태 관리 라이브러리를 사용하는 것을 권장합니다. 이 예제에서는 little state machine을 상태 관리 라이브러리로 사용할 것입니다. (만약 redux에 더 익숙하다면, 이를 대체할 수 있습니다.)

1단계: 라우트와 스토어를 설정합니다.

CodeSandbox JS
import { BrowserRouter as Router, Route } from "react-router-dom"
import { StateMachineProvider, createStore } from "little-state-machine"
import Step1 from "./Step1"
import Step2 from "./Step2"
import Result from "./Result"


createStore({
  data: {
    firstName: "",
    lastName: "",
  },
})


export default function App() {
  return (
    <StateMachineProvider>
      <Router>
        <Route exact path="/" component={Step1} />
        <Route path="/step2" component={Step2} />
        <Route path="/result" component={Result} />
      </Router>
    </StateMachineProvider>
  )
}

2단계: 페이지를 만들고, 데이터를 수집하여 스토어에 저장한 후 다음 폼/페이지로 이동합니다.

CodeSandbox JS
import { useForm } from "react-hook-form"
import { withRouter } from "react-router-dom"
import { useStateMachine } from "little-state-machine"
import updateAction from "./updateAction"


const Step1 = (props) => {
  const { register, handleSubmit } = useForm()
  const { actions } = useStateMachine({ updateAction })
  const onSubmit = (data) => {
    actions.updateAction(data)
    props.history.push("./step2")
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="submit" />
    </form>
  )
}


export default withRouter(Step1)

3단계: 스토어에 있는 모든 데이터를 최종 제출하거나 결과 데이터를 표시합니다.

CodeSandbox JS
import { useStateMachine } from "little-state-machine"
import updateAction from "./updateAction"


const Result = (props) => {
  const { state } = useStateMachine(updateAction)


  return <pre>{JSON.stringify(state, null, 2)}</pre>
}

위 패턴을 따르면, 여러 페이지에서 사용자 입력 데이터를 수집하는 위자드 폼/퍼널을 구축할 수 있습니다.

스마트 폼 컴포넌트

여기서 소개할 아이디어는 여러분이 쉽게 입력 필드로 폼을 구성할 수 있게 하는 것입니다. 폼 데이터를 자동으로 수집하는 Form 컴포넌트를 만들어 보겠습니다.

CodeSandbox JS
import { Form, Input, Select } from "./Components"


export default function App() {
  const onSubmit = (data) => console.log(data)


  return (
    <Form onSubmit={onSubmit}>
      <Input name="firstName" />
      <Input name="lastName" />
      <Select name="gender" options={["female", "male", "other"]} />


      <Input type="submit" value="Submit" />
    </Form>
  )
}

이제 각 컴포넌트가 어떤 역할을 하는지 살펴보겠습니다.

</> Form

Form 컴포넌트의 역할은 모든 react-hook-form 메서드를 자식 컴포넌트에 주입하는 것입니다.

CodeSandbox JS
import { Children, createElement } from "react"
import { useForm } from "react-hook-form"


export default function Form({ defaultValues, children, onSubmit }) {
  const methods = useForm({ defaultValues })
  const { handleSubmit } = methods


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {Children.map(children, (child) => {
        return child.props.name
          ? createElement(child.type, {
              ...{
                ...child.props,
                register: methods.register,
                key: child.props.name,
              },
            })
          : child
      })}
    </form>
  )
}

</> Input / Select

이 입력 컴포넌트들의 역할은 react-hook-form에 등록하는 것입니다.

CodeSandbox JS
export function Input({ register, name, ...rest }) {
  return <input {...register(name)} {...rest} />
}


export function Select({ register, options, name, ...rest }) {
  return (
    <select {...register(name)} {...rest}>
      {options.map((value) => (
        <option key={value} value={value}>
          {value}
        </option>
      ))}
    </select>
  )
}

Form 컴포넌트가 react-hook-form의 props를 자식 컴포넌트에 주입함으로써, 여러분은 앱에서 복잡한 폼을 쉽게 생성하고 구성할 수 있습니다.

에러 메시지

에러 메시지는 사용자의 입력에 문제가 있을 때 시각적으로 피드백을 제공합니다. React Hook Form은 errors 객체를 제공하여 에러를 쉽게 가져올 수 있게 합니다. 화면에 에러를 표시하는 방법은 여러 가지가 있습니다.

  • Register

    검증 규칙 객체의 message 속성을 통해 에러 메시지를 register에 간단히 전달할 수 있습니다.

    <input {...register('test', { maxLength: { value: 2, message: "error message" } })} />

  • 옵셔널 체이닝

    ?. 옵셔널 체이닝 연산자를 사용하면 null이나 undefined로 인해 다른 에러가 발생할 걱정 없이 errors 객체를 읽을 수 있습니다.

    errors?.firstName?.message

  • Lodash get

    프로젝트에서 lodash를 사용하고 있다면, lodash의 get 함수를 활용할 수 있습니다. 예를 들어:

    get(errors, 'firstName.message')

폼 연결하기

폼을 만들 때, 입력 필드가 깊게 중첩된 컴포넌트 트리 안에 있는 경우가 있습니다. 이럴 때 FormContext가 유용하게 쓰입니다. 하지만 ConnectForm 컴포넌트를 만들어 React의 renderProps를 활용하면 개발자 경험을 더욱 개선할 수 있습니다. 이렇게 하면 입력 필드를 React Hook Form에 더 쉽게 연결할 수 있습니다.

import { FormProvider, useForm, useFormContext } from "react-hook-form"


export const ConnectForm = ({ children }) => {
  const methods = useFormContext()


  return children(methods)
}


export const DeepNest = () => (
  <ConnectForm>
    {({ register }) => <input {...register("deepNestedInput")} />}
  </ConnectForm>
)


export const App = () => {
  const methods = useForm()


  return (
    <FormProvider {...methods}>
      <form>
        <DeepNest />
      </form>
    </FormProvider>
  )
}

FormProvider 성능

React Hook Form의 FormProvider는 React의 Context API를 기반으로 구축되었습니다. 이는 데이터를 컴포넌트 트리를 통해 전달할 때, 매번 수동으로 props를 전달하지 않아도 되도록 해줍니다. 하지만 React Hook Form이 상태 업데이트를 트리거할 때 컴포넌트 트리가 리렌더링을 일으킬 수 있습니다. 아래 예제를 통해 필요한 경우 앱을 최적화할 수 있습니다.

참고: React Hook Form의 Devtools를 FormProvider와 함께 사용하면 일부 상황에서 성능 문제가 발생할 수 있습니다. 성능 최적화에 깊이 들어가기 전에 이 병목 현상을 먼저 고려해 보세요.

CodeSandbox JS
import { memo } from "react"
import { useForm, FormProvider, useFormContext } from "react-hook-form"


// isDirty 상태가 변경된 경우를 제외하고 리렌더링을 방지하기 위해 React.memo를 사용할 수 있습니다.
const NestedInput = memo(
  ({ register, formState: { isDirty } }) => (
    <div>
      <input {...register("test")} />
      {isDirty && <p>This field is dirty</p>}
    </div>
  ),
  (prevProps, nextProps) =>
    prevProps.formState.isDirty === nextProps.formState.isDirty
)


export const NestedInputContainer = ({ children }) => {
  const methods = useFormContext()


  return <NestedInput {...methods} />
}


export default function App() {
  const methods = useForm()
  const onSubmit = (data) => console.log(data)
  console.log(methods.formState.isDirty) // Proxy를 활성화하기 위해 렌더링 전에 formState를 읽어야 합니다.


  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInputContainer />
        <input type="submit" />
      </form>
    </FormProvider>
  )
}

제어 컴포넌트와 비제어 컴포넌트 혼합 사용

React Hook Form은 비제어 컴포넌트를 중심으로 설계되었지만, 제어 컴포넌트와도 호환됩니다. 대부분의 UI 라이브러리(MUI와 Antd 등)는 제어 컴포넌트만 지원하도록 만들어졌습니다. 하지만 React Hook Form을 사용하면 제어 컴포넌트의 리렌더링도 최적화됩니다. 다음은 검증 기능과 함께 두 방식을 혼합한 예제입니다.

import { Input, Select, MenuItem } from "@material-ui/core"
import { useForm, Controller } from "react-hook-form"


const defaultValues = {
  select: "",
  input: "",
}


function App() {
  const { handleSubmit, reset, control, register } = useForm({
    defaultValues,
  })
  const onSubmit = (data) => console.log(data)


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        render={({ field }) => (
          <Select {...field}>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
          </Select>
        )}
        control={control}
        name="select"
        defaultValue={10}
      />


      <Input {...register("input")} />


      <button type="button" onClick={() => reset({ defaultValues })}>
        Reset
      </button>
      <input type="submit" />
    </form>
  )
}
CodeSandbox JS
import { useEffect } from "react"
import { Input, Select, MenuItem } from "@material-ui/core"
import { useForm } from "react-hook-form"


const defaultValues = {
  select: "",
  input: "",
}


function App() {
  const { register, handleSubmit, setValue, reset, watch } = useForm({
    defaultValues,
  })
  const selectValue = watch("select")
  const onSubmit = (data) => console.log(data)


  useEffect(() => {
    register({ name: "select" })
  }, [register])


  const handleChange = (e) => setValue("select", e.target.value)


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select value={selectValue} onChange={handleChange}>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
      </Select>
      <Input {...register("input")} />


      <button type="button" onClick={() => reset({ ...defaultValues })}>
        Reset
      </button>
      <input type="submit" />
    </form>
  )
}

커스텀 훅과 리졸버

리졸버로 커스텀 훅을 만들 수 있습니다. 커스텀 훅은 yup/Joi/Superstruct와 같은 검증 방법과 쉽게 통합할 수 있으며, 검증 리졸버 내부에서 사용할 수 있습니다.

  • 메모이제이션된 검증 스키마를 정의합니다. (의존성이 없다면 컴포넌트 외부에서 정의할 수도 있습니다.)
  • 검증 스키마를 전달하여 커스텀 훅을 사용합니다.
  • 검증 리졸버를 useForm 훅에 전달합니다.
CodeSandbox JS
import { useCallback } from "react"
import { useForm } from "react-hook-form"
import * as yup from "yup"


const useYupValidationResolver = (validationSchema) =>
  useCallback(
    async (data) => {
      try {
        const values = await validationSchema.validate(data, {
          abortEarly: false,
        })


        return {
          values,
          errors: {},
        }
      } catch (errors) {
        return {
          values: {},
          errors: errors.inner.reduce(
            (allErrors, currentError) => ({
              ...allErrors,
              [currentError.path]: {
                type: currentError.type ?? "validation",
                message: currentError.message,
              },
            }),
            {}
          ),
        }
      }
    },
    [validationSchema]
  )


const validationSchema = yup.object({
  firstName: yup.string().required("Required"),
  lastName: yup.string().required("Required"),
})


export default function App() {
  const resolver = useYupValidationResolver(validationSchema)
  const { handleSubmit, register } = useForm({ resolver })


  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="submit" />
    </form>
  )
}

가상화된 리스트 작업하기

데이터 테이블을 다루는 상황을 상상해 보세요. 이 테이블에는 수백 또는 수천 개의 행이 있을 수 있으며, 각 행에는 입력 필드가 있습니다. 일반적으로 뷰포트에 보이는 항목만 렌더링하는 것이 일반적인 관행이지만, 이렇게 하면 항목이 뷰포트를 벗어날 때 DOM에서 제거되고 다시 추가되면서 문제가 발생할 수 있습니다. 이로 인해 항목이 뷰포트에 다시 들어올 때 기본값으로 재설정되는 문제가 생길 수 있습니다.

아래는 react-window를 사용한 예제입니다.

CodeSandbox JS
import { memo } from "react"
import { FormProvider, useForm, useFormContext } from "react-hook-form"
import { VariableSizeList as List } from "react-window"
import AutoSizer from "react-virtualized-auto-sizer"


const items = Array.from(Array(1000).keys()).map((i) => ({
  title: `List ${i}`,
  quantity: Math.floor(Math.random() * 10),
}))


const WindowedRow = memo(({ index, style, data }) => {
  const { register } = useFormContext()


  return <input {...register(`${index}.quantity`)} />
})


export const App = () => {
  const onSubmit = (data) => console.log(data)
  const methods = useForm({ defaultValues: items })


  return (
    <form onSubmit={methods.handleSubmit(onSubmit)}>
      <FormProvider {...methods}>
        <AutoSizer>
          {({ height, width }) => (
            <List
              height={height}
              itemCount={items.length}
              itemSize={() => 100}
              width={width}
              itemData={items}
            >
              {WindowedRow}
            </List>
          )}
        </AutoSizer>
      </FormProvider>
      <button type="submit">Submit</button>
    </form>
  )
}
CodeSandbox JS
import { FixedSizeList } from "react-window"
import { Controller, useFieldArray, useForm } from "react-hook-form"


const items = Array.from(Array(1000).keys()).map((i) => ({
  title: `List ${i}`,
  quantity: Math.floor(Math.random() * 10),
}))


function App() {
  const { control, getValues } = useForm({
    defaultValues: {
      test: items,
    },
  })
  const { fields } = useFieldArray({ control, name: "test" })


  return (
    <FixedSizeList
      width={400}
      height={500}
      itemSize={40}
      itemCount={fields.length}
      itemData={fields}
      itemKey={(i) => fields[i].id}
    >
      {({ style, index, data }) => {
        const defaultValue =
          getValues()["test"][index].quantity ?? data[index].quantity


        return (
          <form style={style}>
            <Controller
              render={({ field }) => <input {...field} />}
              name={`test[${index}].quantity`}
              defaultValue={defaultValue}
              control={control}
            />
          </form>
        )
      }}
    </FixedSizeList>
  )
}

폼 테스트

테스트는 코드에 버그나 실수가 없도록 방지하며, 코드 리팩토링 시에도 안전성을 보장합니다.

testing-library를 사용하는 것을 추천합니다. 이 라이브러리는 간단하며, 사용자 행동에 더 초점을 맞춘 테스트를 작성할 수 있습니다.

1단계: 테스트 환경 설정

jest의 최신 버전과 함께 @testing-library/jest-dom을 설치하세요. react-hook-form은 MutationObserver를 사용해 입력을 감지하고, DOM에서 언마운트되도록 합니다.

참고: React Native를 사용 중이라면 @testing-library/jest-dom을 설치할 필요가 없습니다.

npm install -D @testing-library/jest-dom

setup.js 파일을 생성해 @testing-library/jest-dom을 임포트합니다.

CodeSandbox JS
import "@testing-library/jest-dom"

참고: React Native를 사용 중이라면 setup.js 파일을 생성하고, window 객체를 정의한 후, 다음 코드를 추가해야 합니다.

global.window = {}
global.window = global

마지막으로, jest.config.js에서 setup.js 파일을 포함하도록 설정을 업데이트합니다.

CodeSandbox JS
module.exports = {
  setupFilesAfterEnv: ["<rootDir>/setup.js"], // TypeScript 앱이라면 .ts로 변경
  // ...기타 설정
}

추가적으로, eslint-plugin-testing-library와 eslint-plugin-jest-dom을 설정해 테스트 작성 시 모범 사례를 따르고, 흔히 발생하는 실수를 방지할 수 있습니다.

2단계: 로그인 폼 생성

role 속성을 적절히 설정했습니다. 이 속성은 테스트 작성 시 유용하며, 접근성도 향상시킵니다. 더 자세한 정보는 testing-library 문서를 참고하세요.

CodeSandbox JS
import { useForm } from "react-hook-form"


export default function App({ login }) {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm()
  const onSubmit = async (data) => {
    await login(data.email, data.password)
    reset()
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">email</label>
      <input
        id="email"
        {...register("email", {
          required: "required",
          pattern: {
            value: /\S+@\S+\.\S+/,
            message: "Entered value does not match email format",
          },
        })}
        type="email"
      />
      {errors.email && <span role="alert">{errors.email.message}</span>}
      <label htmlFor="password">password</label>
      <input
        id="password"
        {...register("password", {
          required: "required",
          minLength: {
            value: 5,
            message: "min length is 5",
          },
        })}
        type="password"
      />
      {errors.password && <span role="alert">{errors.password.message}</span>}
      <button type="submit">SUBMIT</button>
    </form>
  )
}

3단계: 테스트 작성

다음은 테스트에서 다루려는 주요 기준입니다:

  • 제출 실패 테스트

    handleSubmit 메서드가 비동기적으로 실행되므로, waitFor 유틸리티와 find* 쿼리를 사용해 제출 피드백을 감지합니다.

  • 각 입력 필드의 유효성 검사 테스트

    사용자가 UI 컴포넌트를 인식하는 방식과 동일하게, *ByRole 메서드를 사용해 다양한 엘리먼트를 쿼리합니다.

  • 성공적인 제출 테스트

CodeSandbox JS
import { render, screen, fireEvent, waitFor } from "@testing-library/react"
import App from "./App"


const mockLogin = jest.fn((email, password) => {
  return Promise.resolve({ email, password })
})


it("should display required error when value is invalid", async () => {
  render(<App login={mockLogin} />)


  fireEvent.submit(screen.getByRole("button"))


  expect(await screen.findAllByRole("alert")).toHaveLength(2)
  expect(mockLogin).not.toBeCalled()
})


it("should display matching error when email is invalid", async () => {
  render(<App login={mockLogin} />)


  fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
    target: {
      value: "test",
    },
  })


  fireEvent.input(screen.getByLabelText("password"), {
    target: {
      value: "password",
    },
  })


  fireEvent.submit(screen.getByRole("button"))


  expect(await screen.findAllByRole("alert")).toHaveLength(1)
  expect(mockLogin).not.toBeCalled()
  expect(screen.getByRole("textbox", { name: /email/i })).toHaveValue("test")
  expect(screen.getByLabelText("password")).toHaveValue("password")
})


it("should display min length error when password is invalid", async () => {
  render(<App login={mockLogin} />)


  fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
    target: {
      value: "test@mail.com",
    },
  })


  fireEvent.input(screen.getByLabelText("password"), {
    target: {
      value: "pass",
    },
  })


  fireEvent.submit(screen.getByRole("button"))


  expect(await screen.findAllByRole("alert")).toHaveLength(1)
  expect(mockLogin).not.toBeCalled()
  expect(screen.getByRole("textbox", { name: /email/i })).toHaveValue(
    "test@mail.com"
  )
  expect(screen.getByLabelText("password")).toHaveValue("pass")
})


it("should not display error when value is valid", async () => {
  render(<App login={mockLogin} />)


  fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
    target: {
      value: "test@mail.com",
    },
  })


  fireEvent.input(screen.getByLabelText("password"), {
    target: {
      value: "password",
    },
  })


  fireEvent.submit(screen.getByRole("button"))


  await waitFor(() => expect(screen.queryAllByRole("alert")).toHaveLength(0))
  expect(mockLogin).toBeCalledWith("test@mail.com", "password")
  expect(screen.getByRole("textbox", { name: /email/i })).toHaveValue("")
  expect(screen.getByLabelText("password")).toHaveValue("")
})

테스트 중 act 경고 해결하기

react-hook-form을 사용하는 컴포넌트를 테스트할 때, 해당 컴포넌트에 비동기 코드를 작성하지 않았음에도 다음과 같은 경고가 발생할 수 있습니다:

경고: 테스트 내부에서 MyComponent에 대한 업데이트가 act(...)로 감싸지지 않았습니다.

CodeSandbox JS
import { useForm } from "react-hook-form"


export default function App() {
  const { register, handleSubmit } = useForm({
    mode: "onChange",
  })
  const onSubmit = (data) => {}


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("answer", {
          required: true,
        })}
      />
      <button type="submit">SUBMIT</button>
    </form>
  )
}
CodeSandbox JS
import { render, screen } from "@testing-library/react"
import App from "./App"


it("should have a submit button", () => {
  render(<App />)


  expect(screen.getByText("SUBMIT")).toBeInTheDocument()
})

이 예제에서는 명백한 비동기 코드가 없는 간단한 폼이 있으며, 테스트는 단순히 컴포넌트를 렌더링하고 버튼의 존재를 확인합니다. 그러나 여전히 act()로 감싸지 않은 업데이트에 대한 경고가 발생합니다.

이는 react-hook-form이 내부적으로 비동기 유효성 검사 핸들러를 사용하기 때문입니다. formState를 계산하기 위해 초기에 폼을 검증해야 하며, 이는 비동기적으로 수행되어 다른 렌더링을 유발합니다. 이 업데이트는 테스트 함수가 반환된 후에 발생하므로 경고가 발생합니다.

이 문제를 해결하려면 find* 쿼리를 사용하여 UI의 일부 요소가 나타날 때까지 기다리세요. 단, render() 호출을 act()로 감싸면 안 됩니다. 불필요하게 act로 감싸는 것에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

CodeSandbox JS
import { render, screen } from "@testing-library/react"
import App from "./App"


it("should have a submit button", async () => {
  render(<App />)


  expect(await screen.findByText("SUBMIT")).toBeInTheDocument()


  // 이제 비동기 동작이 완료될 때까지 UI를 기다렸으므로,
  // `get*` 쿼리를 사용하여 계속해서 검증할 수 있습니다.
  expect(screen.getByRole("textbox")).toBeInTheDocument()
})

Transform and Parse

네이티브 입력은 valueAsNumber나 valueAsDate를 사용하지 않으면 값을 string 형식으로 반환합니다. 이에 대한 자세한 내용은 이 섹션에서 확인할 수 있습니다. 하지만 이 방법은 완벽하지 않습니다. 여전히 isNaN이나 null 값을 처리해야 합니다. 따라서 변환 작업은 커스텀 훅 레벨에서 처리하는 것이 더 좋습니다. 다음 예제에서는 Controller를 사용하여 입력과 출력의 변환 기능을 포함시켰습니다. 커스텀 register를 사용해도 비슷한 결과를 얻을 수 있습니다.

CodeSandbox JS
import { Controller } from "react-hook-form"


const ControllerPlus = ({ control, transform, name, defaultValue }) => (
  <Controller
    defaultValue={defaultValue}
    control={control}
    name={name}
    render={({ field }) => (
      <input
        onChange={(e) => field.onChange(transform.output(e))}
        value={transform.input(field.value)}
      />
    )}
  />
)


// 사용 예시:
<ControllerPlus
  transform={{
    input: (value) => (isNaN(value) || value === 0 ? "" : value.toString()),
    output: (e) => {
      const output = parseInt(e.target.value, 10)
      return isNaN(output) ? 0 : output
    },
  }}
  control={control}
  name="number"
  defaultValue=""
/>

여러분의 지원에 감사드립니다

React Hook Form이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.