[React] Hook 양식(form) 적용하기

기본적으로 하나의 <form/> 여러 개의 <input/>, <select/>, <textarea/>으로 구성된다. 사용자가 입력해야 값이 많아질수록 양식은 내부적으로 많은 상태를 가지게 되고 그에 따라 컴포넌트의 복잡해진다.

과거에는 컴포넌트의 복잡한 상태 관리와 코드 분리를 위해 HOC(High Order Component)나 Render Prop가 주로 사용되었다고 한다. 그러나 두가지 방법은 결국 추가로 컴포넌트가 필요하기 때문에 가독성이 낮아진다.

하지만 리액트 훅(React Hook)이 등장한 뒤 복잡한 코드를 컴포넌트가 아닌 함수로 분리해낼 수 있게 됐다. 덕분에 양식 컴포넌트를 구현하는 것이 훨씬 간편해졌다.

SignIn 컴포넌트

import React, { useState } from "react";
import Form from "./Components/Form";

function SignIn() {
  const [account] = useState(signInProps);
  
   return (
    <div className="SignIn">
      <Form format={account} onChange={onChange} value={email} />
    </div>
  );
}

export default SignIn;


const signInProps = {
  inputValue: [
    {
      type: "id",
      placeholder: "아이디(이메일)",
    },
    {
      type: "password",
      placeholder: "비밀번호",
    },
    {
      type: "checkbox",
      placeholder: "아이디 저장",
    },
  ],

  buttonValue: [{ text: "로그인"}, { text: "카카오 로그인" }],

  linkValue: [
    {
      text: "아이디 찾기",
      url: "/",
    },
    { text: "비밀번호 찾기", url: "/" },
    { text: "회원가입", url: "/" },
  ],
};

Form 컴포넌트

import React from "react";
import Input from "./Input";
import Button from "./Button";
import ParagraphLink from "./ParagraphLink";

function Form(props) {
  const { format } = props;

  return (
  <>
      {format.inputValue.map((input, idx) => (
        <Input key={idx} name={input.name} type={input.type} placeholder={input.placeholder} value={input.name} />
      ))}
      {format.buttonValue.map((button, idx) => (
        <Button key={idx} text={button.text} onClick={button.onClick} />
      ))}
      {format.linkValue.map((link, idx) => (
        <ParagraphLink key={idx} text={link.text} url={link.url} />
      ))}
    </>
  );
}