form

우리가 브라우저를 사용하면서 가장 많이 접하게 되는 화면 중 하나가 바로 입력창이다. 검색어, 아이디, 비밀번호 등 사용자의 입력을 받아 서버로 전송하는 역할을 하는것이 바로 form 양식이다.

HTML에서 form 양식을 위해 사용되는 태그는 여러가지가 있다.

• form

• input, textarea

• label...etc

위에 나열한 태그들이 아마 가장 익숙한 태그일 것이다. 이 중, 자주 사용되는 form, input 태그에 대해 조금 더 살펴보자.

form tag

form 태그는 article, main, header 와 유사하게 컴포넌트내 입력 양식 전체를 감쌀때 사용되는 태그이다. 한번 속성들을 알아보자.

• method : 전송 방식을 선택한다. (get, post)

• name : form의 이름을 설정한다. 서버로 전송된 데이터를 참조하기 위해서 설정한다.

• action : form을 전송할 서버쪽의 script 파일을 지정한다.

• autocomplete : 단어 그대로 자동완성이다. on으로 설정시, 과거 사용자가 입력한 값을 베이스로 여러 값을 보여준다.

• enctype : 데이터가 서버로 전송될때 인코딩 되는 방식을 명시한다.

1. application/x-www-form-urlencoded : default value. 모든 문자열을 서버로 전송전에 인코딩 됨
2. multipart/form-data : 모든 문자열을 인코딩하지 않는다. 주로 파일/이미지를 전송할때 사용된다.
3. text/plain : 공백은 "+" 로 치환되지만, 나머지 문자는 인코딩 되지 않는다.

• novalidate : 데이터를 서버로 전송시, 유효성 검사를 실시하지 않는다는 것을 명시한다.

이처럼, form 태그는 상호작용할 입력창, 버튼, 태그등을 정의하는 역할을 수행한다.

input tag

input 태그는 사용자가 데이터를 직접 입력할수 있도록 하는 태그다.

• readonly : 읽기전용 필드 여부

• placeholder : 입력창에 예시등을 표시할때 사용된다. (클릭시 사라짐)

• autofocus : 페이지 렌더링시, 특정 부분에 커서가 표시되도록 한다.

• autocomplete : 자동완성

• max/min : input의 최대/최솟값 설정

• maxlength : input에 최대로 입력이 가능한 문자열 갯수를 지정한다.

• required : 필수 입력 필드를 지정한다.

• type : input에 입력되는 데이터의 타입을 정의한다.

위에 열거한 속성들 중, type 속성의 설정값에 따라 input이 버튼, 텍스트 란이 될수도 있다. type에서 설정할수 있는 값들을 살펴보자.

• hidden: 사용자에게 보이지 않게 한다.

• text : 가장 자주 사용되는 한줄 문자열을 입력하는 텍스트 상자.

• search : 검색 상자(크롬/사파리에서만 사용이 가능하다).

• tel : 전화번호 입력 필드.

• url : url 주소 입력 필드.

• email : email 주소 입력 필드.

• password : 비밀번호 입력 필드.

• number : 숫자 조절이 가능한 필드.

• range : 숫자 범위 조절이 가능한 필드. (min, max로 범위를 조절한다.)

• checkbox : 2개이상 선택이 가능한 체크박스.

• radio : 1개만 선택 가능한 라디오 버튼.

• datetime : UTC를 기준으로 설정된 날짜, 시간 (연,월,일,시,분,초) 표시

• date, month, week, time : 사용자 지역을 기준으로 날짜,월,주,시간 표시

• button : 버튼을 만들어 클릭이벤트를 발생시킨다.

• file: 파일 첨부 버튼 생성.

• submit : 서버 전송 버튼 생성.

• reset : 사용자가 입력한 정보 삭제.

이렇게 사용자의 입력값을 서버로 전송하는것이 form 양식 태그들의 역할이다. 페이지 하나에 적게는 1개 많게는 수십개의 입력 폼이 들어갈수 있기에, 각 입력 폼의 데이터 상태를 관리하는것이 중요한 요소로 꼽히곤한다.

React에서는 각 입력폼의 상태를 useState 로 관리하게 된다. 하지만 상태값이 많아질수록 각 상태를 관리하기 힘들어지고, 가독성 또한 매우 떨어진다. 물론, 한개의 useState를 아래와 같이 객체형식으로 만들어 관리하는 방법도 있지만 상태값, 상태 처리 함수, html 렌더링 부분에 있어서 기본적인 보일러 플레이트가 적지 않아 관리하기 쉽지는 않다.

import React, { useState } from 'react';

const MultiInputForm = () => {
  const [formValues, setFormValues] = useState({
    name: '',
    email: '',
    phone: '',
    address: '',
    password: '',
    confirmPassword: '',
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form Submitted:', formValues);
  };

  return (
    <form onSubmit={handleSubmit} className="p-4 space-y-4 max-w-md mx-auto">
      <div>
        <label htmlFor="name" className="block mb-1 font-bold">Name:</label>
        <input
          type="text"
          id="name"
          name="name"
          value={formValues.name}
          onChange={handleChange}
          className="w-full p-2 border rounded"
        />
      </div>
      <div>
        <label htmlFor="email" className="block mb-1 font-bold">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formValues.email}
          onChange={handleChange}
          className="w-full p-2 border rounded"
        />
      </div>
      <div>
        <label htmlFor="phone" className="block mb-1 font-bold">Phone:</label>
        <input
          type="text"
          id="phone"
          name="phone"
          value={formValues.phone}
          onChange={handleChange}
          className="w-full p-2 border rounded"
        />
      </div>
      <div>
        <label htmlFor="address" className="block mb-1 font-bold">Address:</label>
        <input
          type="text"
          id="address"
          name="address"
          value={formValues.address}
          onChange={handleChange}
          className="w-full p-2 border rounded"
        />
      </div>
      <div>
        <label htmlFor="password" className="block mb-1 font-bold">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={formValues.password}
          onChange={handleChange}
          className="w-full p-2 border rounded"
        />
      </div>
      <div>
        <label htmlFor="confirmPassword" className="block mb-1 font-bold">Confirm Password:</label>
        <input
          type="password"
          id="confirmPassword"
          name="confirmPassword"
          value={formValues.confirmPassword}
          onChange={handleChange}
          className="w-full p-2 border rounded"
        />
      </div>
      <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded">
        Submit
      </button>
    </form>
  );
};

export default MultiInputForm;

이를 해결하기 위해 사용되는 라이브러리가 바로 react-hook-form이다. 해당 라이브러리에 관해서는 다른 게시글에서 다뤄보려고 한다.