[react-hook-form] MUI와 함께 사용하기(Controller를 곁들인...)

 

 

최근 react-hook-form과 MUI를 함께 사용했던 경험이 있었는데 이에 관한 내용을 정리해보려한다.

 

왜 raect-hook-form을 사용할까? 🤔

리액트를 사용해서 폼을 다룰 땐 유효성 검사를 위해 제어 컴포넌트를 사용하는 경우가 많다.
즉, 사용자가 입력하는 값들을 모두 state로 관리하고 업데이트 한다.

하지만 이와 관련하여 몇 가지 문제점이 있다!

 

제어 컴포넌트를 사용할 때 문제점

1. 렌더링 이슈

react에서 컴포넌트 리렌더링이 발생하는 조건 중 하나는 state의 값이 변했을 때이다. 모든 값이 state로 연결 되어  있기 때문에 하나의 값이 변하더라도 많은 리렌더링이 발생하게 된다. 

 

2. 코드의 가독성

리액트에서는 제어 컴포넌트로 폼을 다루게 된다. 이를 위해 각 요소마다 state를 선언해주고 state를 다루기 위한 핸들링 함수, 에러와 유효성 검증을 위한 함수 등의 필요로 인하여 코드가 길어지게 된다. 

 

😎 react-hook-form 라이브러리를 사용한다면? 이러한 문제점들을 해결할 수 있다!

 

 

react-hook-form과 MUI 함께 사용하기

react-hook-form은 비제어 컴포넌트를 사용하는 라이브러리이다.

하지만 MUI 는 React 기반의 UI 라이브러리로 제어 컴포넌트 방식으로 구현되어있다.

react-hook-form의 Controller이나 useController를 사용하면 두 라이브러리를 함께 사용할 수 있다.

참고로 이번 포스팅에선 Controller를 사용하는 방법을 다루고자 한다.

 

Controller 컴포넌트를 사용하는 방법은 간단하다.

MUI 컴포넌트를 Controller 컴포넌트로 감싸고 control을 추가해준 후 요소에 맞는 이름을 설정해주면 된다.

rules 를 사용하면 유효성 검사도 설정할 수 있다.

// form.tsx
<form onSubmit={handleSubmit(onSubmit)}>
   	...
    <Controller
      name="name"
      control={control}
      rules={{
        required: '값을 입력 해주세요',
        maxLength: 20,
        pattern: {
          value: /^[ㄱ-ㅎ가-힣a-zA-Z\s]+$/,
          message: '한글, 영어, 공백만 입력 가능 합니다.',
        },
      }}
      render={({ field }) => (
        <TextField
          {...field}
          variant="outlined"
          fullWidth
          margin="normal"
          error={Boolean(errors.name)}
          helperText={errors.name?.message}
        />
      )}
    />
  	...
    <Button type="submit" variant="contained">
      버튼
    </Button>
</form>

 

코드 개선하기

이름, 이메일주소, 핸드폰 번호를 추가하고 유효성 검사 규칙까지 다 설정해주니 코드가 너무 길어졌다..🙄

이런 문제점을 해결하기 위해 관련된 부분은 validations.ts 파일로 분리해서 관리하는 방식으로 개선해보았다.

 

// validations.ts 
export const isValidName = (value: string): boolean => {
  const pattern = /^[ㄱ-ㅎ가-힣a-zA-Z\s]+$/;
  return pattern.test(value);
};

export const isValidEMail = (value: string): boolean => {
  const pattern = /[a-z0-9]+@[a-z]+\.[a-z]{2,3}/;
  return pattern.test(value);
};

 

// form.tsx
<form onSubmit={handleSubmit(onSubmit)}>
   	...
    <Controller
      name="name"
      control={control}
      rules={{
        required: '값을 입력 해주세요',
        maxLength: 20,
        validate: (value) =>
          isValidName(value) || '한글, 영어, 공백만 입력 가능 합니다.',
      }}
      render={({ field }) => (
        <TextField
          {...field}
          variant="outlined"
          fullWidth
          margin="normal"
          error={Boolean(errors.name)}
          helperText={errors.name?.message}
        />
      )}
    />
  	...
    <Button type="submit" variant="contained">
      버튼
    </Button>
</form>

 

 

결과 화면

 

위처럼 잘 작동하는 것을 확인할 수 있었다!

 

하지만 다 만들고 나니 중복된 코드가 너무 많고...조금 더 간결하게 작성할 수 있을 것 같다는 생각이 든다!

 

 

 

---

Reference

https://www.react-hook-form.com/api/usecontroller/controller/

Controller

 

https://tech.osci.kr/react-hook-form-with-mui/

react-hook-form 과 MUI 함께 사용하기 - 오픈소스컨설팅 테크블로그 %