Controlled, Uncontrolled Component

이 글은 리액트 공식문서를 보고 학습한 내용입니다.

제어 컴포넌트

HTML에서 <input>, <textarea> <select>와 같은 폼 엘리먼트 - React에서 변경할수 있는 state가 일반적으로 컴포넌트 state 속성에 유지. 키가 눌릴 때마다 매번 handleChange가 동작. input값이 항상 React State에 의해 업데이트 됨

실습보기

제어 컴포넌트 - input, textarea, select

codepen에서 보기

다중 input

codepen에서 보기

React state - "신뢰 가능한 단일 출처(single source of truth)"를 만들어 두 요소를 결합.

제어되는 Input Null값

제어 컴포넌트에서 value prop을 지정하면 사용자가 변경할 수 없다.
value를 설정했는데 여전히 수정할 수 있다면 실수로 undefined나 null을 설정했는지 확인하기

// 첫번째 입력은 잠겼짐나 1초 뒤 입력가능
ReactDOM.render(<input value="hi" />, mountNode);

setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

codepen에서 보기

비제어 컴포넌트

DOM 자체에서 폼데이터가 다루어짐
비제어 컴포넌트 ref를 사용하여 DOM에서 폼 값 가져오기

DOM에 신뢰가능한 출처를 유지. non-React 코드와 통합할 때 용이.

defaultValue

React 초깃값 지정. 이후의 값 제어하지 않는 편이 좋음 -> defaultValue사용

file 입력 태그

codepen에서 보기