제어 컴포넌트를 사용하는 이유?(React에서 왜 권장할까?)

제어 컴포넌트와 비제어 컴포넌트는 각각 장단점이 있는 방식이다.
그런데 React 팀에서는 제어 컴포넌트를 권장한다.(공식문서에 명시되어 있음.)
오늘은 왜 그런지 다시한번 상기해보는 시간!

 

 React에서는 상태값이라는 값을 통해 가상돔에서 어떤 노드리스트를 수정할 것인가를 체크한다. 또한 리렌더링 없이 DOM요소에 접근하는 useRef를 통한 비제어 컴포넌트도 지원한다. 지원하는데에는 이유가 있을 것이고, 각각 사용하는 곳을 선택하는 근거가 있을텐데 어떤 점들이 있는지 알아보자. 먼저 각 방식에 있어 장, 단점을 알아보고 넘어가자.

구 분	장점	단점
제어 컴포넌트	1. 상태가 React 컴포넌트 내에 있으므로 입력 데이터를 직접 조작하거나 검증하는 것이 쉽다. 2. React의 "single source of truth" 원칙을 따릅니다. 즉, 앱의 상태는 React가 관리한다. 3. 조건부 렌더링 또는 입력 값에 따른 즉각적인 UI 변화를 쉽게 구현할 수 있다.	1. 상태가 변할 때마다 리렌더링이 일어나 렌더링 최적화에 방해가 필요할 수 있다.(메모이제이션이나 상태값 최소화 등의 개발자 스킬역량에 따라 최적화 가능)
비제어 컴포넌트	1. React 외부의 DOM 요소에 직접 접근하는 방식임으로 기존의 JavaScript 코드나 라이브러리와의 통합에서 필요할 수 있다. 2. 상태 관리가 필요 없으므로 코드가 간결해질 수 있다.	1. ref를 사용해야 하므로 React의 선언적 패러다임에서 벗어날 수 있다. 2. 입력 데이터를 조작하거나 검증하는 것이 복잡해진다.

 개인적으로는 스크롤 이벤트라던가 interval을 통해 짧은 시간안에 값을 계속 변경해주는 타이머 같은 기능이 아니고서는 React에서 권장하는 제어 컴포넌트 방식을 사용한다.
 공식문서에는 '출처가 하나인 소스'라고 표현되어 있는데 즉, 상태는 React가 관리하고 있기 때문에 setter를 통한 상태값 업데이트가 일어나면 어느곳에서도 그 값이 동일하다는 것을 React가 보장한다는 것이다. 위의 장점에서 말한 것과 같이 single of source of truth라는 원칙을 지켜주기 위해 제어 컴포넌트를 사용한다.

 

React 팀은 왜 제어 컴포넌트를 권장하는 거야?
라고 gpt-4에게 질문을 해봤다.

1. 단일 진실의 원천 (Single Source of Truth): React의 전반적인 철학 중 하나는 애플리케이션의 상태를 가능한 한 중앙에서 관리하는 것입니다. 제어 컴포넌트를 사용하면 React 컴포넌트의 상태가 "진실의 원천"이 되어 애플리케이션 전체에서 일관된 데이터를 유지할 수 있습니다. 반면 비제어 컴포넌트는 DOM 자체가 상태를 유지하므로 React의 이 철학과는 다소 벗어납니다.

2. 예측 가능성: 제어 컴포넌트는 React 상태와 연결되어 있으므로 해당 상태만 관리하면 UI의 현재 상태와 동작을 쉽게 예측할 수 있습니다. 비제어 컴포넌트에서는 DOM 상태와 React 상태 사이의 불일치 가능성이 있습니다.

3. 조건부 렌더링과 상호 작용: 상태를 직접 제어하는 능력 덕분에 제어 컴포넌트는 사용자 입력에 따라 UI를 동적으로 변경하는 것이 더 쉽습니다. 예를 들어, 특정 값에 따라 입력 필드를 활성화/비활성화하는 경우, 상태와 조건부 렌더링을 사용하여 이를 쉽게 구현할 수 있습니다.

4. 데이터 검증 및 처리: 사용자의 입력을 받아들이기 전에 데이터를 검증하거나 처리해야 하는 경우, 제어 컴포넌트를 사용하면 이 과정을 쉽게 구현할 수 있습니다. 상태에 변화가 있을 때마다 이를 검사하고 적절한 피드백을 제공할 수 있습니다.

5. 통합성: 많은 React 관련 라이브러리나 도구들 (예: 폼 관리 라이브러리)은 제어 컴포넌트를 기반으로 작동합니다. 제어 컴포넌트를 사용하면 이러한 도구와의 통합이 더 원활해집니다.

6. 명시성: 제어 컴포넌트는 코드를 읽는 사람에게 명확하게 상태와 UI 사이의 관계를 보여줍니다. 이는 코드의 가독성과 유지 보수성을 향상시킵니다.

 뭐 이렇답니다~(공식문서 내용을 다루고 있어서 첨부해봄.) 지피티는 항상 참고용이고 제대로 된 내용은 공식문서가 확실하다고 생각한다.