리액트의 Controlled Component와 Uncontrolled Component의 차이점에 대해서 설명해주세요.
1. Controlled Component란?
Controlled Component(제어 컴포넌트)는 React의 상태(state)를 직접 관리하는 방식의 컴포넌트입니다.
사용자의 입력 값이 컴포넌트의 state에 의해 제어되며, 값이 변경될 때마다 onChange 이벤트 핸들러를 통해 state를 업데이트합니다.
예제 코드
import { useState } from "react";
function ControlledInput() {
const [value, setValue] = useState("");
return (
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
특징
- 입력 값이 state에 의해 완전히 제어됨
- onChange 핸들러를 사용하여 입력 값을 변경
- 컴포넌트의 state를 통해 현재 입력 값을 쉽게 추적할 수 있음
장점
- React 상태(state)가 동기화되어 입력 값에 대한 변경이 자유로움
- 입력 값을 검증하거나 포맷을 적용하기 쉬움
- 입력 변경을 기반으로 즉각적인 UI 업데이트 가능
단점
- 입력 값이 변경될 때마다 state를 업데이트해야 하므로 렌더링이 자주 발생할 수 있음
- 간단한 입력 필드에도 상태 관리를 추가해야 하므로 코드가 길어질 수 있음
2. Uncontrolled Component란?
Uncontrolled Component(비제어 컴포넌트)는 React에서 직접 상태를 관리하지 않고, DOM 자체에서 값을 제어하는 방식입니다.
React의 state가 아니라, useRef를 통해 생성된 input 요소의 참조(ref)를 이용해 값을 가져옵니다.
예제코드
import { useRef } from "react";
function UncontrolledInput() {
const inputRef = useRef(null);
const handleSubmit = () => {
alert(inputRef.current.value);
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleSubmit}>Submit</button>
</div>
);
}
특징
- 입력 값이 React state에 의해 관리되지 않음
- ref를 사용하여 직접 DOM 요소에서 값을 가져옴
- React의 생명주기와 무관하게 동작
장점
- 렌더링이 자주 발생하지 않아 성능이 향상될 수 있음
- 간단한 폼 요소에서 불필요한 상태 관리를 줄일 수 있음
단점
- 입력 값을 실시간으로 추적하기 어려우며, 동적인 UI 업데이트가 어려움
- 입력 값 검증 및 포맷 적용이 까다로움
- React의 단방향 데이터 흐름 원칙을 따르지 않음
Controlled Component vs. Uncontrolled Component
그럼 각 컴포넌트는 언제 사용되어야할까요?
Controlled Component는
폼 검증, 입력 값 제한, 즉각적인 UI 동기화가 필요한 경우에 적합합니다.
Uncontrolled Component는
외부 라이브러리(FormData, third-party UI 라이브러리 등)를 활용하거나, 단순한 입력 폼을 구현할 때 사용할 수 있습니다.
-
단순한 입력 필드가 포함된 폼에서는 입력 요소의 값을 리액트 상태로 관리할 필요성이 적으므로, Uncontrolled Component를 사용하는 것이 더 간단하고 성능이 좋습니다. 사용자가 제출 버튼을 클릭했을 때만 입력 값을 가져와도 충분한 경우를 예시로 들 수 있습니다.
반면, 값을 입력할 때마다 유효성 검증을 실시간으로 해주어야 하는 경우에는 Controlled Component를 사용해야 합니다.
결론
Controlled Component는 React의 상태를 활용하여 실시간으로 상태를 처리하고, 입력값 제어 등을 UI를 만들 수 있는 장점이 있지만, 성능 문제가 발생할 수 있습니다.
반면, Uncontrolled Component는 간단한 경우에 사용하면 렌더링을 줄일 수 있지만, React의 흐름과 동떨어져 있어 유지보수가 어려울 수 있습니다.
따라서 상황에 맞게 적절한 방식을 선택하는 것이 중요합니다.