내일배움캠프 React트랙 32일차 회고 (2022.12.14)

Uncontrolled-Component

React에서는 모든 UI의 업데이트는 상태의 변경으로부터 발생해야 한다.

그런데, <inpurt type="text" />와 같은 입력form은 React내부적으로 상태변경이 이루어지지않았음에도 불구하고

UI상으로 업데이트가 되는 것을 알  수 있다. 이것을 Uncontrolled-Component라고 한다.

이러한 Uncontrolled-Component를 제어해 Controlled-Component로 만들어주는 것이 중요하다.

 

Controlled-Component 예제

import React, { useState } from 'react';

export default function AppForm() {
  const [form, setFrom] = useState({ name: '', email: '' });
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(form);
  };
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFrom({ ...form, [name]: value });
  };
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor='name'>이름:</label>
      <input
        type='text'
        id='name'
        name='name'
        value={form.name}
        onChange={handleChange}
      />
      <label htmlFor='email'>이메일:</label>
      <input
        type='email'
        id='email'
        name='email'
        value={form.email}
        onChange={handleChange}
      />
      <button>Submit</button>
    </form>
  );
}