출처 : 매일메일 CS
리액트에서 Controlled Component와 Uncontrolled Component의 차이와 활용 방법
리액트에서 폼 데이터를 처리할 때는 Controlled Component와 Uncontrolled Component 두 가지 접근 방식이 있다. 이 글에서는 두 방식의 차이점과 각각의 장단점, 그리고 어떤 상황에서 어떤 방식을 선택해야 하는지에 대해 알아보자!
Controlled Component란?
Controlled Component는 입력값을 리액트 상태(state)로 관리하는 컴포넌트를 말한다. 입력 요소의 값(value)은 리액트 상태와 동기화되며, 사용자가 입력을 변경할 때마다 onChange 이벤트 핸들러를 통해 상태가 업데이트된다.
특징
- 입력값이 리액트 상태로 관리된다.
- 상태를 통해 입력값을 제어하므로, 값 검증 및 조작이 쉽다.
- 복잡한 폼 로직을 처리하기에 적합하다.
예제 코드
import React, { useState } from "react";
function ControlledInput() {
const [inputValue, setInputValue] = useState("");
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<div>
<label>
Controlled Input:
<input type="text" value={inputValue} onChange={handleChange} />
</label>
<p>Current Value: {inputValue}</p>
</div>
);
}
export default ControlledInput;
장점
- 실시간 유효성 검증: 입력값을 상태로 관리하므로, 값이 변경될 때마다 즉시 검증할 수 있다.
- 입력값 조작 용이: 상태를 통해 값을 쉽게 초기화하거나 수정할 수 있다.
- 폼 로직 처리에 적합: 복잡한 폼 구조에서도 유연하게 동작한다.
Uncontrolled Component란?
Uncontrolled Component는 입력값을 리액트 상태가 아닌 DOM 자체에서 관리하는 방식이다. 이 경우, 리액트는 입력값을 직접 제어하지 않으며, ref를 사용해 DOM 요소에 접근하여 값을 읽거나 조작한다.
특징
- 입력값은 DOM에서 직접 관리된다.
- 리액트 상태와 동기화되지 않는다.
- 간단한 폼이나 초기값이 중요한 경우에 적합하다.
예제 코드
import React, { useRef } from 'react';
function UncontrolledInput() {
const inputRef = useRef(null);
const handleSubmit = () => {
alert(Input Value: ${inputRef.current.value});
};
return (
<div>
<label>
Uncontrolled Input:
<input type="text" ref={inputRef} />
</label>
<button onClick={handleSubmit}>Submit</button>
</div>
);
}
export default UncontrolledInput;
장점
- 간단한 구현: 상태 관리가 필요 없으므로 코드가 간결해진다.
- 성능 이점: 상태 업데이트가 없으므로 불필요한 렌더링을 줄일 수 있다.
- 특정 시점 데이터 접근: 예를 들어, 버튼 클릭 시점에만 값을 읽어오면 되는 경우 적합하다.
Controlled vs Uncontrolled 비교
| 특징 | Controlled Component | Uncontrolled Component |
|---|---|---|
| 데이터 관리 방식 | 리액트 상태(state) | DOM 자체 |
| 유효성 검증 | 실시간 검증 가능 | 별도의 로직 필요 |
| 코드 복잡도 | 상대적으로 복잡 | 간단 |
| 성능 | 상태 업데이트로 인해 렌더링 발생 가능 | 렌더링 최소화 가능 |
| 사용 사례 | 복잡한 폼 로직, 실시간 검증 | 단순한 폼, 특정 시점 데이터 접근 |
어떤 방식을 선택해야 할까?
Controlled Component를 선택해야 하는 경우
- 입력값을 실시간으로 검증해야 할 때이다.
- 입력값을 기반으로 다른 UI를 즉시 업데이트해야 할 때이다.
- 복잡한 폼 로직(예: 조건부 렌더링)이 필요한 경우이다.
Uncontrolled Component를 선택해야 하는 경우
- 단순한 입력 필드가 포함된 폼이다.
- 특정 시점(예: 제출 버튼 클릭 시)에만 값을 읽어오면 되는 경우이다.
- 초기값 설정이 중요하고 이후 값 변경이 필요 없는 경우이다.
추가 고려 사항
- 유효성 검증 로직: Controlled Component는 실시간 검증에 유리하지만, Uncontrolled Component에서는 별도의 검증 로직을 추가해야 한다.
- 성능 최적화: 많은 입력 필드가 있는 대규모 폼에서는 Controlled 방식이 성능에 영향을 줄 수 있으므로 필요에 따라 혼합해서 사용할 수도 있다.
- 코드 유지보수성: Controlled 방식은 다소 복잡하지만 유지보수성이 좋고 확장성이 뛰어나다.
결론
Controlled Component와 Uncontrolled Component는 각각의 장단점과 적합한 사용 사례가 있다. 프로젝트의 요구사항과 폼의 복잡도에 따라 적절한 방식을 선택하는 것이 중요하다. 실시간 유효성 검증이나 동적인 폼 처리가 필요하다면 Controlled 방식을, 간단하고 특정 시점의 데이터 접근만 필요한 경우에는 Uncontrolled 방식을 고려해야 한다.
안녕하세요 김선명입니다.