Custom Hooks-input

Custom Hooks 기본

import { useState, useCallback } from 'react';

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);
  
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  }, []);
  const reset = useCallback(() => setForm(initialForm), [initialForm]);
  return [form, onChange, reset];
}

export default useInputs;

이전

//App.js
import { useState } from "react";

export default function App() {
  const [firstNameValue, setFirstNameValue] = useState("");
  const [lastNameValue, setLastNameValue] = useState("");
  const [nameArr, setNameArr] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setNameArr([...nameArr, `${firstNameValue} ${lastNameValue}`]);
  };

  return (
    <div className="App">
      <h1>Name List</h1>
      <div className="name-form">
        <form onSubmit={handleSubmit}>
          <div className="name-input">
            <label>성</label>
            <input
              value={firstNameValue}
              onChange={(e) => setFirstNameValue(e.target.value)}
              type="text"
            />
          </div>
          <div className="name-input">
            <label>이름</label>
            <input
              value={lastNameValue}
              onChange={(e) => setLastNameValue(e.target.value)}
              type="text"
            />
          </div>
          <button>제출</button>
        </form>
      </div>
      <div className="name-list-wrap">
        <div className="name-list">
          {nameArr.map((el, idx) => {
            return <p key={idx}>{el}</p>;
          })}
        </div>
      </div>
    </div>
  );
}

이후

//App.js
import { useState } from "react";
import useInput from "./util/useInput";
import Input from "./component/Input";

export default function App() {
  const [firstNameValue, firstNameBind, firstNameReset] = useInput("");
  const [lastNameValue, lastNameBind, lastNameReset] = useInput("");
  const [nameArr, setNameArr] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setNameArr([...nameArr, `${firstNameValue} ${lastNameValue}`]);
    firstNameReset();
    lastNameReset();
  };

  return (
    <div className="App">
      <h1>Name List</h1>
      <div className="name-form">
        <form onSubmit={handleSubmit}>
          <Input label={"성"} value={firstNameBind} />
          <Input label={"이름"} value={lastNameBind} />
          <button>제출</button>
        </form>
      </div>
      <div className="name-list-wrap">
        <div className="name-list">
          {nameArr.map((el, idx) => {
            return <p key={idx}>{el}</p>;
          })}
        </div>
      </div>
    </div>
  );
}

//component/Input.js
function Input({ label, value }) {
  return (
    <div className="name-input">
      <label>{label}</label>
      <input {...value} type="text" />
    </div>
  );
}

export default Input;

//util/useInput.js
import { useState } from "react";

function useInput() {
  const [value, setValue] = useState("");

  const bind = {
    value,
    onChange: (e) => setValue(e.target.value)
  };

  const reset = () => {
    setValue("");
  };

  return [value, bind, reset];
}

export default useInput;

참고

코드스테이츠 교과서
React - Custom Hook으로 Input 관리해보기