리액트 폼 컴포넌트, 제어 / 비제어 컴포넌트

리액트에서의 폼 컴포넌트

리액트는 브라우저에 내장된 모든 HTML 및 SVG 컴포넌트를 지원합니다. 하지만 HTML 폼 엘리먼트는 고유의 내부 상태를 관리하는 특성이 있어, 리액트의 다른 DOM 엘리먼트와 다르게 동작합니다.

HTML 폼 엘리먼트와 React

HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 사용자의 입력을 기반으로 자체적으로 상태를 관리하고 업데이트합니다. 그러나 React에서는 상태 관리가 주로 컴포넌트의 state를 통해 이루어지며, 이를 변경하기 위해 setState() 메서드를 사용합니다. 따라서 React로 폼 엘리먼트를 다룰 때는 일반 HTML 폼 엘리먼트와 다른 접근 방식이 필요합니다.

제어 컴포넌트 (Controlled Component)

React는 상태를 "신뢰 가능한 단일 출처 (single source of truth)"로 관리하는 철학을 따릅니다. 이를 통해 React 컴포넌트가 폼 입력값을 제어하고 관리할 수 있습니다. React에 의해 값이 제어되는 폼 입력 엘리먼트를 "제어 컴포넌트 (controlled component)"라고 부릅니다.

제어 컴포넌트는 입력값이 React 컴포넌트의 state에 저장되며, 사용자가 입력을 변경하면 onChange 이벤트 핸들러를 통해 상태를 업데이트합니다. 이 방식으로 입력값은 React의 상태와 동기화되며, 애플리케이션 로직이 모든 사용자 입력을 제어할 수 있습니다.

비제어 컴포넌트 (Uncontrolled Component)

제어 컴포넌트와 달리 비제어 컴포넌트는 폼 엘리먼트의 자체 상태를 그대로 사용합니다. React는 값이나 상태를 관리하지 않으며, 대신 DOM에 직접 접근하여 값을 가져옵니다. 비제어 컴포넌트는 ref를 사용해 값에 접근합니다.

제어 컴포넌트와 비제어 컴포넌트의 차이

1. 제어 컴포넌트는 React 상태를 통해 값이 관리되며, React 애플리케이션의 상태와 동기화됩니다.
2. 비제어 컴포넌트는 DOM을 통해 값에 접근하며, React 상태와의 동기화가 필요하지 않을 때 사용됩니다.

사용 시 고려 사항

• 제어 컴포넌트는 상태 관리가 간단하고 애플리케이션의 로직을 더 쉽게 추적할 수 있지만, 코드가 다소 장황해질 수 있습니다.
• 비제어 컴포넌트는 초기 코드 작성이 간단하지만, 복잡한 폼 로직에는 적합하지 않을 수 있습니다.

요약

React에서 폼을 다루는 방식은 컴포넌트 기반 상태 관리 철학에 기반합니다. 제어 컴포넌트를 사용하면 React 상태와 동기화된 폼을 쉽게 구현할 수 있으며, 경우에 따라 비제어 컴포넌트를 활용하여 간단한 로직을 구현할 수도 있습니다. 적절한 방식의 선택은 애플리케이션의 요구사항과 복잡성에 따라 결정해야 합니다.