Skip to main content

용어

개발자 메뉴

개발 빌드에서 사용할 수 있는 앱 내 개발자 메뉴는 다양한 개발 및 디버깅 작업에 접근할 수 있게 해줍니다. 문서에서 개발자 메뉴에 대해 더 알아보기.

Fabric Renderer

React Native는 웹용 React와 동일한 React 프레임워크 코드를 실행합니다. 하지만 React Native는 DOM 노드(웹의 호스트 뷰로 간주할 수 있음) 대신 일반 플랫폼 뷰(호스트 뷰)로 렌더링합니다. 호스트 뷰로의 렌더링은 Fabric Renderer 덕분에 가능합니다. Fabric은 React가 각 플랫폼과 통신하고 호스트 뷰 인스턴스를 관리할 수 있게 합니다. Fabric Renderer는 JavaScript로 존재하며 C++ 코드에서 제공하는 인터페이스를 대상으로 합니다. React 렌더러에 대해 더 알아보려면 이 블로그 글을 참고하세요.

호스트 플랫폼

React Native를 내장하는 플랫폼 (예: Android, iOS, macOS, Windows).

호스트 뷰 트리 (및 호스트 뷰)

호스트 플랫폼(예: Android, iOS)에서 뷰를 트리 형태로 표현한 것입니다. Android에서는 호스트 뷰가 android.view.ViewGroup, android.widget.TextView 등의 인스턴스로, 호스트 뷰 트리의 기본 구성 요소입니다. 각 호스트 뷰의 크기와 위치는 Yoga로 계산된 LayoutMetrics를 기반으로 하며, 스타일과 콘텐츠는 React Shadow Tree의 정보를 기반으로 합니다.

JavaScript Interfaces (JSI)

C++ 애플리케이션에 JavaScript 엔진을 내장하기 위한 경량 API입니다. Fabric은 이를 사용해 Fabric의 C++ 코어와 React 간의 통신을 처리합니다.

Java Native Interface (JNI)

Java 네이티브 메서드를 작성하기 위한 API로, Fabric의 C++ 코어와 Java로 작성된 Android 간의 통신에 사용됩니다.

React 컴포넌트

React 엘리먼트를 어떻게 생성할지 정의하는 자바스크립트 함수 또는 클래스입니다. React 컴포넌트와 엘리먼트에 대해 더 알아보기

React 합성 컴포넌트

render 메서드를 구현한 React 컴포넌트로, 다른 React 합성 컴포넌트나 React 호스트 컴포넌트로 축소됩니다.

React Host Components 또는 Host Components

호스트 뷰(예: <View>, <Text>)가 뷰 구현을 제공하는 React 컴포넌트입니다. 웹에서는 ReactDOM의 Host 컴포넌트가 <p><div>와 같은 컴포넌트입니다.

React 엘리먼트 트리 (그리고 React 엘리먼트)

_React 엘리먼트 트리_는 React가 자바스크립트에서 생성하며, React 엘리먼트로 구성됩니다. _React 엘리먼트_는 화면에 표시되어야 할 내용을 설명하는 평범한 자바스크립트 객체입니다. 여기에는 props, 스타일, 그리고 자식 엘리먼트가 포함됩니다. React 엘리먼트는 자바스크립트 내에서만 존재하며, React 합성 컴포넌트 또는 React 호스트 컴포넌트의 인스턴스를 나타낼 수 있습니다. React 컴포넌트와 엘리먼트에 대해 더 알아보려면 이 블로그 포스트를 참고하세요.

React Native Framework

React Native는 개발자들이 React 프로그래밍 패러다임을 사용해 네이티브 타겟에 애플리케이션을 배포할 수 있게 해줍니다. React Native 팀은 네이티브 앱 개발 시 가장 일반적인 사용 사례에 맞는 핵심 API기능을 만드는 데 주력하고 있습니다.

네이티브 앱을 프로덕션에 배포하려면 일반적으로 React Native에서 기본적으로 제공하지 않는 도구와 라이브러리 세트가 필요합니다. 이러한 도구의 예로는 특정 스토어에 애플리케이션을 배포하기 위한 지원이나 라우팅 및 네비게이션 메커니즘에 대한 지원이 있습니다.

이러한 도구와 라이브러리가 모여 React Native 위에 구축된 일관된 프레임워크를 형성할 때, 우리는 이를 React Native Framework라고 정의합니다.

오픈소스 React Native Framework의 예로는 Expo가 있습니다.

React Shadow Tree (그리고 React Shadow Node)

_React Shadow Tree_는 Fabric 렌더러에 의해 생성되며 React Shadow Node로 구성됩니다. React Shadow Node는 마운트될 React Host 컴포넌트를 나타내는 객체로, JavaScript에서 시작된 props를 포함합니다. 또한 레이아웃 정보(x, y, width, height)도 포함합니다. Fabric에서는 React Shadow Node 객체가 C++로 존재합니다. Fabric 이전에는 이 객체들이 모바일 런타임 힙(예: Android JVM)에 존재했습니다.

Yoga 트리 (그리고 Yoga 노드)

_Yoga 트리_는 Yoga가 React Shadow 트리의 레이아웃 정보를 계산하는 데 사용됩니다. 일반적으로 각 React Shadow 노드는 _Yoga 노드_를 생성합니다. React Native가 레이아웃을 계산하기 위해 Yoga를 사용하기 때문입니다. 하지만 이는 절대적인 요구사항은 아닙니다. Fabric은 Yoga를 사용하지 않는 React Shadow 노드도 생성할 수 있습니다. 각 React Shadow 노드의 구현 방식에 따라 레이아웃을 계산하는 방법이 결정됩니다.