제어 컴포넌트(Controlled Components)와 비제어 컴포넌트(Uncontrolled Components)는 주로 React에서 폼(form) 요소를 다룰 때 사용되는 두 가지 방식이다
이 두 개념은 폼 데이터를 어떻게 관리하고 상호작용할 것인가에 대한 접근 방식의 차이를 나타낸다
제어 컴포넌트 (함수형 컴포넌트 기준)
함수형 컴포넌트에서 제어 컴포넌트를 사용할 때,
폼 입력(input, textarea, select 등)의 상태는 React의 useState 훅을 통해 관리된다
상태 변경은 이벤트 핸들러 함수 내에서 useState의 업데이트 함수를 호출함으로써 처리된다
이 방식을 사용하면,
폼의 입력 값은 항상 컴포넌트의 상태와 동기화되어 있으므로,
상태를 기반으로 어떤 작업을 쉽게 실행할 수 있다
예시:
import React, { useState } from 'react';
function ControlledForm() {
const [name, setName] = useState('');
const handleChange = (event) => {
setName(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted name:', name);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={name} onChange={handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
비제어 컴포넌트 (함수형 컴포넌트 기준)
함수형 컴포넌트에서 비제어 컴포넌트를 사용할 때,
useRef 훅을 사용하여 폼 요소에 대한 참조를 생성하고 관리한다
이 방식에서 폼 데이터는 DOM 자체에 의해 관리되며,
React 컴포넌트는 useRef를 통해 생성된 참조를 사용하여 필요할 때 폼 데이터를 직접 조회한다
이는 전통적인 HTML 폼 입력 방식에 더 가깝다
예시:
import React, { useRef } from 'react';
function UncontrolledForm() {
const nameInputRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted name:', nameInputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={nameInputRef} />
</label>
<button type="submit">Submit</button>
</form>
);
}
제어 컴포넌트와 비제어 컴포넌트 모두 함수형 컴포넌트에서 유용하게 사용될 수 있으며,
각각의 방식은 폼 데이터를 다루는 방법과 개발자의 선호에 따라 선택될 수 있습니다
제어 컴포넌트는 React 상태를 통한 폼 데이터의 관리와 동기화에 적합하고,
비제어 컴포넌트는 DOM 자체의 폼 데이터 관리와 전통적인 HTML 폼 처리 방식에 가깝습니다.
비교 및 선택 기준
- 제어 컴포넌트
- 폼 데이터의 상태를 React 컴포넌트 내에서 완전히 제어할 수 있다
- 데이터의 유효성 검사, 입력 데이터의 변형, 조건부 렌더링 등을 쉽게 구현할 수 있다
- 비제어 컴포넌트
- 폼 데이터를 처리할 때 보다 선언적이지 않지만, 때로는 더 간단하고, 더 빠르며, 기존의 HTML 폼 작업 방식과 더 유사하다
어떤 방식을 사용할지는 개발자의 선호도, 애플리케이션의 복잡성, 그리고 특정 상황의 요구 사항에 따라 달라질 수 있다
일반적으로 폼 데이터를 React의 상태로 관리할 필요가 있을 때는 제어 컴포넌트를 사용하는 것이 좋다
이는 폼 데이터에 대한 더 나은 제어와 함께, 데이터의 유효성 검사 및 처리, 사용자 입력에 따른 동적인 반응 등을 쉽게 구현할 수 있게 해준다
반면,
폼 데이터를 직접적으로 다룰 필요가 없거나 React 외부 라이브러리와 함께 사용해야 하는 경우,
비제어 컴포넌트를 사용하는 것이 더 편리할 수 있다
비제어 컴포넌트는 특히 폼 데이터를 직접 다루는 대신, 폼 제출 시점에만 데이터를 처리하려는 경우에 유용하다
비제어 컴포넌트는 DOM 자체에 폼 데이터를 저장하므로, React에서 폼 상태를 직접 관리할 필요가 없을 때 간단하고 효율적인 해결책을 제공한다
또한, 기존의 HTML 폼 동작과 더 일치하므로, 전통적인 HTML 폼을 사용하는 데 익숙한 개발자들에게 친숙할 수 있다
결론적으로,
제어 컴포넌트와 비제어 컴포넌트 각각은 사용 사례와 개발자의 필요에 따라 장단점이 있다
따라서, 애플리케이션의 특정 요구 사항과 개발 환경을 고려하여 가장 적합한 접근 방식을 선택하는 것이 중요하다
React는 이 두 가지 접근 방식을 모두 지원하므로, 프로젝트의 목표와 개발자의 선호에 따라 유연하게 선택할 수 있다
'Frontend' 카테고리의 다른 글
왜 리액트 타입스크립트 사용 (0) | 2024.03.05 |
---|---|
자바스크립트 key props 사용 이유 (0) | 2024.03.05 |
requestAnimationFrame (0) | 2024.03.05 |
자바스크립트 this (0) | 2024.03.05 |
자바스크립트 불변성 유지하려면? (0) | 2024.03.05 |