[Legacy][React] react-hook-form 소개 및 사용법 - 1

[React] react-hook-form 소개 및 사용법 - 1

React 뿐만이 아니라 웹, 앱 등 플랫폼을 개발한다면 form을 사용해야 하는 경우가 많이 있을 것이다. React에서 form을 다룰 때 사용하는 라이브러리가 여러 개 있지만 이번 게시글에서는 react-hook-form을 다루어보며 알아보도록 하자. 해당 게시글에 사용된 react-hook-form은 Version 7이니 참고하면 좋을 것 같고, react-hook-form의 자세한 소개 내용은 react-hook-form 공식 홈페이지에서 확인할 수 있다. 홈페이지 이동하기

다루는 내용

당연히 모든 내용을 여기서 다룰 수는 없다. 그래도 이 게시글 시리즈를 보고 난 후 react-hook-form에 대한 방향성을 얻어가 프로젝트에 반영할 수 있을 것이라는 생각은 든다. react-hook-form에서 제공해주는 hook을 input 컴포넌트에 적용해보는 연습을 하며 이후 제공되는 기본적인 validation이 아닌 yup을 통해 더 깊게 validation 하는 연습을 해보도록 하자.

 

이번 게시글에서는 기본적인 string, number, object 타입을 다루는 연습을 해볼 것이다. 우선 코드를 먼저 확인해보자.

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

// #1 - 초기 값
const initValue = {
  name: "",
  animal: {
    name: "",
    color: ""
  },
  money: ""
};

const Basic = () => {
  const { control, handleSubmit } = useForm({
    mode: "onSubmit",
    defaultValues: initValue // #2 - defaultValues는 항상 넣어주도록 하자.
  });

  const onSubmit = data => console.log(data); // #5 - 최종 결과 출력

  return (
    // #5 - 최종 결과 출력
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        // #3 - name은 변수명으로 하자
        name="name"
        control={control}
        // #4 - render 그려지는 컴포넌트
        render={({ field }) => {
          console.log("### field", field);
          return <input {...field} />;
        }}
      />
      <Controller
        name="animal.name"
        control={control}
        render={({ field }) => {
          return <input {...field} />;
        }}
      />
      <Controller
        name="animal.color"
        control={control}
        render={({ field }) => {
          return <input {...field} />;
        }}
      />
      <Controller
        name="money"
        control={control}
        render={({ field }) => {
          return <input {...field} />;
        }}
      />
      {/* #5 - 최종 결과 출력 */}
      <input type="submit" />
    </form>
  );
};

export default Basic;

위 코드를 보면 평소에 알던 react와는 약간 다른 모습인데 금방 이해할 수 있을 것이다. #n으로 주석처리를 한 후 간단한 설명을 해두었는데 번호 순서대로 약간을 설명을 추가하겠다.

■ #1, #2 - 초기 값, defaultValues

필자 같은 경우 초기 값을 컴포넌트 위에 선언한 후 useForm hook에 defaultValues로 넘겨주었다. 이러한 경우 input과 같은 control 컴포넌트에게 필요한 초기 값을 넣어줄 수 있기 때문에 웬만하면 항상 넣어주도록 하자.

■ #3 - name

Controller 컴포넌트에 name props를 넘겨주고 있다. 이때 넘겨주어야 하는 값은 바로 변수명 (변수 값에 접근할 수 있는)이다. 위 코드 예시를 보면 name, animal.name, animal.color, money 값을 주었는데 값을 보면 알 수 있듯이 변수가 일반 string, number 값을 가지면 그대로 넣어주면 되고, object인 경우 값에 접근하는 것처럼 object.key 형식으로 name 값을 주면 된다. 이렇게 적으니 앞서 변수명이라고 하였는데, 변수값에 접근할 수 있는 방법을 적는 다는 표현이 더 맞는 것 같다.

■ #4 - render

렌더링 되는 최종적인 컴포넌트이다. console.log로 field를 출력해보면 아래 이미지처럼 나온다.

그 안에 name, onBlur, onChange, ref, value 등 값이 있는데 그걸 그대로 input 컴포넌트에 넣어준 것이다.

■ #5 - 출력

마지막 onSubmit을 하게되면 최종적인 값이 출력이 된다.

 

간단하게 react-hook-form 사용하는 방법을 알아보았다. 다음 게시글에서는 react-hook-form에서 배열을 다루는 useFieldArray를 확인해보도록 하자.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.