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