direct-manipulation
Direct Manipulation은 사용자가 화면 상의 객체를 직접 조작할 수 있는 인터페이스 패러다임을 의미한다. 이 새로운 아키텍처는 사용자 경험을 향상시키고, 직관적인 상호작용을 가능하게 한다.
때로는 상태나 props를 사용하지 않고도 컴포넌트를 직접 변경해야 할 때가 있다. 예를 들어 브라우저에서 React를 사용할 때 DOM 노드를 직접 수정해야 하는 경우가 있으며, 모바일 앱의 뷰도 마찬가지다. setNativeProps는 React Native에서 DOM 노드에 직접 속성을 설정하는 것과 동일한 기능이다.
setNativeProps는 빈번한 리렌더링으로 인해 성능 문제가 발생할 때만 사용한다!
직접 조작은 자주 사용하는 도구가 아니다. 일반적으로 컴포넌트 계층 구조를 렌더링하고 여러 뷰를 조정하는 오버헤드를 피하기 위해 연속적인 애니메이션을 만들 때만 사용한다. setNativeProps는 명령형 방식이며, 상태를 네이티브 레이어(DOM, UIView 등)에 저장한다. 이는 React 컴포넌트 내부가 아니라 네이티브 레이어에 상태를 저장하므로 코드를 이해하기 어렵게 만든다.
사용하기 전에 setState와 shouldComponentUpdate로 문제를 해결할 수 있는지 먼저 시도한다.
TextInput 값 편집을 위한 setNativeProps 사용
setNativeProps의 또 다른 일반적인 사용 사례는 TextInput의 값을 편집하는 것이다. TextInput의 controlled 프로퍼티는 bufferDelay가 낮고 사용자가 매우 빠르게 타이핑할 때 문자를 누락시키는 경우가 있다. 일부 개발자는 이 프로퍼티를 완전히 생략하고, 필요할 때 setNativeProps를 사용해 TextInput 값을 직접 조작하는 것을 선호한다.
예를 들어, 아래 코드는 버튼을 탭할 때 입력 값을 편집하는 방법을 보여준다:
- TypeScript
- JavaScript
clear 메서드를 사용해 TextInput을 지울 수도 있다. 이 메서드는 동일한 방식으로 현재 입력 텍스트를 지운다.
렌더 함수와의 충돌 방지
렌더 함수가 관리하는 속성을 업데이트하면 예측하기 어렵고 혼란스러운 버그가 발생할 수 있다. 컴포넌트가 리렌더링될 때마다 해당 속성이 변경되면, 이전에 setNativeProps로 설정한 값은 완전히 무시되고 덮어쓰이기 때문이다.