TIL 45. 2024-03-04

기존 useHook을 사용하는 방법을 변경

기존의 (useHook)

import { useState } from 'react';

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handler = (e) => {
    setValue(e.target.value);  
  }
  
  const reset = () => {
    setValue('');
  };

  return [value, handler, reset];
};

export default useInput;

  const [inputPassword, onChangePasswordCheckHandler, resetPasswordCheck] = useInput();
  const [title, onChangeTitleHandler, resetTitle] = useInput(review.title);
  const [content, onChangeContentHandler, resetContent] = useInput(review.content);

변경된 (useHook)

import { useState } from 'react';

const useInput = (initialValue = {}) => {
  const [formState, setFormState] = useState(initialValue);

  const onChangeHandler = (e) => {
    //name: key (여래개의 input 값을 구분)
    const { name, value } = e.target;
    //[name]: value는 객체에 동적으로 속성을 추가하는 방법
    //이전 상태의 다른 속성들은 그대로 유지되고, name 속성의 값은 value로 업데이트
    setFormState((prev) => ({ ...prev, [name]: value }));
  };

  const formReset = () => {
    // 초기값을 사용하여 상태를 초기화한다.
    setFormState(initialValue);
  };

  return { formState, setFormState, onChangeHandler, formReset };
};

export default useInput;

 const { formState, onChangeHandler, formReset } = useInput({
    title: review.title,
    content: review.content,
    password: ''
  });