Immer를 사용하여 폼 유효성 검사 구현하기

27 Sep 2023

immer

폼의 유효성 검사는 웹 애플리케이션에서 중요한 부분입니다. 사용자로부터 입력을 받을 때, 이를 검증하고 필요한 조건을 충족하는지 확인해야 합니다. 이번 글에서는 Immer라는 라이브러리를 사용하여 폼의 유효성 검사를 구현하는 방법을 살펴보겠습니다.

Immer란?

Immer는 불변성(immutable)을 유지하면서도 코드를 간편하게 작성할 수 있게 도와주는 라이브러리입니다. 이 라이브러리를 사용하면 상태를 직접 수정하지 않고, 새로운 상태를 생성하면서 변경할 수 있습니다.

폼 유효성 검사 구현하기

우선, Immer를 프로젝트에 설치합니다.

npm install immer

다음은 예제 코드입니다.

import produce from 'immer';

const initialState = {
  username: '',
  password: '',
  email: '',
  errors: {
    username: '',
    password: '',
    email: '',
  },
};

const validateForm = (state) => {
  return produce(state, (draft) => {
    draft.errors.username = state.username ? '' : '사용자 이름을 입력해주세요.';
    draft.errors.password = state.password ? '' : '비밀번호를 입력해주세요.';
    draft.errors.email = state.email ? '' : '이메일을 입력해주세요.';
  });
};

const handleSubmit = () => {
  const formState = {
    username: 'John',
    password: '',
    email: 'john@example.com',
    errors: {
      username: '',
      password: '',
      email: '',
    },
  };

  const nextState = validateForm(formState);
};

console.log(nextState);

위의 코드에서 validateForm 함수는 produce 함수를 사용하여 새로운 상태를 생성합니다. 이 함수는 현재 상태를 첫 번째 인자로 받고, 상태를 변경하는 작업을 두 번째 인자로 받습니다. produce 함수가 반환하는 값은 변경된 상태입니다.

handleSubmit 함수에서는 샘플 폼 상태를 생성하고, validateForm 함수를 사용하여 유효성 검사를 수행한 후, 변경된 상태를 출력합니다.

위의 코드는 간단한 예시일 뿐이며, 실제로는 더 복잡한 조건과 로직을 추가해야 할 수 있습니다. Immer를 사용하면 복잡한 상태를 간편하게 다룰 수 있고, 유효성 검사와 같은 작업을 더 쉽게 구현할 수 있습니다.

#Immer #폼유효성검사