Skip to main content
Version: Next

RootTag

RootTag는 React Native 화면의 네이티브 루트 뷰에 할당된 불투명 식별자이다. 즉, Android의 ReactRootView나 iOS의 RCTRootView 인스턴스를 가리킨다. 간단히 말해, 이는 화면 식별자 역할을 한다.

RootTag를 언제 사용할까?​

대부분의 React Native 개발자는 RootTag를 직접 다룰 필요가 없다.

RootTag는 앱이 여러 React Native 루트 뷰를 렌더링하고, 각 화면에 따라 네이티브 API 호출을 다르게 처리해야 할 때 유용하다. 예를 들어, 앱이 네이티브 네비게이션을 사용하고 각 화면이 별도의 React Native 루트 뷰로 구성된 경우가 이에 해당한다.

네이티브 네비게이션에서 모든 React Native 루트 뷰는 플랫폼의 네비게이션 뷰(예: Android의 Activity, iOS의 UINavigationViewController) 안에서 렌더링된다. 이를 통해 플랫폼의 네비게이션 패러다임(예: 네이티브 디자인 및 네비게이션 트랜지션)을 활용할 수 있다. 네이티브 네비게이션 API와 상호작용하는 기능은 네이티브 모듈을 통해 React Native에 노출될 수 있다.

예를 들어, 화면의 제목 표시줄을 업데이트하려면 네비게이션 모듈의 API인 setTitle("Updated Title")을 호출해야 한다. 하지만 이때 어떤 화면을 업데이트할지 알려줘야 한다. 여기서 RootTag는 루트 뷰와 해당 뷰를 호스팅하는 컨테이너를 식별하는 데 필요하다.

또 다른 사용 사례는 앱이 특정 JavaScript 호출을 해당 호출이 발생한 루트 뷰에 따라 네이티브 측에 전달해야 할 때다. RootTag는 서로 다른 화면에서 발생한 호출의 출처를 구분하는 데 필수적이다.

RootTag에 접근하는 방법​

0.65 버전 이하에서는 RootTag에 접근하기 위해 레거시 컨텍스트를 사용했다. React 18 이상에서 도입될 동시성 기능을 위해 React Native를 준비하면서, 0.66 버전부터는 최신 Context API를 통해 RootTagContext로 마이그레이션하고 있다. 버전 0.65에서는 레거시 컨텍스트와 권장되는 RootTagContext를 모두 지원해 개발자들이 점진적으로 마이그레이션할 수 있도록 했다. 주요 변경 사항은 요약 문서를 참고한다.

RootTagContext를 통해 RootTag에 접근하는 방법은 다음과 같다.

js
import {RootTagContext} from 'react-native';
import NativeAnalytics from 'native-analytics';
import NativeNavigation from 'native-navigation';

function ScreenA() {
  const rootTag = useContext(RootTagContext);

  const updateTitle = title => {
    NativeNavigation.setTitle(rootTag, title);
  };

  const handleOneEvent = () => {
    NativeAnalytics.logEvent(rootTag, 'one_event');
  };

  // ...
}

class ScreenB extends React.Component {
  static contextType: typeof RootTagContext = RootTagContext;

  updateTitle(title) {
    NativeNavigation.setTitle(this.context, title);
  }

  handleOneEvent() {
    NativeAnalytics.logEvent(this.context, 'one_event');
  }

  // ...
}

클래스와 훅을 사용한 Context API에 대해 더 자세히 알아보려면 React 문서의 클래스와 훅 섹션을 참고한다.

0.65 버전의 주요 변경 사항​

RootTagContext는 이전 버전에서 unstable_RootTagContext로 불렸으나, 0.65 버전에서 RootTagContext로 이름이 변경되었다. 코드베이스에서 unstable_RootTagContext를 사용한 부분이 있다면 RootTagContext로 업데이트해야 한다.

0.66 버전의 주요 변경 사항​

기존의 RootTag에 대한 레거시 컨텍스트 접근 방식이 제거되고, RootTagContext로 대체된다. 0.65 버전부터 개발자들은 RootTag 접근 방식을 RootTagContext로 미리 마이그레이션하는 것을 권장한다.

향후 계획​

새로운 React Native 아키텍처가 점진적으로 발전함에 따라 RootTag도 향후 여러 차례 개선될 예정이다. 이 과정에서 RootTag 타입을 불투명하게 유지하고 React Native 코드베이스에서 불필요한 변경을 방지할 계획이다. 현재 RootTag가 숫자로 정의되어 있다는 사실에 의존하지 말아야 한다. 여러분의 앱이 RootTag를 사용한다면, 여기에서 확인할 수 있는 버전 변경 로그를 주의 깊게 살펴보길 바란다.