[React] Custom Hook : input 로직 분리하기

Custom Hook : input 로직 분리하기 

- [Hook] Custom Hook 예시 : 여러 input에 의한 상태 변경을 할 때 쓸 수 있는 useInputs

 

1. 파일 구조 

.
├── public
│   └── index.html
├── src
│   ├── component
│       └── Input.js
│   └── util
│       └── useInput.js
│   ├──  App.js
│   └──  index.js
└── package.json

 

App.js

- Custom Hook useInput을 사용해서 받아오는 값 중 하나를 예시로 들어서 보면 firstForm은 커스텀 훅 안에 상태에서 받아온 e.target.value 값을 할당 받아있는 상태임. 

- useInput의 리턴 값은 [form, onChange, reset] 이렇게 이루어져 있음

import { useState } from "react";
import useInput from "./util/useInput";
import Input from "./component/Input";
import "./styles.css";

export default function App() {
  const [firstForm, firstNameValue, firstReset] = useInput("");
  const [lastForm, lastNameValue, lastReset] = useInput("");
  const [nameArr, setNameArr] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setNameArr([...nameArr, `${firstForm} ${lastForm}`]);
    firstReset();
    lastReset();
  };

  return (
    <div className="App">
      <h1>Name List</h1>
      <div className="name-form">
        <form onSubmit={handleSubmit}>
          <Input labelText={"성"} value={firstNameValue} />
          <Input labelText={"이름"} value={lastNameValue} />
          <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

- App.js에서 부터 label 이름, value 값을 내려받음 

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

export default Input;

 

util/useInput.js

- 리턴할 때 배열로 리턴함. 리턴하는 배열은 [form, onChange, reset]

- onChange는 상태를 e.target.value로 바꿔주는 함수 자체를 리턴함 

- reset은 상태를 초기값으로 비워주는 함수 자체를 리턴함

import { useState } from "react";

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);
  // change
  const onChange = {
    form,
    onChange: (e) => {
      setForm(e.target.value);
    }
  };

  const reset = () => {
    setForm(initialForm);
  };

  return [form, onChange, reset];
}

export default useInputs;

 

2. 실습한 예제