Skip to main content

RootTag

RootTag는 리액트 네이티브 화면의 네이티브 루트 뷰에 할당된 불투명 식별자이다. 즉, 안드로이드의 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는 루트 뷰와 해당 뷰를 호스팅하는 컨테이너를 식별하는 데 필요하다.

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

RootTag에 접근하는 방법​

0.65 버전 이하에서는 RootTag에 접근하기 위해 레거시 컨텍스트를 사용했다. React 18부터 도입될 동시성 기능을 준비하기 위해, 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를 사용한 부분을 모두 업데이트해야 한다.

0.66 버전에서의 주요 변경 사항​

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

향후 계획​

새로운 React Native 아키텍처가 발전함에 따라 RootTag에도 향후 개선이 이뤄질 예정이다. 이 과정에서 RootTag 타입을 불투명하게 유지하고 React Native 코드베이스에서의 혼란을 방지할 계획이다. 현재 RootTag가 숫자로 별칭이 지정되어 있다고 해서 이를 의존하지 말자! 만약 여러분의 앱이 RootTag에 의존한다면, 여기에서 확인할 수 있는 버전 변경 로그를 꼭 주시해야 한다.