제어 컴포넌트 vs 비제어 컴포넌트

제어 컴포넌트

HTML에서 input, textarea, select와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 속성에 유지되며 setState()에 의해 업데이트 됩니다.
우리는 React state를 '신뢰 가능한 단일 출처'로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 '제어 컴포넌트'라고 합니다.

여기서 잘 이해가 되지 않는다. 먼저는 state를 신뢰 가능한 단일 출처로 만들어 두 요소를 결합하고 그러면 폼을 렌더링하는 리액트 컴포넌트는 폼에 발생하는 사용자 입력값을 제어한다는 말이 '이게 무슨 말이냐?' 싶었다.

우리가 state를 사용하게 되었을 때 setState를 통해 업데이트가 되면 리렌더링이 일어나는 것은 알고 있다. 그렇게 리렌더링이 되어지면 사용자의 입력한 값을 변경하는 방법이 setState로 획일화되어지고 그로 인해서 state로 관리되는 입력값을 어느 곳에서 변경하려고 하더라도 하나의 state로서 신뢰성을 유지하게 되는 것입니다. 이렇듯 state를 통해 리액트가 그 신뢰성을 제어해주는 것을 React가 관리하는 폼 엘리먼트, 즉 제어 컴포넌트라고 이야기를 하는 것입니다.'

비제어 컴포넌트

기본적으로 폼 엘리먼트들에 입력된 값들은 각 태그의 value에 그 입력한 값이 저장되는데 결국 이 저장되는 곳은 DOM입니다. 비제어 컴포넌트라는 것은 결국 DOM에 접근하여 DOM에 저장된 입력되 ㄴvalue를 가져오는 것입니다. 이를 위해서 DOM에 접근하는 리액트 훅인 useRef를 통해 이루어집니다.
useRef의 current에 그 값을 저장하게 되면 저장된 값을 변경하더라도 리렌더링되지 않는데 이런 동작방식이 리액트가 관여하지 않는 비제어 컴포넌트라고 합니다.

제어 컴포넌트 vs 비제어 컴포넌트

☞ 결론적으로 제어 컴포넌트는 입력값에 대한 신뢰성이 보장되어야 하는 경우(즉각적인 이벤트 요청이 있을경우, 입력되어지는 값에 대한 유효성 검사를 진행할 때) 사용하면 좋고 비제어 컴포넌트는 필요할 때에만 그 값을 사용할 경우, 렌더링 로직이 복잡해서 매번 리렌더링 시키는 것이 비효율적일때 고려해보면 좋습니다.

 

참조 글 :

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