[리액트] 폼, 제어 컴포넌트, 비제어 컴포넌트

폼

HTML 폼 element는 폼 element 자체가 내부 상태를 가지기 때문에, React의 다른 DOM element와 다르게 동작한다. 웹 애플리케이션에서 폼은 사용자로부터 정보를 입력받는 중요한 요소이다. 리액트에서는 폼을 더 쉽게 다루고 제어할 수 있는 도구를 제공한다.

리액트에서 폼을 다룰 때, 주로 두 가지 방법이 사용되는데, 제어 컴포넌트와 비제어 컴포넌트이다. 두 방법 모두 각자의 장단점이 있다.

제어 컴포넌트

리액트에서 폼 요소를 제어 컴포넌트로 만들면 값이 리액트의 상태에 의해 제어된다. 이렇게 하면 값의 변경을 감지하고 다루기가 훨씬 수월하다. HTML에서 <input>, <textarea>, <select>와 같은 폼 요소는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트된다.

제어 컴포넌트 예시

import React, { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  return (
    <form>
      <label>
        이름:
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

setName을 사용하여 입력값을 변경하면 리액트가 컴포넌트를 다시 렌더링하고 최신 값이 입력 필드에 반영된다.

폼 제출

폼의 제출은 사용자가 입력한 데이터를 서버에 보내거나 다른 컴포넌트로 전달할 때 주로 사용된다.

function FormSubmit() {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`입력값: ${value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
      <button type="submit">제출</button>
    </form>
  );
}

onSubmit 이벤트 핸들러를 사용하면 폼 제출을 캡처할 수 있다.

textarea 태그

HTML에서 <textarea> 요소는 텍스트를 자식으로 정의한다.

<textarea>
  Hello there, this is some text in a text area
</textarea>

React에서 <textarea>는 value 어트리뷰트를 대신 사용한다.

 const [value, setValue] = useState('');
<textarea value={value} onChange={handleChange} />

select 태그

HTML에서 <select>는 드롭 다운 목록을 만든다. 예를 들어, 이 HTML은 과일 드롭 다운 목록을 만들고 있다.

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

React에서는 selected 어트리뷰트를 사용하는 대신 최상단 select태그에 value 어트리뷰트를 사용한다. 한 곳에서 업데이트만 하면되기 때문에 제어 컴포넌트에서 사용하기 더 편하다.

<select value={value} onChange={handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>

전반적으로 <input type="text">, <textarea> 및 <select> 모두 매우 비슷하게 동작한다. 모두 제어 컴포넌트를 구현하는데 value 어트리뷰트를 허용한다.

리액트는 웹 폼을 다루는 강력한 도구를 제공한다. 상태 관리와 이벤트 핸들링을 통해 폼 입력과 제어, 유효성 검사를 쉽게 수행할 수 있다. 제대로된 구조와 패턴을 사용하면 사용자 경험을 향상시키고 개발 효율성을 높일 수 있다.

리액트에서 다중 입력 제어하기

다중 입력 필드를 가진 폼은 사용자로부터 여러 정보를 동시에 수집해야 할 때 흔히 사용된다. 리액트에서는 여러 입력 필드를 효율적으로 제어하는 방법을 제공하며, 상태를 사용해 여러 입력을 관리하는 방법을 살펴보자.

다중 입력 상태 사용하기

여러 입력 필드를 가진 폼의 경우, 각 입력 필드에 대한 상태를 따로 관리할 수도 있지만, 객체를 사용해 한 번에 관리하는 것이 더 효율적일 수 있다.

다중 입력 예시

import React, { useState } from 'react';

function MultiInputForm() {
  const [form, setForm] = useState({
    name: '',
    age: '',
    email: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value
    });
  };

  return (
    <form>
      <label>
        이름:
        <input type="text" name="name" value={form.name} onChange={handleChange} />
      </label>
      <label>
        나이:
        <input type="number" name="age" value={form.age} onChange={handleChange} />
      </label>
      <label>
        이메일:
        <input type="email" name="email" value={form.email} onChange={handleChange} />
      </label>
    </form>
  );
}

handleChange 함수에서 이벤트 객체의 name과 value를 가져와서 상태를 업데이트한다. 이렇게 하면 코드를 간결하게 유지하면서 여러 입력 필드를 효과적으로 관리할 수 있다.

리액트에서 다중 입력 제어는 상태를 통해 간단하게 구현할 수 있다. 한 객체 내에서 여러 입력 값을 관리함으로써 코드의 재사용성과 유지보수성을 높일 수 있다. 이를 통해 사용자로부터 여러 정보를 효율적으로 수집하고 처리할 수 있게 된다.

---

비제어 컴포넌트

리액트에서는 폼을 다루는 방식 중 하나로 비제어 컴포넌트를 사용할 수 있다. 비제어 컴포넌트는 리액트 컴포넌트가 폼의 상태를 관리하지 않고, 폼 입력을 DOM 자체에서 처리한다.

대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는것이 좋다.

특징

비제어 컴포넌트는 ref를 사용하여 폼 요소에 직접 접근할수 있다. 따라서, 리액트의 상태를 사용하지 않고, 폼 요소의 값을 직접 읽을 수 있다. 리액트에서는 useRef와 createRef라는 두 가지 방법으로 ref를 만들 수 있다. 함수형 컴포넌트에서는 useRef를, 클래스 컴포넌트에서는 createRef를 사용한다.

useRef 사용 예시

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('A name was submitted: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

이 코드에서 inputRef를 사용하여 입력 요소에 직접 접근하고 있다. handleSubmit ****이벤트 핸들러에서 inputRef.current.value 으로 input 폼요소의 값을 읽고 있다.

제어 컴포넌트 과 비제어 컴포넌트 비교

제어 컴포넌트

제어 컴포넌트는 폼의 입력값이 리액트 컴포넌트의 상태에 의해 제어되는 컴포넌트를 말한다. 입력값이 변할 때마다 상태를 변경하고, 상태가 변경될 때마다 컴포넌트가 다시 렌더링된다.

비제어 컴포넌트

비제어 컴포넌트는 폼의 상태를 직접 관리하지 않고, DOM에서 값을 직접 가져오는 방식이다. ref를 사용해서 DOM 노드에 직접 접근한다.

제어 컴포넌트	비제어 컴포넌트
장점:	장점:
• 상태에 따른 로직을 쉽게 구현할 수 있다.	• 코드가 더 간결하고 단순하다.
• 상태를 중앙에서 관리할 수 있다.	• 리액트의 상태 관리 없이도 폼 값을 관리할 수 있다.
단점:	단점:
• 코드가 다소 복잡해질 수 있다.	• 상태에 따른 로직을 구현하기 어렵다.

비제어 컴포넌트는 폼을 다룰 때 코드를 간결하게 유지하려는 경우나 리액트 외부와의 통합이 필요한 경우에 효과적이다. 하지만, 복잡한 상태 관리나 로직 구현이 필요한 경우에는 제어 컴포넌트를 사용하는 것이 더 적절할 수 있다.