React [useInput()] 훅사용법 폼데이터 보내기 벨류와 체인지값 바인딩 액션.

 

이 useInput 훅은 입력 필드의 값을 관리하는 데 사용됩니다. 각각의 useInput 호출은 value와 onChange를 포함하는 객체를 반환합니다. 이렇게 반환된 객체를 컴포넌트에서 사용하면 해당 입력 필드의 상태를 간편하게 관리할 수 있습니다.

 

아래는 커스텀훅.  한번만들어두면 가져다 사용하면 되지않을까?

import { useState } from "react";

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

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
};

export default useInput;

아래는 커스텀훅을 가져다 사용방법.

import React from "react";
import useInput from "../hooks/useInput";

export default function MainFormAnswer() {
  const username = useInput();
  const password = useInput();
  const email = useInput();

  const formData = {
    username: username.value,
    email: email.value,
    password: password.value,
  };

  // formData를 다른 함수 또는 컴포넌트에 전달할 수 있습니다.

  return (
    <main className="container">
      <div className="header">Welcome, 👋</div>
      <hr />
      <label htmlFor="username">이름</label>
      <input type="text" id="username" {...username} />
      <hr />
      <label htmlFor="email">이메일</label>
      <input type="email" id="email" {...email} />
      <hr />
      <label htmlFor="password">비밀번호</label>
      <input type="password" id="password" {...password} />
      <hr />
    </main>
  );
}

 

`...` 문법은 전개 연산자(Spread Operator)로 알려져 있습니다. 이것은 객체나 배열의 속성이나 요소를 펼쳐서 다른 객체나 배열에 포함시키는 역할을 합니다. 

여기서 사용된 `{...username}`, `{...email}`, 그리고 `{...password}`는 `useInput` 훅에서 반환된 객체의 모든 속성을 해당하는 `<input>` 엘리먼트에 전개하여 적용하는 역할을 합니다. 이것은 주로 React에서 상태 및 이벤트 처리와 함께 사용됩니다.

다시 말해, `useInput` 훅이 반환하는 객체의 모든 속성과 값을 해당하는 `<input>` 엘리먼트에 자동으로 적용시키는 것입니다.