📌 Controlled Component
- React 상태(state)를 통해 폼의 값을 제어
- 폼 요소의 값이 항상 React 상태와 동기화됨
- value와 onChange 이벤트를 사용해야 함
import { useState } from 'react';
function ControlledInput() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
/>
);
}
장점
- 폼의 값이 React 상태에 저장돼서 값을 추적하고 제어할 수 있음
- 폼 데이터를 유효성 검사하거나 동적으로 수정할 때 적합
주의할 점
- 항상 value와 onChange를 함께 사용해야 함
- value에 undefined가 들어가면 오류가 발생할 수 있음
- value={data || ''}처럼 기본값을 설정해줘야 함
<input value={undefined} /> // 오류 발생
📌 Uncontrolled Component
- 폼 요소의 값을 DOM 자체에서 관리함
- defaultValue 속성을 사용해 초기 값만 설정
- 이후 값은 DOM에서 직접 관리되고, React 상태에 연결되지 않음
import { useRef } from 'react';
function UncontrolledInputWithRef() {
const inputRef = useRef();
const handleClick = () => {
alert(inputRef.current.value);
};
return (
<>
<input ref={inputRef} type="text" defaultValue="Ref 사용 예시" />
<button onClick={handleClick}>값 확인</button>
</>
);
}
장점
- 구현이 간단하고, 상태 관리가 필요 없는 경우 사용하기 좋음
- 폼 초기값만 필요할 때 적합
주의할 점
- 값이 변경돼도 React에서는 해당 값을 추적할 수 없음
- 값에 접근하려면 **Ref (useRef)**를 사용해야 함
📌 Controlled vs Uncontrolled Component 비교
| 구분 | Controlled Component | Uncontrolled Component |
| 상태 관리 | React 상태(state)로 관리 | DOM 자체에서 관리 |
| 초기 값 설정 | value와 onChange 사용 | defaultValue 사용 |
| 값 변경 추적 | 가능 (React 상태에 저장) | 불가능 (Ref를 사용해야 함) |
| 적합한 상황 | 값의 유효성 검사, 폼 제어 필요 시 | 간단한 초기값 설정 시, 상태 관리 불필요 |
| 주의할 점 | 항상 value와 onChange 함께 사용 | 초기값 이후 React에서 값 추적 불가 |
📌 사용 추천
- 폼 데이터가 중요하거나, 입력값을 추적해야 할 경우
→ Controlled Component 사용 - 초기 값만 설정하고, 이후 값 변경을 추적할 필요가 없는 경우
→ Uncontrolled Component 사용 - 간단한 폼이나 성능이 중요한 경우
→ Uncontrolled Component가 더 적합
'프론트엔드 > React' 카테고리의 다른 글
| [React] 프록시 설정 (0) | 2023.05.31 |
|---|---|
| [React] Full calendar 기본 세팅 (0) | 2022.02.19 |
| [React] 프로젝트 생성하기 (0) | 2022.02.12 |
| [React] React Router - 'Switch' is not exported from 'react-router-dom' (0) | 2021.12.23 |
