제어 컴포넌트(Controlled Component)
제어 컴포넌트는 React의 state를 통해 입력 값을 제어하는 컴포넌트입니다.
즉, 입력 필드의 값이 React의 상태(state)에 의해 관리되며, 사용자가 입력할 때마다 onChange 이벤트를 통해 상태를 업데이트합니다.
제어 컴포넌트 특징
useState를 사용해 입력 값을 상태로 관리onChange이벤트 핸들러를 통해 상태 업데이트- 상태 변화가 발생할 때마다 리렌더링됨
- 실시간 입력 검증, 조건부 렌더링 등 복잡한 폼 로직을 처리하기 유리
예제 코드
import { useState } from "react";
const ControlledInput = () => {
const [text, setText] = useState("");
return (
<input
type="text"
value={text} // 상태와 연결
onChange={(e) => setText(e.target.value)} // 입력값 변경 시 상태 업데이트
/>
);
};value={text}를 통해 입력값을 상태와 동기화onChange에서 setText를 호출해 입력값을 관리
비제어 컴포넌트(Uncontrolled Component)
비제어 컴포넌트는 입력 값을 React의 상태가 아니라, DOM을 통해 직접 관리하는 방식입니다.
useRef를 사용하여 직접 DOM 요소에 접근해 값을 가져옵니다.
비제어 컴포넌트 특징
- React의 상태를 사용하지 않음
useRef를 사용해 DOM 요소에 접근- 입력값을 실시간으로 관리할 필요가 없는 경우 유용
- 상태 업데이트가 없으므로 불필요한 리렌더링 방지
예제 코드
import { useRef } from "react";
const UncontrolledInput = () => {
const inputRef = useRef(null);
const handleSubmit = () => {
alert(inputRef.current.value); // 입력값을 직접 가져옴
};
return (
<>
<input type="text" ref={inputRef} />
<button onClick={handleSubmit}>제출</button>
</>
);
};- ref={inputRef}를 사용해
<input>요소에 직접 접근 - inputRef.current.value를 통해 값 가져오기
언제 어떤 방식을 사용할까?
제어 컴포넌트 사용
- 입력값을 즉시 반영해야 하는 경우 (예: 검색창, 실시간 검증)
- 폼 입력값을 중앙에서 관리해야 하는 경우 (예: Redux 상태 관리)
비제어 컴포넌트 사용
- 입력값을 실시간으로 확인할 필요가 없을 때 (예: 파일 업로드, 폼 제출 시 값 가져오기)
- 불필요한 리렌더링을 방지하고 성능을 최적화해야 할 때
요약
| 제어 | 비제어 | |
|---|---|---|
| 관리 방식 | React state를 사용하여 값 관리 | DOM을 직접 참조하여 값 관리 |
| 상태 업데이트 | onChange 이벤트를 통해 상태 변경 | 필요할 때만 useRef를 통해 값 가져옴 |
| 리렌더링 | 입력값 변경 시 리렌더링 발생 | 입력값 변경과 상관없이 리렌더링 없음 |
| 활용 예시 | 실시간 입력 검증, 조건부 렌더링 등 | 폼 제출 시에만 값이 필요할 때 |
