리액트 네이티브

리액트 네이티브
React Native

개발자	페이스북과 공동체
발표일	2015년 3월 26일(2015-03-26)
안정화 버전	0.76.1  / 2024년 10월 29일(2024년 10월 29일)
저장소	https://github.com/facebook/react-native
프로그래밍 언어	자바스크립트, 타입스크립트, 자바, 코틀린, 오브젝티브-C, 스위프트, 파이썬
라이선스	MIT 허가서
웹사이트	reactnative.dev

리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다. 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다.

완전하지 않은 Qt 포팅 또한 존재한다.

역사

2012년, 마크 주커버그는 "회사가 저지른 가장 큰 실수는 네이티브와 반대되는 방식으로 HTML에 너무 많이 도박을 한 점이었습니다."라고 언급하였다. 그는 페이스북이 곧 더 나은 모바일 경험을 전달할 것이라고 약속하였다.

페이스북 안에서 조던 워크는 백그라운드 자바스크립트 스레드로부터 iOS의 UI 요소를 생성하는 방법을 알아냈다. 이 기술을 사용하여 네이티브 앱을 빌드할 수 있게 하기 위해 이 프로토타입을 온전하게 만들기 위한 내부 해커톤을 조직하기로 결정하였다.

수개월의 개발 이후 페이스북은 2015년 리액트 자바스크립트 구성을 위한 최초 버전을 출시하였다. 기술 토론 중에 크리스토퍼 체듀(Christopher Chedeau)는 페이스북이 이미 자신들의 그룹 앱과 광고 관리자 앱의 운영 환경에 리액트 네이티브를 사용하고 있다고 설명하였다.

동작 원리

리액트 네이티브의 동작 원리는 리액트 네이티브가 가상 DOM을 통해 DOM을 조작하지 않는다는 점을 제외하고는 리액트와 실질적으로 동일하다. 직렬화, 비동기, 일괄 처리 브리지를 통해 네이티브 플랫폼과 통신하며 종단 장치에 직접(개발자가 작성한 자바스크립트를 해석하는) 백그라운드 프로세스로 실행된다.

리액트 구성 요소들은 리액트의 선언형 UI 패러다임과 자바스크립트를 통해 기존 네이티브 코드를 감싸고 네이티브 API와 통신한다. 이렇게 함으로써 새 개발자 팀을 위한 네이티브 앱 개발을 가능케 하며 기존 네이티브 팀들이 훨씬 더 빠르게 작업할 수 있게 한다.

리액트 네이티브는 HTML이나 CSS를 사용하지 않는다. 그 대신 자바스크립트 쓰레드로부터의 메시지를 사용하여 네이티브 뷰를 조작한다. 리액트 네이티브는 개발자들이 안드로이드용 자바/코틀린, iOS용 오브젝티브-C/스위프트와 같은 언어로 작성한 네이티브 코드와 인터페이스가 가능하도록 브릿지(Bridge)를 제공하므로 더 많은 유연성을 제공한다.

Hello World 예시

리액트 네이티브의 Hello, World 프로그램은 다음과 같다:

import React from 'react';
import { AppRegistry, Text } from 'react-native';

const HelloWorldApp = () => <Text>Hello world!</Text>;
export default HelloWorldApp;

// Skip this line if using Create React Native App
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

// The React native code can also be imported from another component with the following code:
import HelloWorldApp from './HelloWorldApp';

같이 보기

• 모바일 개발 프레임워크
• 네이티브스크립트
• 자마린
• 아파치 코도바
• 플러터
• 타입스크립트