React에서 Form / Input / Select 탐구하기

React에서 Form은

대부분의 경우 폼을 구현할 때엔 제어컴포넌트를 사용하는 것이 좋습니다.

제어컴포넌트의 구현은 일반적으로 useState

비제어컴포넌트의 구현은 일반적으로 useRef를 통하여 이루어지곤 합니다.

 

하지만 중요한 점은 프로퍼티와 실제 구현일 것입니다.

타입스크립트를 이용하여 form / input / select 요소들을 타이핑하는 방법을 보겠습니다.

---

onChange 이벤트를 타이핑하려면

e:React.ChangeEvent<HTMLInputElement>

리액트에서 제공하는 ChangeEvent를 이용합니다.

제네릭으로 HTMLInputElement를 전달합니다.

만약 셀렉트박스를 이용하는 경우 이렇게 유니온을 이용해 타이핑할 수 있습니다.

e:React.ChangeEvent<HTMLInputElement|HTMLSelectElement>

---

Input

 

대부분 이벤트가 발생했을때에는 event.target.프로퍼티명으로 접근하게됩니다.

input의 입력을 제어하기 위해 두가지 프로퍼티를 이용 할 수 있습니다.

checked	체크박스 입력 / 라디오 버튼의 경우입니다. true or false로 이루어집니다.
value	문자열입니다.

input에는 default값을 지정해줄 수도 있습니다.

defaultChecked	boolean값에 대해 초기값을 지정합니다. type="checkbox" type="radio" 일때 의미가 있습니다.
defaultValue	텍스트 입력의 초기값을 지정합니다.

 

validation과 관련된 속성도 지정해줄 수 있습니다.

validation은 일일히 지정하려면 로직이 복잡해지는 경향이 있는데

지정할 수 있는 것은 지정해주면 좋을 것 같네요

max	number가 들어가야합니다. 숫자 및 날짜/시간 입력의 최대값을 지정해줍니다.
maxLength	number가 들어가야합니다. 최대 길이를 지정해줘요!
min	number가 들어가야합니다. 숫자 및 날짜/시간 입력의 최소값을 지정해줍니다.
minLength	number가 들어가야합니다. 최소 길이를 지정해줘요!

 

onChange

앞서 서술한 onChange이벤트입니다.

addEventListener("input", (event) => {});

바닐라 자바스크립트에서는 input 이벤트와 비슷한 일을 수행합니다.

입력 값이 변경되면 함수가 실행되는 형태입니다.

 

onInvalid

submit 했을 때 유효성검사에 실패하면 트리거되는 함수입니다.

 

type

너무 방대해서 MDN을 참고하는게 나을 것 같습니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type

<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

checkbox

email

file

password

radio

range

search

submit

text

제 기준에서 자주 사용되는 것들만 정리해보았습니다.

 

그 외 속성들입니다.

더욱 많은 속성이 있으니 참고하세요

pattern	문자열입니다. 일치해야하는 패턴을 지정해주는 프로퍼티입니다.
placeholder	문자열입니다. 입력 값이 비어있을때 흐리게 표시됩니다.
readonly	boolean이 들어갑니다. true이면 사용자가 입력을 편집할 수 없어요
required	boolean이 들어갑니다. true이면 양식에 값을 필수로 제출해야합니다.

---

Select

셀렉트 태그는 Option태그를 자식으로 받습니다.

<select>
  <option value="" ></option>
</select>

---

여러개의 인풋을 관리하는 폼을 관리하려면?

'use client';
import { useRecoilState } from 'recoil';
import { todoAtom, TodoInterface } from '@/atoms';
import React, { useRef } from 'react';

interface UseRecoilStateComponentProps {}

const UseRecoilStateComponent = ({}: UseRecoilStateComponentProps) => {
  const [todos, setTodos] = useRecoilState(todoAtom);
  const formRef = useRef<HTMLFormElement>(null);

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const subject = (
      formRef.current?.elements.namedItem('subject') as HTMLInputElement
    )?.value;
    const text = (
      formRef.current?.elements.namedItem('text') as HTMLInputElement
    )?.value;
    const done = (
      formRef.current?.elements.namedItem('done') as HTMLInputElement
    )?.checked;
    console.log(done);
    const newTodo: TodoInterface = {
      id: Number(new Date()),
      subject: subject,
      text: text,
      done: done,
    };
    setTodos(todos.concat(newTodo));
  };

  return (
    <div>
      <form ref={formRef} onSubmit={onSubmit}>
        <input type="text" name="subject" />
        <input type="text" name="text" />
        <input type="checkbox" name="done" />
        <button type="submit">Submit</button>
      </form>
      <div>
        {todos.map((todo) => (
          <div key={`todo${todo.id}`}>
            <h2>{todo.subject}</h2>
            <p>{todo.text}</p>
            <p>{todo.done ? '다함' : '안다함'}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

좀 하드코딩을 한다고 생각하면 이렇게 작성할 수 있습니다.

 

---

https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components

Sharing State Between Components – React

https://ko.legacy.reactjs.org/docs/uncontrolled-components.html

비제어 컴포넌트 – React

https://react.dev/reference/react-dom/components/input

<input> – React

https://react.dev/reference/react-dom/components/option

<option> – React

https://react.dev/reference/react-dom/components/select

<select> – React