사용자 지정 후크에 반응하여 양식 데이터 업데이트

반응 커스텀 훅의 목적을 보여줄 수 있는 이미지를 검색해 보았습니다. 가끔 검색하다가 찾았습니다. 반응 사용자 지정 후크의 목적인 동일한 리소스를 공유하는 것 같습니다. 공식 사용자 지정 후크 페이지here에서 정의와 목적을 더 명확하게 확인할 수 있습니다. 사용자 지정 후크는 완전히 격리된 구성 요소 내에서 별도의 상태와 효과를 유지합니다.

useState, useEffect, useContext 등과 같은 React Hooks에 익숙하다고 가정합니다. 여기서 보여주려는 것은 양식 필드 값을 업데이트하는 기본 사용자 지정 후크입니다. 응용 프로그램에서 우리는 여러 양식을 가질 수 있으며 양식 필드의 값을 저장하기 위해 상태 개체를 유지 관리해야 할 수도 있습니다(제3자 양식 라이브러리를 사용하지 않는 경우 의미가 있음). 처음에는 업데이트할 각 양식에 대해 별도의 논리를 작성했습니다. 이 업데이트는 기본값/미리 채워진 값으로 초기화하거나 각 필드의 변경 시 업데이트할 수 있습니다.

아래와 같이 커스텀 후크 이전에 내가 하고 있던 일.

일부 기본 로그인 양식

import { useState } from 'react';

export default function Loginpage() {

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

  function changeField(e){
    let name = e.target.name;
    let value = e.target.value;
    let formObject = { ...formData };
    setFormData({ ...formObject, [name]: value });
  }
  return (
    <div className="container" style={{ maxWidth: "480px" }}>
      <div className="card shadow mt-5">
        <div className="card-body">
          <form className="form-horizontal" onSubmit={checkLogin}>
            <fieldset>
              <legend>Login Form</legend>
              <div className="form-group">
                <label className="control-label" htmlFor="textinput">Email</label>
                <div className="">
                  <input id="email" onChange={changeField} name="email" type="text" placeholder="Enter your email" className="form-control input-md" required="" />
                </div>
              </div>
              <div className="form-group">
                <label className="control-label" htmlFor="passwordinput">Password</label>
                <div className="">
                  <input id="password" onChange={changeField} name="password" type="password" placeholder="Enter your password" className="form-control input-md" required="" />

                </div>
              </div>
              <button type="submit" className="btn btn-info btn-block" disabled={!formData.email || !formData.password}>Submit</button>
            </fieldset>
          </form>

        </div>
      </div>
    </div>
  )
}

이 항목의 범위를 벗어나므로 checkLogin 메서드를 제거했습니다.

formData를 업데이트하는 동일한 코딩 논리가 다른 양식에도 적용됩니다. 그래서 아래 코드와 같이 사용자 지정 후크를 만듭니다.

useUpdateForm 후크

import { useState } from 'react';

function useUpdateForm(initValue = {}) {
  const [formData, setFormData] = useState(initValue);

  const changeField = (e) => {
    let formObject = { ...formData };
    setFormData({ ...formObject, [e.target.name]: e.target.value });
  }

  const resetForm = (initialValue) => {
    let formObject = { ...formData };
    setFormData({ ...formObject, ...initialValue });
  }

  return [formData, changeField, resetForm];

}

export default useUpdateForm;

양식 데이터를 재설정하는 방법을 하나 더 추가했습니다. 언제든지 양식을 재설정하려는 경우에 유용했습니다.

이제 내 구성 요소가 어떻게 생겼는지

import { useState } from 'react';
import useUpdateForm from "./../utils/submitFormHook";
export default function Loginpage() {

  const [formData, changeField] = useUpdateForm({ email: '', password: '' });


  return (
    <div className="container" style={{ maxWidth: "480px" }}>
      <div className="card shadow mt-5">
        <div className="card-body">
          <form className="form-horizontal" onSubmit={checkLogin}>
            <fieldset>
              <legend>Login Form</legend>
              <div className="form-group">
                <label className="control-label" htmlFor="textinput">Email</label>
                <div className="">
                  <input id="email" onChange={changeField} name="email" type="text" placeholder="Enter your email" className="form-control input-md" required="" />
                </div>
              </div>
              <div className="form-group">
                <label className="control-label" htmlFor="passwordinput">Password</label>
                <div className="">
                  <input id="password" onChange={changeField} name="password" type="password" placeholder="Enter your password" className="form-control input-md" required="" />

                </div>
              </div>
              <button type="submit" className="btn btn-info btn-block" disabled={!formData.email || !formData.password}>Submit</button>
            </fieldset>
          </form>

        </div>
      </div>
    </div>
  )
}

일부 추가 코드 줄이 제거되었으며 이는 다른 형식에서도 공통 논리가 되었습니다.

개선 영역
이것은 반응 사용자 지정 후크에 대한 매우 기본적인 예입니다. 항상 개선의 기회가 있을 것입니다. 여기에 유효성 검사 논리를 추가할 수 있습니다.