제어 컴포넌트와 비제어 컴포넌트

제어 컴포넌트(Controlled Component)

• React에 값이 완전히 제어되는 Input과 Form Element
• State를 값으로 넘기고 그 State을 다룰 수 있는 핸들러를 콜백으로 넘긴다.
• input의 값은 항상 React의 state 값과 동일하다. (신뢰 가능한 단일 출처 - Single source of truth)

 

비제어 컴포넌트(Uncontrolled Component)

• 전통적인 HTML처럼 DOM에 제어되는 Input Element
• 오직 사용자만 값과 상호작용
• ref를 사용하여 직접 DOM의 값을 가져온다.

 

일반적으로 제어 컴포넌트의 사용이 권장된다.

제어 컴포넌트를 사용해야 다양한 interaction을 관리하기가 편리하기 때문이다.

 

Controlled and uncontrolled form inputs in React don't have to be complicated