🤔 Controlled Component vs Uncontrolled Component
🕹️ Controlled Component
리액트 상태(state)를 통해 입력 값을 제어하는 컴포넌트
입력 요소의 값(value)을 리액트 상태와 동기화 하고 사용자가 입력을 변경할 때마다 onChange 이벤트 핸들러를 통해서 상태를 업데이트
state로 값이 관리되기 때문에 입력 시마다 값을 검증하거나 자유롭게 변경할 수 있다
➡️ 값을 입력할 때마다 유효성 검증을 실시간으로 해줘야 하는 경우에 사용
function ControlledInput() {
const [text, setText] = useState("");
return (
<input
value={text}
onChange={(e) => setText(e.target.value)}
/>
);
}⛓️💥 Uncontrolled Component
리액트의 상태로 관리하지 않고 DOM을 통해 입력 값을 제어하는 방식이다. 따라서 리액트가 제어하지 않고 DOM에서 직접 관리된다.
useRef를 사용해서 생성된 참조 객체인 ref를 사용하여 DOM 요소에 직접 접근해서 값을 읽거나 변경한다.
➡️ 단순한 입력 필드가 포함된 폼에서 사용
function UncontrolledInput() {
const inputRef = useRef(null);
const handleClick = () => {
alert(inputRef.current.value); // DOM에서 직접 가져옴
};
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>입력값 확인</button>
</>
);
}
