1011 TIL-U

오늘은 뭘 했을까,내일은 쉴까, 쉬고싶다.
Nevertheless,,,,,,

Section 17 양식 및 사용자 입력 작업

오늘은 리액트에서 양식을 처리하고 입력 유효성 검사를 효율적으로 구현하는 방법에 대해 다뤄보겠다.

formData로 사용자 입력 관리
입력 필드에서 blur 이벤트가 발생했을 때 유효성 검사
form 제출 시 유효성 검사
유효성 검사 로직을 외부로 아웃소싱하는 방법

TIL1) formData 관리

리액트에서 양식을 다룰 때, 양식 요소의 값은 상태로 관리됨. 이 상태를 이용해 입력 값을 추적하고, 이를 통해 유효성 검사를 처리할 수 있다. useState 훅을 사용해 formData 상태를 설정하고, 이를 통해 각 입력 필드의 값을 관리한다.

import { useState } from 'react';

function FormComponent() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
  });

  // 입력값이 변경될 때 호출되는 핸들러
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  return (
    <form>
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleInputChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleInputChange}
      />
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleInputChange}
      />
    </form>
  );
}

TIL2) blur 상태에서 입력 유효성 검사

blur 상태에서는 사용자가 입력 필드를 떠났을 때 유효성 검사를 진행합니다. 이 방법은 사용자 경험을 개선할 수 있으며, 즉각적인 피드백을 제공해 입력 오류를 바로 알려줌

const handleBlur = (e) => {
  const { name, value } = e.target;
  if (!value) {
    console.log(`${name} 필드를 입력해야 합니다.`);
    // 유효성 검사 실패 처리
  } else {
    console.log(`${name} 유효성 검사 통과`);
  }
};

이 코드를 입력 필드에 연결하면, 필드를 떠났을 때 유효성 검사가 자동

<input
  type="text"
  name="username"
  value={formData.username}
  onChange={handleInputChange}
  onBlur={handleBlur}
/>

TIL3)form 제출 시 유효성 검사

유효성 검사를 필드마다 하는 것도 중요하지만, form 제출 시 전체 입력에 대해 유효성 검사를 수행하는 것도 필요하다. 이는 모든 입력값을 한 번에 확인하여 사용자가 오류를 놓치지 않게 할 수 있다아.....

const handleSubmit = (e) => {
  e.preventDefault();
  // 간단한 유효성 검사 로직
  if (!formData.username || !formData.email || !formData.password) {
    console.log('모든 필드를 입력해야 합니다.');
  } else {
    console.log('폼 제출 성공');
  }
};

TIL4)유효성 검사 로직 아웃소싱

입력 유효성 검사가 많아질수록 코드가 복잡해질 수 있기 때문에, 유효성 검사를 외부 함수로 분리하는 것이 좋다. 이렇게 하면 가독성을 높이고, 유효성 검사를 재사용할 수 있다.

유효성 검사를 담당하는 별도의 파일을 생성하여 로직을 분리

// validation.js
export const validateField = (name, value) => {
  switch (name) {
    case 'username':
      return value.length > 3 ? '' : '사용자 이름은 3자 이상이어야 합니다.';
    case 'email':
      return /\S+@\S+\.\S+/.test(value) ? '' : '유효한 이메일을 입력해주세요.';
    case 'password':
      return value.length >= 6 ? '' : '비밀번호는 6자 이상이어야 합니다.';
    default:
      return '';
  }
};

import { validateField } from './validation';

const handleBlur = (e) => {
  const { name, value } = e.target;
  const errorMessage = validateField(name, value);
  if (errorMessage) {
    console.log(errorMessage);
  } else {
    console.log(`${name} 유효성 검사 통과`);
  }
};

Learned

이 방식으로 양식을 다루면 코드가 더 체계적이고 유지보수가 용이하다. formData로 데이터를 관리하고, blur 이벤트와 form 제출 시 유효성 검사를 적용하며, 유효성 검사 로직을 외부로 분리함으로써 복잡성을 줄일 수 있다.

유효성 검사를 할때, 단지 formdata에 대해서만 알았고 그렇게만 활용했지만, 다양하게 해봐야겠다.

제발.