Controlled Component 란?

ReactJS에서 controlled component 와 uncontrolled components 는 무엇이고 무슨 차이가 있는걸까?

stateful DOM component(form elements)는 자신만의 state를 가지고 있고 update한다.
React가 가지고 있는 state를 "single source of truth"로 정하는 것은 from element가 props를 통해 React state를 전달받아 internal state값을 정하는 것을 의미한다.
다시말해, form element를 render하는 React Component가 form 에 입력되는 사용자의 값을 control할 때 이를 Controlled Component라고 한다.

 

Uncontrolled Component는 자신만의 state를 가지고 있는 것이다. current value에 접근하기 위해선 ref를 이용해 DOM에서 query하여야 한다.

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>