[복습] 제어컴포넌트의 기본

폼의 입력값을 처리하는 컴포넌트의 기본예제

import { useState } from 'react';

export default function StateForm() {
  const [myForm, setMyForm] = useState({
    name: '김철수',
    age: 20
  });

  const handleForm = e => {
    setMyForm({
      const { name, value } = e.target;
      setForm(prevForm => ({
    	/* 기존의 객체정보는 모두 그대로 복사 */
        ...prevForm,
    	/* 변경된 부분만 갱신 */
        [name]: value
      }));
    });
  };
  
  const show = () => {
    console.log(`안녕하세요, ${myForm.name}（${myForm.age}세） 님！`);
  };
  
  return (
    <form>
      <div>
        <label htmlFor="_name_">이름: </label>
        <input id="_name_" name="name" type="text" 
    		onChange={handleForm} value={myForm.name} />
      </div>
      <div>
        <label htmlFor="_age_">나이:</label>
        <input id="_age_" name="age" type="number" 
			onChange={handleForm} value={myForm.age} />
      </div>
      <div>
        <button type="button" onClick={show}>보내기</button>
      </div>
      <p>안녕하세요, {myForm.name}（{myForm.age}세） 님！</p>
    </form>
  );
}

• React Hook Form 써서 코드 짧게 쓰는 방법도 많이 사용된다. 또한, 유효성검사 라이브러리인 Yup 으로 유효성 검사 자동화하는 방법을 쓰는 것도 좋다.

// 먼저 라이브러리를 설치한다.
npm install react-hook-form
npm install yup

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

// 1. Yup 스키마 작성
const schema = yup.object({
  name: yup.string().required('이름은 필수입니다.'),
  age: yup.number().required('나이는 필수입니다.').positive('양수만 가능합니다.').integer('정수여야 합니다.')
}).required();

export default function MyForm() {
  // 2. useForm에서 yupResolver를 적용
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>이름</label>
        <input {...register('name')} />
        {errors.name && <p>{errors.name.message}</p>}
      </div>

      <div>
        <label>나이</label>
        <input type="number" {...register('age')} />
        {errors.age && <p>{errors.age.message}</p>}
      </div>

      <button type="submit">제출</button>
    </form>
  );
}
/*
* useForm()	  폼을 쉽게 관리할 수 있게 해주는 Hook
* register('name')	  input을 폼에 등록(바인딩)하는 명령어
* handleSubmit(onSubmit)	제출할 때 validation 검사 + 데이터 전달
* errors.name, errors.age	 입력 검증 실패 시 에러 정보 담긴 객체

* yup.object({})	입력값 전체를 객체처럼 검증하는 스키마 생성
* yup.string().required()	문자열이고, 필수 입력인지 검증
* yup.number().positive().integer()	숫자, 양수, 정수 조건 검증
* resolver: yupResolver(schema)	이 스키마를 React Hook Form에 연결해서 자동검증
* errors.name.message	에러 메시지를 바로 출력
*/