제어/비제어 컴포넌트?

1. 제어/비제어 컴포넌트란?

• 제어 컴포넌트: React에 의해 값이 제어되는 폼 엘리먼트
• 비제어 컴포넌트: React에 의해 값이 제어되지 않는 폼 엘리먼트

어떻게 비제어 컴포넌트를 제어 컴포넌트로 사용할 수 있나? 
=> value 값을 props로 관리한다면 그것이 제어 컴포넌트라고 할 수 있다.

 

폼 엘리먼트: Form을 구성하는 사용자 입력을 기반으로 DOM 자체에서 내부 상태를 가지는 DOM 엘리먼트

• <input>
• <textarea>
• <select>

 

2. 왜 폼 엘리먼트만 제어/비제어로 구분하지?

제어 컴포넌트	비제어 컴포넌트
사용자 입력	사용자 입력
이벤트 핸들러를 통해 setState	DOM 직접 변경
변경된 state로 리렌더

react에서 일반적인 DOM은

1. 컴포넌트 내부에서 local state를 갖거나

2. 부모에서 자식으로 props를 통해 state를 전달하거나

3. context api를 통해 관리한다.

 

VS.

 

폼 엘리먼트는 

=> 폼 엘리먼트는 다른 DOM 엘리먼트와는 다르게, 사용자 입력을 기반으로 DOM 자체에서 내부 상태를 가진다. 이 상태는 React의 state가 아니라, DOM이 자체적으로 가지는 state이므로 React에 의해 값이 제어되지 않는다.

 

DOM에 직접 접근하여 제어하고 싶다면 useRef를 사용한다.

Element	Value property
<input type="text" />	value="string"
</input type="checkbox" >	checked={boolean}
</input type="radio" >	checked={boolean}
<textarea />	value="string"
<select />	value="option value"

 

 

 

 

 

 

 

 

 

상태를 어느 레벨에서 관리할 것인지?

= 어떤 범위에서 상태를 참조하고 있는가?