React

양식

HTML과 마찬가지로 React는 양식을 사용하여 사용자가 웹 페이지와 상호 작용할 수 있도록 한다.

React에 양식 추가하기

다른 요소와 마찬가지로 React를 사용하여 양식을 추가한다.

예제

사용자가 자신의 이름을 입력할 수 있는 양식을 추가한다.

function MyForm() {
  return (
    <form>
      <label>Enter your name:
        <input type="text" />
      </label>
    </form>
  )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

 

이는 정상적으로 작동하며 양식이 제출되고 페이지가 새로 고쳐진다.

그러나 이것은 일반적으로 우리가 React에서 일어나기를 원하는 것이 아니다.

우리는 이러한 기본 동작을 방지하고 React가 양식을 제어하도록 하려고 한다.

양식 처리

양식 처리는 값이 변경되거나 제출될 때 데이터를 처리하는 방법에 관한 것이다.

HTML에서 양식 데이터는 일반적으로 DOM에 의해 처리된다.

React에서 양식 데이터는 일반적으로 구성 요소에 의해 처리된다.

구성 요소에서 데이터를 처리할 때 모든 데이터는 구성 요소 상태에 저장된다.

onChange 속성에서 이벤트 핸들러를 추가하여 변경사항을 제어할 수 있다.

useState 후크를 사용하여 각 입력 값을 추적하고 전체 애플리케이션에 대해 “single source of truth”를 제공할 수 있다.

예제

useState 후크를 사용하여 입력을 관리한다.

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  return (
    <form>
      <label>Enter your name:
        <input
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

예제

양식 제출

<form>의 onSubmit 속성에서 이벤트 핸들러를 추가하여 제출 작업을 제어할 수 있다.

예제

onSubmit 속성에서 Submit 단추 및 event handler를 추가해보자.

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

다중 입력 필드

각 요소에 이름 속성을 추가하여 둘 이상의 입력 필드의 값을 제어할 수 있다.

빈 개체로 상태를 초기화한다.

이벤트 핸들러의 필드에 액세스하려면 event.target.name 및 event.target.value 구문을 사용한다.

상태를 업데이트하려면 속성 이름 주변에 대괄호 [괄호 표기법]을 사용한다.

예제

입력 필드가 2개인 양식을 작성해보자.

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(inputs);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input 
        type="text" 
        name="username" 
        value={inputs.username || ""} 
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Textarea

React의 textarea 요소는 일반 HTML과 약간 다르다.

HTML에서 textarea의 값은 시작 태그 <textarea>와 끝 태그 </textarea> 사이의 텍스트다.

React에서 textarea의 값은 값 속성에 있다.
textarea의 값을 관리하기 위해 useStateHook을 사용한다.

예제

일부 내용이 포함된 간단한 textarea

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [textarea, setTextarea] = useState(
    "The content of a textarea goes in the value attribute"
  );

  const handleChange = (event) => {
    setTextarea(event.target.value)
  }

  return (
    <form>
      <textarea value={textarea} onChange={handleChange} />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Select

React의 드롭다운 목록 또는 선택 상자도 HTML과 조금 다르다.

HTML에서 드롭다운 목록에서 선택된 값은 선택된 속성으로 정의되었다.

React에서 선택된 값은 select 태그의 값 속성으로 정의된다.

예제

선택된 값 “Volvo”가 생성자에서 초기화되는 간단한 선택 상자

function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");

  const handleChange = (event) => {
    setMyCar(event.target.value)
  }

  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}

 

<textarea> 및 <select>에 이러한 약간의 변경을 가함으로써 React는 모든 입력 요소를 동일한 방식으로 처리할 수 있다.