[ReactJS_Complete] Controlled Component, Uncontrolled Component

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

1. Controlled Component

: 사용자의 입력을 기반으로 state를 관리하고 변경

<select>는 selected값에 따라 value가 확정 = Controlled Component

+ Single Source of Truth, 신뢰 가능한 단일 출처

: 하나의 상태는 한 곳에서만 존재

: state value가 변경 → state값이 쓰인 곳도 항상 최신값으로 유지됨

: Single Source of Truth가 이뤄지는 component가 제어 컴포넌트

❌ 불필요한 Rerendering or API 호출이 발생할 수 있음

⭕ 대안: Throttling(마지막으로 함수가 호출되면 일정시간이 지나기 전에는 다시 동일한 함수가 호출되지 않는 것)

             : Debouncing(연이어 함수가 호출되면 가장 마지막 ( 또는 맨 처음 ) 함수만 호출되는 것)

 

2. Uncontrolled Component

: React에서 값을 보장하지 않는 방식으로 태그가 자체적으로 상태를 갖는 경우를 의미

: 대표적으로 input 태그는 값 입력 시, 입력 폼 내부 상태로 관리됨

: Uncontrolled Component는 값이 실시간으로 동기화되지 않으며 Click event 발생 등 사용자가 트리거할 때, Rerendering을 하여 값을 동기화시킴

 

 

 

참고 자료

[React] 제어 컴포넌트 VS 비제어 컴포넌트

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

[React] 제어 컴포넌트 vs 비제어 컴포넌트

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

React: 제어 컴포넌트와 비제어 컴포넌트의 차이점

 

[ReactJS_Complete] React.useRef()