본문으로 이동

리액트 네이티브

위키백과, 우리 모두의 백과사전.

리액트 네이티브
React Native
개발자페이스북과 공동체
발표일2015년 3월 26일(9년 전)(2015-03-26)[1]
안정화 버전
0.74.1[2] 위키데이터에서 편집하기 / 2024년 5월 3일(24일 전)(2024년 5월 3일)
저장소https://github.com/facebook/react-native
프로그래밍 언어자바스크립트, 타입스크립트, 자바, 코틀린, 오브젝티브-C, 스위프트, 파이썬
라이선스MIT 허가서
웹사이트reactnative.dev

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

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

역사[편집]

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

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

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

동작 원리[편집]

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

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

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

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';

같이 보기[편집]

각주[편집]

  1. “React Native: Bringing modern web techniques to mobile”. 
  2. “Release 0.74.1”. 2024년 5월 3일. 2024년 5월 25일에 확인함. 
  3. “Chapter 1. What Is React Native?”. 《oreilly.com》. O’Reilly Media, Inc. 2020년 7월 30일에 확인함. 
  4. “Android Release for React Native”. 
  5. “React Native for Web”. 2019년 11월 6일에 확인함. 
  6. Windows Apps Team (2016년 4월 13일). “React Native on the Universal Windows Platform”. 《blogs.windows.com》. 2016년 11월 6일에 확인함. 
  7. “Out-of-Tree Platforms”. 《reactnative.dev》. Facebook, Inc. 2020년 7월 30일에 확인함. 
  8. https://github.com/status-im/react-native-desktop
  9. “Zuckerberg's Biggest Mistake? 'Betting on HTML5'. Mashable. 2018년 4월 7일에 확인함. 
  10. “React (JavaScript library)”. 
  11. “A short Story about React Native”. 2018년 1월 17일에 원본 문서에서 보존된 문서. 2018년 1월 16일에 확인함. 
  12. Christopher, Chedeau. “A Deep Dive into React Native”. 《YouTube》. 2018년 1월 16일에 확인함. 
  13. “React Native: Bringing modern web techniques to mobile”. 
  14. “Bridging in React Native”. 2015년 10월 14일. 2018년 1월 16일에 확인함. 
  15. “React Native vs Flutter: Which Cross-Platform Framework is Better?”. 2019년 5월 14일에 원본 문서에서 보존된 문서. 2019년 11월 6일에 확인함. 
  16. “How we build React Native app: 7 things which save your development time. Part 2”. 2019년 11월 6일에 확인함. 
  17. “How React Native can Empower App Development Process?”. 2019년 2월 15일에 확인함. 
  18. “reactspring.io – React Native Security”. 2020년 10월 5일에 확인함.