TL;DR
State가 제어 컴포넌트고Ref가 비제어 컴포넌트로 이분적으로 구분 되는 개념은 아닙니다.- 제어 컴포넌트는 state의 변경마다 Re-Rendering이 되며, 비제어 컴포넌트는 Re-Rendering이 되지 않습니다.
온라인 모각코 스터디 하던 중, 취업한 한 스터디 팀원이 갑자기 들어와서는 '제어 컴포넌트와 비제어 컴포넌트 아시나요?' 라는 질문을 남겼습니다.
검색해보니 useState와 useRef의 개념에서 나온 단어구나라고 생각하려는 순간, 팀원분이 그런 개념이 아니라고 바로 정정 해주셨습니다. 공식 React 페이지에서도 useState와 useRef의 예시로 다루는데 다른 개념으로 설명해주셔서 한번 기록으로 남기고 싶은 생각이 들었습니다.
React 공식 홈페이지
제어 컴포넌트
React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. (...) 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.
https://ko.reactjs.org/docs/forms.html#controlled-components
- React 공식 홈페이지 내에서는
setState를 통해 값을 제어하는 방식을 제어 컴포넌트라고 명칭하고 있습니다. - input의 값은 항상 React state에 의해 결정되며, 모든 키 입력에서 handleChange가 동작하기 때문에 사용자가 입력할 때 보여지는 값이 업데이트됩니다.
비제어 컴포넌트
모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있습니다. (...)
비제어 컴포넌트는 DOM에 신뢰 가능한 출처를 유지하므로 비제어 컴포넌트를 사용할 때 React와 non-React 코드를 통합하는 것이 쉬울 수 있습니다.
https://ko.reactjs.org/docs/uncontrolled-components.html
- 데이터를 DOM 자체에서 값을 가져와서 사용합니다.
ref를 이용하여 DOM에서 폼값을 가져옵니다.
추가적인 내용
- 공식적인 내용은 아니지만 한 시니어 개발자 분의 설명을 전해 들은 내용을 바탕으로 정리하였습니다.
- 제어 컴포넌트와 비제어 컴포넌트 개념을 처음 접하는 분의 경우, 다른 분의 개념을 보는 것을 추천합니다.
- 틀린 부분이 있다면 지적 감사드립니다.
제어 컴포넌트
const [state, setState] = useState<String>();
return(
<div>
<input value={state} onChange={(e) => setState(e.target.value)}/>
</div>
)- 제어 컴포넌트는 setState만의 적용을 뜻하기 보단, input와 setState에서 양방향으로 서로 변경이 가능한 것과 같은 State와 컴포넌트간의 양방향으로 값이 변경되는 컴포넌트를 뜻합니다.
비제어 컴포넌트
const [state, setState] = useState<string>();
return(
<UncontrolledComponent onChange={(e)=>setState(e)}/>
)
const UncontrolledComponent = ({defaultValue, onChange}) => {
const[innerState,setInnerState] = useState(defaultValue);
return <input value={innerState} onChange={(e)=>setInnerState(e.target.value)}/>
}- 꼭
ref뿐 아니라 이런식으로 외부 state가 내부 state에 영향을 미치지 못하게 하는 것도 비제어 컴포넌트라는 설명을 들었습니다. - 이를 통해 항상 값이 리렌더링 되지 않는 비제어 컴포넌트가 되게 됩니다.
왜 사용하는가? 언제 사용해야 하는지?
- 제어 컴포넌트와 비제어 컴포넌트의 큰 차이점은 state의 동기화입니다.
- 제어 컴포넌트는 값이 변경될때마다 state를 같이 동기화해줍니다. 값이 조금이라도 바뀌게 되어도 바로 state가 바뀌기 때문에 빠르게 값을 반영하는 장점이 있지만, 불필요한 리렌더링이 된다는 점이 단점입니다.
- 비제어 컴포넌트는 DOM이 값을 저장하며 값을 항상 최신 값으로 보장하지 못하지만, 리렌더링이 되지 않아 많은 데이터를 처리하는 폼에 사용하기 좋은 점이 있습니다.
참고링크
https://ko.reactjs.org/docs/forms.html#controlled-components
