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

제어 컴포넌트 (Controlled Component)

폼 – React (reactjs.org)

폼 – React

 

HTML 에서 폼 엘리먼트(<input>, <textarea>, <select>)는 사용자의 입력을 기반으로 자신의 state 를 관리하고 업데이트 합니다.

반면 React 에서는 변경할 수 있는 state 가 일반적으로 컴포넌트의 state 속성에 유지되며 setState 에 의해 업데이트 됩니다.

 

React 에서는 React state 를 "신뢰 가능한 단일 출처 (single soure of truth)" 로 만들어 두 요소를 결합할 수 있다고 합니다.

즉 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 setState 를 통해 제어 한다는 이야기 입니다.

이러한 방식으로 React 에 의해 값이 제어되는 입력 폼 엘리먼트를 "제어 컴포넌트" 라고 합니다.

 

 

React 의 <textarea> 와 관련된 문서를 보면 텍스트 영역에 타이핑을 해도 업데이트되지 않는 문제가 발생할 수 있다고 합니다.

 

 

비제어 컴포넌트(Uncontrolled Component)

비제어 컴포넌트 – React (reactjs.org)

비제어 컴포넌트 – React

 

비제어 컴포넌트의 경우 DOM 자체에서 폼 데이터가 다루어지게 된다고 합니다.

state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들기 위해서는 ref 를 사용해야 한다고 합니다.

 

 

React 렌더링 생명주기에서 폼 엘리먼트의 value 어트리뷰트는 DOM 의 value 를 대체한다고 합니다.

비제어 컴포넌트를 사용하면 React 초깃값을 지정하지만, 그 이후의 업데이트는 제어하지 않는 것이 좋다고 합니다.

 

이러한 경우 value 어트리뷰트 대신 defaultValue 를 지정할 수 있고

컴포넌트가 마운트된 후에 defaultValue 어트리뷰트를 변경해도 DOM 의 값이 업데이트 되지 않는다고 합니다.

 

비제어 컴포넌트와 제어 컴포넌트는 언제 사용해야 할까 ?

Controlled and uncontrolled form inputs in React don't have to be complicated | Gosha Spark (goshacmd.com)

https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/