[React] (리액트 공부하기 28) 폼(form)과 제어 컴포넌트(Control Component)

1. 폼(form)의 기본 개념

• 폼(form)은 사용자로부터 입력을 받기 위한 HTML 태그이다. 예를 들어, 이름을 입력 하거나 제출 버튼을 클릭하는 인터페이스가 폼이다.
• HTML 폼은 <form> 태그를 사용하며, 내부에 <input> 같은 입력 필드나 <button> 같은 버튼이 포함 된다.

<form>
  <label>
    이름:
    <input type="text" name="name" />
  </label>
  <button type="submit">제출</button>
</form>

• 이 HTML 코드는 단순히 데이터를 입력하고 제출하는 폼의 역할만 한다. 하지만 React와 같은 JavaScript 프레임워크에서는 사용자의 입력 데이터를 제어하고 저장할 필요가 있다.

---

2. 제어 컴포넌트(Control Component)란?

• 제어 컴포넌트란 사용자가 입력한 값을 상태(state)로 관리하는 컴포넌트를 말한다.
• HTML 폼의 경우 입력 데이터가 DOM에서 관리되지만, React의 제어 컴포넌트에서는 입력 값을 state로 관리하며, 변경 시 setState를 호출하여 업데이트 한다.

---

3. React에서 제어 컴포넌트 예제

React에서 제어 컴포넌트를 구현하는 코드:

function NameForm(props) {
  const [value, setValue] = useState(''); // 입력 값을 저장하는 state
  
  const handleChange = (event) => {
    setValue(event.target.value); // 입력 값이 변경되면 state 업데이트
  };
  
  const handleSubmit = (event) => {
    alert('입력한 이름: ' + value); // 제출 시 입력 값을 알림으로 표시
    event.preventDefault(); // 기본 폼 제출 동작 막기
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange} />
      </label>
	  <button type"submit">제출</button>
	</form>
  );
}

1. useState를 사용하여 state 관리

• const [value, setValue] = useState('')는 입력 데이터를 저장할 state를 선언한다. 초기값은 빈 문자열 ''이다.

2. onChange 이벤트 핸들러

• <input> 태그의 onChange={handleChange}를 통해 사용자가 입력값을 변경할 때마다 handleChange 함수가 실행된다.
• handleChange 함수 내부에서 event.target.value로 현재 입력된 값을 가져와 state를 업데이트 한다.

3. onSubmit 이벤트 핸들러

• 폼이 제출되면 onSubmit={handleSubmit}에 따라 hadnleSubmit 함수가 실행 된다.
• handleSubmit은 입력된 값을 알림으로 보여주고, event.preventDefault()를 통해 폼의 기본 제출 동작(페이지 새로고침)을 막는다.

4. value 속성

• <input> 태그에 value={value}를 추가하여 state의 값을 입력 필드의 값으로 동기화한다. 이로 인해 입력 필드는 state를 기준으로 값을 가지게 된다.

---

4. 추가적인 동작: 입력 값을 대문자로 변환

입력된 값을 모두 대문자로 변환하고 싶다면, handleChange 함수에 변환 로직을 추가할 수 있다.

코드:

const handleChange = (event) => {
  setValue(event.target.value.toUpperCase()); // 입력 값을 대문자로 변환한 후 state 업데이트
};

---

5. 핵심 정리

• 제어 컴포너트는 사용자 입력 값을 React의 state로 관리한다.
• onChange와 onSubmit 이벤트 핸들러를 통해 값 변경 및 제출 동작을 제어할 수 있다.
• React에서는 DOM이 아니라 state를 기준으로 UI를 관리하기 때문에 입력 필드의 값을 value로 동기화한다.