{{위키데이터 속성 추적}}
{{소프트웨어 정보
| name = 리액트 네이티브<br />React Native
| logo = React-icon.svg
| developer = 페이스북과 공동체
| released = {{시작 날짜와 나이|2015|03|26}}<ref name="initialrelease">{{웹 인용|title=React Native: Bringing modern web techniques to mobile |url=https://code.fb.com/android/react-native-bringing-modern-web-techniques-to-mobile/}}</ref>
| latest release version = {{wikidata|property|edit|reference|P348}}
| latest release date = {{시작 날짜와 나이|{{wikidata|qualifier|P348|P577}}}}
| repo = https://github.com/facebook/react-native
| programming language = [[자바스크립트]], [[타입스크립트]], [[자바 (프로그래밍 언어)|자바]], [[코틀린]], [[오브젝티브-C]], [[스위프트]], [[파이썬]]
| platform = 
| license = [[MIT 허가서]]
| website = {{URL|https://reactnative.dev/}}
}}

'''리액트 네이티브'''(React Native)는 [[페이스북]]이 개발한 [[오픈 소스 소프트웨어|오픈 소스]] [[모바일 개발 프레임워크|모바일 애플리케이션 프레임워크]]이다.<ref>{{웹 인용
 |url= https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch01.html
 |title= Chapter 1. What Is React Native?
 |last=
 |first=
 |date=
 |website= oreilly.com
 |publisher= O’Reilly Media, Inc.
 |access-date= 30 July 2020
 |quote=}}</ref> [[안드로이드 (운영 체제)|안드로이드]]<ref>{{웹 인용|url=https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/|title=Android Release for React Native}}</ref>, [[iOS]], [[웹사이트|웹]]<ref>{{웹 인용|url=https://github.com/necolas/react-native-web/|title=React Native for Web|accessdate=2019-11-06}}</ref>, [[유니버설 윈도우 플랫폼|UWP]]<ref>{{웹 인용|url=https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/|title=React Native on the Universal Windows Platform|author=Windows Apps Team|date=April 13, 2016|website=blogs.windows.com|accessdate=2016-11-06}}</ref>용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 [[리액트 (자바스크립트 라이브러리)|리액트]]를 사용할 수 있게 한다<ref>{{웹 인용
 |url= https://reactnative.dev/docs/out-of-tree-platforms
 |title= Out-of-Tree Platforms
 |last=
 |first=
 |date=
 |website= reactnative.dev
 |publisher= Facebook, Inc.
 |access-date= 30 July 2020
 |quote=}}</ref>.

완전하지 않은 [[Qt (프레임워크)|Qt]] 포팅 또한 존재한다.<ref>https://github.com/status-im/react-native-desktop</ref>

== 역사 ==
2012년, [[마크 주커버그]]는 "회사가 저지른 가장 큰 실수는 네이티브와 반대되는 방식으로 [[HTML]]에 너무 많이 도박을 한 점이었습니다."라고 언급하였다.<ref>{{웹 인용|title=Zuckerberg's Biggest Mistake? 'Betting on HTML5'|url=https://mashable.com/2012/09/11/html5-biggest-mistake|publisher=Mashable|accessdate=7 April 2018}}</ref> 그는 [[페이스북]]이 곧 더 나은 모바일 경험을 전달할 것이라고 약속하였다.

[[페이스북]] 안에서 조던 워크는 백그라운드 [[자바스크립트]] [[스레드]]로부터 iOS의 [[사용자 인터페이스|UI]] 요소를 생성하는 방법을 알아냈다.<ref>{{웹 인용|url=https://en.wikipedia.org/wiki/React_(JavaScript_library)|title=React (JavaScript library)}}</ref> 이 기술을 사용하여 [[모바일 앱|네이티브 앱]]을 빌드할 수 있게 하기 위해 이 [[프로토타입]]을 온전하게 만들기 위한 내부 [[해커톤]]을 조직하기로 결정하였다.<ref>{{웹 인용|title=A short Story about React Native|url=https://jobninja.com/blog/short-story-react-native/|accessdate=16 January 2018|archive-date=2018-01-17|archive-url=https://web.archive.org/web/20180117011925/https://jobninja.com/blog/short-story-react-native/}}</ref>

수개월의 개발 이후 [[페이스북]]은 2015년 리액트 자바스크립트 구성을 위한 최초 버전을 출시하였다. 기술 토론 중에<ref>{{웹 인용|last1=Christopher|first1=Chedeau|title=A Deep Dive into React Native|url=https://www.youtube.com/watch?v=7rDsRXj9-cU|website=YouTube|accessdate=16 January 2018}}</ref> 크리스토퍼 체듀(Christopher Chedeau)는 [[페이스북]]이 이미 자신들의 그룹 앱과 광고 관리자 앱의 운영 환경에 리액트 네이티브를 사용하고 있다고 설명하였다.<ref name="initial_rn_post">{{웹 인용|url=https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/|title=React Native: Bringing modern web techniques to mobile|publisher=}}</ref>

== 동작 원리 ==
리액트 네이티브의 동작 원리는 리액트 네이티브가 [[리액트 (자바스크립트 라이브러리)|가상 DOM]]을 통해 [[문서 객체 모델|DOM]]을 조작하지 않는다는 점을 제외하고는 [[리액트 (자바스크립트 라이브러리)|리액트]]와 실질적으로 동일하다. [[직렬화]], [[비동기]], [[일괄 처리]] 브리지를 통해 네이티브 플랫폼과 통신하며 종단 장치에 직접(개발자가 작성한 [[자바스크립트]]를 해석하는) [[백그라운드 프로세스]]로 실행된다.<ref>{{웹 인용|title=Bridging in React Native|url=https://tadeuzagallo.com/blog/react-native-bridge/|accessdate=16 January 2018|date=14 October 2015}}</ref><ref>{{웹 인용| url= https://parsed.io/react-native-vs-flutter/| title= React Native vs Flutter: Which Cross-Platform Framework is Better?| accessdate= 2019-11-06| archive-date= 2019-05-14| archive-url= https://web.archive.org/web/20190514085130/https://parsed.io/react-native-vs-flutter/}}</ref><ref>{{웹 인용| url=https://blog.uptech.team/how-we-build-apps-on-react-native-part-2-7-things-you-should-know-to-save-your-development-time-944533f81c03|title=How we build React Native app: 7 things which save your development time. Part 2|accessdate=2019-11-06}}</ref>

리액트 구성 요소들은 리액트의 [[선언형 프로그래밍|선언형 UI 패러다임]]과 [[자바스크립트]]를 통해 기존 네이티브 코드를 감싸고 네이티브 API와 통신한다. 이렇게 함으로써 새 개발자 팀을 위한 네이티브 앱 개발을 가능케 하며 기존 네이티브 팀들이 훨씬 더 빠르게 작업할 수 있게 한다.<ref>{{웹 인용| url=https://www.xongolab.com/blog/how-react-native-can-empower-your-mobile-app-development-process/| title=How React Native can Empower App Development Process?|accessdate=15 February 2019}}</ref>

리액트 네이티브는 [[HTML]]이나 [[CSS]]를 사용하지 않는다. 그 대신 자바스크립트 쓰레드로부터의 메시지를 사용하여 네이티브 뷰를 조작한다. 리액트 네이티브는 개발자들이 [[안드로이드 (운영 체제)|안드로이드]]용 [[자바 (프로그래밍 언어)|자바]]/[[코틀린 (프로그래밍 언어)|코틀린]], [[iOS]]용 [[오브젝티브-C]]/[[스위프트 (프로그래밍 언어)|스위프트]]와 같은 언어로 작성한 네이티브 코드와 인터페이스가 가능하도록 브릿지(Bridge)를 제공하므로 더 많은 유연성을 제공한다.<ref>{{웹 인용|url=http://reactspring.io/?page_id=1015|제목=reactspring.io – React Native Security|성=|이름=|날짜=|웹사이트=|출판사=|언어=ko-KR|확인날짜=2020-10-05}}</ref>

== Hello World 예시 ==
리액트 네이티브의 [["Hello, World!" 프로그램|Hello, World]] 프로그램은 다음과 같다:

<syntaxhighlight lang="js" line="1">
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';
</syntaxhighlight>

== 같이 보기 ==
* [[모바일 개발 프레임워크]]
* 네이티브스크립트
* [[자마린]]
* [[아파치 코도바]]
* [[플러터]]
* [[타입스크립트]]<br />
== 각주 ==
{{각주}}

{{페이스북 둘러보기}}

[[분류:MIT 라이선스 소프트웨어]]
[[분류:페이스북 소프트웨어]]