1. 리액트 네이티브란?

리액트 네이티브(React Native)는 페이스북에서 개발한 오픈소스 프레임워크로, JavaScript와 React를 사용해 iOS와 Android 앱을 동시에 개발할 수 있게 해줍니다. 웹 개발자도 손쉽게 모바일 앱 개발에 접근할 수 있으며, 네이티브 성능에 가까운 결과물을 만들 수 있다는 장점이 있습니다.

리액트 네이티브의 주요 특징

  • 크로스 플랫폼 개발: 하나의 코드로 iOS와 Android 앱을 동시에 개발할 수 있습니다.
  • JavaScript + React: 기존 웹 개발 지식을 그대로 활용할 수 있습니다.
  • 네이티브 성능: JavaScript 코드가 네이티브 코드와 연결되어, 성능 저하 없이 빠르게 작동합니다.

 

2. 리액트 네이티브의 구조

리액트 네이티브(React Native)는 리액트를 기반으로 네이티브 모바일 앱을 개발할 수 있도록 하는 프레임워크입니다. 하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있습니다.

리액트 네이티브는 다층 레이어 구조로 되어 있으며, 주요 레이어는 다음과 같습니다:

 

1) UI Layer (사용자 인터페이스 레이어)

이 레이어는 화면에 표시되는 모든 UI 요소를 포함하며, React의 View, Text, Image와 같은 기본 컴포넌트로 구성됩니다.

  • <View>: 웹의 <div>와 유사한 컨테이너 역할을 합니다.
  • <Text>: 텍스트를 렌더링합니다.
  • <Image>: 이미지를 표시합니다.
  • <ScrollView> / <FlatList>: 스크롤 가능한 콘텐츠를 관리합니다.

 

2) Component Layer (컴포넌트 레이어)

재사용 가능한 UI 컴포넌트들이 위치하는 레이어입니다. 일반적으로 components/ 폴더에 저장되며, 버튼, 카드, 입력 필드 등의 요소를 포함합니다.

const CustomButton = ({ title, onPress }) => (
  <TouchableOpacity onPress={onPress} style={{ padding: 10, backgroundColor: 'blue' }}>
    <Text style={{ color: 'white' }}>{title}</Text>
  </TouchableOpacity>
);

 

3) Screen Layer (화면 레이어)

앱의 각 개별 화면(Screen)을 관리하는 레이어입니다. 주로 screens/ 폴더에 위치하며, 각 페이지마다 별도의 컴포넌트로 구현됩니다.

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>홈 화면</Text>
    <CustomButton title="프로필로 이동" onPress={() => navigation.navigate('Profile')} />
  </View>
);

 

4) Navigation Layer (네비게이션 레이어)

화면 간 이동을 관리하는 레이어로, react-navigation 라이브러리를 사용하여 구현됩니다. 네비게이션 구조는 navigation/ 폴더에 정의됩니다.

 

5) State Management Layer (상태 관리 레이어)

앱의 상태를 관리하는 레이어로, useState, useContext, Redux, Recoil 등의 상태 관리 도구가 사용됩니다.

 

6) Data Layer (데이터 관리 레이어)

API 호출, 데이터 저장 및 관리와 관련된 로직이 포함된 레이어입니다. axios, fetch 등을 사용하여 서버와 데이터를 주고받습니다.

 

 

3. 리액트 네이티브의 동작 원리

리액트 네이티브는 웹과 네이티브 환경을 연결하는 브릿지(Bridge) 아키텍처를 사용합니다.

브릿지 방식이란, 웹 브라우저에서 사용되는 자바스크립트 엔진의 핵심 부분을 이용하여, 자바스크립트로 작성된 컴포넌트가 네이티브 환경의 뷰 클래스를 호출할 수 있도록 연결합니다. 즉, 개발자가 자바스크립트로 작성한 코드는 브릿지를 통해 실제 네이티브 코드의 실행을 유발하며 이는 Android 또는 iOS의 네이티브 뷰를 생성하고 조작합니다.

사진 출처: https://sugoring-it.tistory.com/305

 

기본적인 동작 원리는 다음과 같습니다

1) JavaScript 코드 실행

리액트 네이티브 앱은 JavaScript로 작성된 코드를 실행합니다. 앱이 실행되면 JavaScript 엔진이 코드를 처리합니다.

2) React 코드 → 네이티브 코드 변환

리액트 네이티브는 **브릿지(Bridge)**를 통해 React 컴포넌트에서 정의한 UI 요소들을 iOS에서는 UIKit, Android에서는 View 시스템으로 변환합니다.

3) 네이티브 모듈과 통신

JavaScript에서 작성된 코드는 네이티브 모듈과 상호작용할 수 있습니다. 예를 들어, 카메라, 위치 서비스, 파일 시스템 등의 기능을 활용할 때는 네이티브 모듈을 통해 연결됩니다.

4) 네이티브와 JavaScript 간의 비동기 통신

리액트 네이티브는 네이티브 코드와 JavaScript 코드 간의 통신을 **비동기 방식(Asynchronous Messaging)**으로 처리합니다. 이를 통해 성능을 최적화하고, UI 스레드가 차단되지 않도록 합니다.

5) 화면 업데이트

React의 Reconciliation(조정) 알고리즘이 가상 DOM을 활용하여 변경 사항을 감지하고, 필요한 UI 업데이트만 네이티브 화면에 반영합니다.

 

 

4. 주요 파일과 구조

MyReactNativeApp/
├── android/          # Android 네이티브 프로젝트 (Java/Kotlin)
├── ios/              # iOS 네이티브 프로젝트 (Swift/Objective-C)
├── node_modules/     # JavaScript 라이브러리
├── App.js            # 메인 React Native 컴포넌트
├── package.json      # 프로젝트 의존성 및 스크립트 정의
├── index.js          # 앱 엔트리 포인트
└── babel.config.js   # Babel 설정 파일

App.js

앱의 핵심 파일로, 화면을 구성하고 주요 기능을 정의하는 역할을 합니다. 앱의 전체 구조를 설정하고 네비게이션을 관리합니다.

index.js

React Native 앱을 실행하는 진입점입니다. App.js를 앱으로 등록해 실제 기기나 에뮬레이터에서 실행될 수 있도록 합니다.

iOS / Android 폴더

플랫폼별 네이티브 코드를 포함하고 있으며, 앱의 빌드 및 실행 환경을 담당합니다.

  • iOS: Xcode 프로젝트 파일, 앱 시작 설정 파일, 권한 설정 파일 등이 포함됩니다.
  • Android: 앱의 권한, 빌드 설정, 실행 진입점이 정의된 파일들이 포함됩니다.

'기타' 카테고리의 다른 글

[MongoDB] 명령어 모음  (0) 2025.04.11
[YOLO] Roboflow로 라벨링하기 (Multiclass Classification)  (0) 2025.04.09
[Java] 어노테이션 (Annotation)의 개념 및 종류  (1) 2025.01.16
블랙박스 테스트와 화이트박스 테스트  (0) 2025.01.08
[Java] Static 변수와 Static 메소드  (0) 2025.01.07

티스토리툴바