[TIL] 0105

form 상태 관리 리팩토링

문제점

기존에 Series작성, 수정 페이지에서 Form을 구현할 때
useForm과 checkBox의 상태를 분리했었다.

// SeriesForm
const [checkedInputs, setCheckedInputs] = useState([]);
const { values, handleChange, handleSubmit, handleImageUpload } = useForm({
    initialValues: {
      title: '',
      introduceText: '',
      introduceSentence: '',
      price: 0,
      subscribeStartDate: '',
      subscribeEndDate: '',
      seriesStartDate: '',
      seriesEndDate: '',
      category: '',
      uploadTime: '',
      articleCount: 0,
      thumbnailFile: '',
      thumbnailUrl: '',
    },

value 하나의 경우말고 다수인 경우 어떻게 상태를 재할당해야할지 몰랐기 때문.

// useForm
setValues({ ...values, [name]: value });

해결 방법

useForm에 이벤트 핸들링 함수에 input type이 checkbox인 경우의 상태 변화 로직을 추가해줬다.

• 초기 값을 빈 배열로 설정
• onChange가 발생할 때마다 해당 key(name)에 배열을 재할당하는데
  • 체크를 설정하는 경우: 이전 값들에 새로운 값을 누적한다
  • 체크를 해제하는 경우: 기존 값들 중에서 새로 들어온 value와 같지 않은 것들만 걸러서 넣어준다

// useForm
  const handleChange = e => {
    const { name, value, type } = e.target;

    if (type === 'checkbox') {
      const { name, value, checked } = e.target;
      checked
        ? setValues({ ...values, [name]: [...values[name], value] })
        : setValues({
            ...values,
            [name]: values[name].filter(el => el !== value),
          });
      return;
    }

    setValues({ ...values, [name]: value });
  };

const { values, setValues, handleChange, handleSubmit, handleImageUpload } =
    useForm({
      initialValues: {
        thumbnailFile: '',
        category: '',
        title: '',
        introduceText: '',
        introduceSentence: '',
        subscribeStartDate: '',
        subscribeEndDate: '',
        seriesStartDate: '',
        seriesEndDate: '',
        uploadTime: '',
        articleCount: '',
        price: '',
        uploadDate: [], // checkbox의 상태를 useForm 상태에 통합
        thumbnailUrl: '',
      },

Hook의 사용 이유와 목적

재사용되는 상태 관리 로직을 분리하기 위함

• state에 값 할당(useEffect사용해 라이프사이클에 따라 할당할 수도 있음)
• 이벤트핸들러 함수 작성

등 상태를 변화시키는 모든 로직을 담은 함수이다.
로직을 작성하고나서의 결과물인
상태 값, setState, 이벤트핸들러 함수, setState를 반환시키는데 필요한 것만 불러와서 사용하면 된다.