REACT_HOOKS useInput 예제 (간단한 회원가입폼 만들기)

Eunsu·2021년 10월 26일

@ React_HOOKS

목록 보기

1/11

아.. 멀미가 난다... 그래도 구현한
input회원가입 폼 덩어리..

구현해야할 기능들

inputValue useInput으로 관리하기

submit 버튼 누르면 value초기화 되고 input value 담은 object App.js로 보내기

SignUp.jsx 에서 받은 데이터 배열에 넣기

엄청난 하드코딩으로 만들어진 첫 코드... 리팩토링 해서 많이 변형시킬꺼임.. 처음이라 개떡같은 코드임

useInput 이용해서 간단한 회원가입 만들기

1. UI구현

//SignUp.jsx

import "./SignUp.css";

const SignUp = () => {
  return (
    <div className="signUp">
      <form action="" autoComplete="off" >
        <div className="inputBox">
          <label htmlFor="id">Name</label>
          <input name="id" type="text"  />
        </div>
        <div className="inputBox">
          <label htmlFor="age">Age</label>
          <input type="text" name="age"  />
        </div>
        <div className="inputBox">
          <label htmlFor="gender">Gender</label>
          <input
            type="text"
            name="gender"     
          />
        </div>
        <div className="inputBox">
          <label htmlFor="phone">Phone</label>
          <input
            type="text"
            name="phone"         
          />
        </div>
        <div className="inputBox">
          <label htmlFor="email">Email</label>
          <input
            type="text"
            name="email"     
          />
        </div>
        <div className="inputBox">
          <label htmlFor="address">Address</label>
          <input
            type="text"
            name="address"
          />
        </div>
      </form>
      <button className=" btn" >
        Submit!
      </button>
    </div>
  );
};
export default SignUp;

구현된모습

2. useInput(custom Hook)이용해서 setState관리하기

import { useState } from "react";
import "./SignUp.css";

const SignUp = () => {
  const useInput = (initialValue) => {
    const [value, setValue] = useState(initialValue);
    const handler = (event) => {
      setValue(event.target.value);
    };
    return [value, handler];
  };
  return (
  <div className="signUp">
    ...생략
  )

코드의 역활은 initialValue를 받아 state의 초기값에 할당하고, onChange 함수를 만들어 value와 handler를 리턴시킨다.

3. useInput사용하기

import { useState } from "react";
import "./SignUp.css";

const SignUp = ({}) => {
  const useInput = (initialValue) => {
    const [value, setValue] = useState(initialValue);
    const handler = (event) => {
      setValue(event.target.value);
    };
    return [value, handler];
  };

  const [id, onChangeId] = useInput("");
  const [age, onChangeAge] = useInput("");
  const [gender, onChangeGender] = useInput("");
  const [phone, onChangePhone] = useInput("");
  const [email, onChangeEmail] = useInput("");
  const [address, onChangeAddress] = useInput("");

  return (
    <div className="signUp">
      <form action="" autoComplete="off" >
        <div className="inputBox">
          <label htmlFor="id">Name</label>
          <input name="id" type="text" value={id} onChange={onChangeId} />
        </div>
{...이하 생략}

useInput함수는 value와 handler를 return한다.
value : id ,
handler:onChangeId
함수가 된다.
[arrIndex[0],arrIndex[1] ... ]로 받아올 수 있는 이유는 ES6의 새로운 문법 비구조 할당 문법때문이다.
비구조 할당(구조분해) 문법

const array= [1,2,3]
[1,2,3] = array
const object={a:'1',b:'2'};
const {a,b}= object
// a=1 , b=2
const objectInObj={a:{one:'1'}};
const {a:{one}}= object
//one = 1

자세한 설명은 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment [모를땐 Mozilla]

아무튼!

[value,handler] = useInput()
[id,onChangeId] = useInput()
// id = value 할당, onChangeId= handler 할당

4. onSubmit함수로 App.js에 데이터 전달하기.

//App.js
import { useState } from "react";
import SignUp from "./components/SignUp";
import "./styles.css";
export default function App() {
  const [userData, setUserData] = useState([]);
  const addData = (data) => {
    setUserData([
      ...userData,
      {
        ...data,
        key: data.id
      }
    ]);
  };
  return (
    <div className="container">
      <SignUp onUpdate={addData} />
    </div>
  );
}

//SignUp.jsx
{...생략}
  const handleSubmit = (e) => {
    e.preventDefault();
    onUpdate({
      id,
      age,
      gender,
      phone,
      email,
      address
    });
    return (    <div className="signUp">
      <form action="" autoComplete="off" onSubmit={handleSubmit}>
      {...생략}
          </form>
      <button className=" btn" onClick={handleSubmit}>
        Submit!
      </button>
    </div>
    )