리액트 네이티브

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요
2. 역사
- 2.1. 개발 배경
- 2.2. 초기 개발 및 공개
3. 동작 원리
4. Hello World 예시
참조

1. 개요

리액트 네이티브는 페이스북이 개발한, 자바스크립트를 사용하여 네이티브 모바일 앱을 구축할 수 있는 오픈 소스 UI 소프트웨어 프레임워크이다. 2012년 마크 저커버그가 HTML5에 대한 과도한 투자를 실수로 언급한 것을 계기로 개발이 시작되었으며, 조던 워크가 iOS UI 요소를 생성하는 방법을 발견한 후 내부 해커톤을 통해 프로토타입을 완성했다. 2015년 첫 번째 버전이 공개되었으며, iOS를 시작으로 안드로이드, Windows, macOS 등 다양한 플랫폼을 지원한다. 리액트 네이티브는 리액트와 유사하게 가상 DOM을 사용하며, 자바스크립트 코드를 백그라운드 프로세스에서 실행하여 네이티브 플랫폼과 통신한다. 개발자는 자바스크립트와 네이티브 코드를 연결하는 브릿지를 통해 유연성을 확보할 수 있다.

더 읽어볼만한 페이지

페이스북 소프트웨어 - HHVM
HHVM은 페이스북에서 개발한 PHP 및 Hack 언어 실행 엔진으로, JIT 컴파일을 통해 높은 성능을 제공하며 웹 개발 분야에 새로운 가능성을 제시했다.
페이스북 소프트웨어 - 페이스북 메신저
페이스북 메신저는 2008년 페이스북 채팅으로 시작하여 2011년 독립적인 모바일 앱으로 출시된 페이스북의 인스턴트 메시징 서비스로, 다양한 기능 추가와 논란 속에서도 꾸준히 성장하여 2020년에는 메신저 룸을 출시하고 COVID-19 팬데믹 기간 동안 메시지 트래픽이 크게 증가했다.
MIT 라이선스 소프트웨어 - MS-DOS
MS-DOS는 마이크로소프트가 개발한 개인용 컴퓨터용 디스크 운영 체제로, IBM PC의 표준 운영 체제로 널리 사용되었으며, 단일 작업 환경과 명령줄 인터페이스를 특징으로 한다.
MIT 라이선스 소프트웨어 - Zcash
Zcash는 존스 홉킨스 대학교 연구를 기반으로 개발된 익명성 강화 암호화폐로, zk-SNARK 영지식 증명을 통해 거래 당사자의 익명성을 보장하지만, 범죄 악용 우려와 규제 대상 가능성이 존재한다.

리액트 네이티브 - [IT 관련 정보]에 관한 문서
기본 정보
리액트 아이콘
개발	Meta 및 커뮤니티
최초 릴리스	2015년 3월 26일
리포지토리	GitHub 리포지토리
프로그래밍 언어	C++ 자바 자바스크립트 Objective-C Kotlin 타입스크립트 스위프트 파이썬 Objective-C++
플랫폼	안드로이드 Android TV iOS macOS tvOS 웹 윈도우 UWP VR
장르	애플리케이션 프레임워크
라이선스	MIT 라이선스
웹사이트	공식 웹사이트
세부 정보
용도	네이티브 앱 구축
특징	크로스 플랫폼 개발 지원 리액트 기반
참고 자료	O'Reilly Learning React Native 1장 페이스북 엔지니어링 블로그 - React Native for Android
기타 플랫폼 지원
웹	React Native for Web
macOS	react-native-macos
윈도우	React Native on the Universal Windows Platform
데스크톱	React Native Desktop

2. 역사

2012년, 마크 저커버그는 페이스북이 모바일 앱 개발에 HTML5에 과도하게 의존한 것을 가장 큰 실수라고 언급하며, 네이티브 앱 개발의 중요성을 강조했다.^[45] 이후 페이스북은 내부 해커톤을 통해 리액트 네이티브를 개발, 2015년에 첫 번째 버전을 공개했다.^[47]^[48] 리액트 네이티브는 초기에는 iOS 플랫폼을 대상으로 개발되었으나, 이후 안드로이드, 윈도우, macOS 등 다양한 플랫폼으로 확장되었다. 현재 마이크로소프트에서도 윈도우 및 macOS용 리액트 네이티브를 관리하고 있다.

2. 1. 개발 배경

2012년, 마크 저커버그는 "회사가 저지른 가장 큰 실수는 네이티브와 반대되는 방식으로 HTML에 너무 많이 도박을 한 점이었습니다."라고 언급하였다.^[45] 그는 페이스북이 곧 더 나은 모바일 경험을 전달할 것이라고 약속하였다. 페이스북이 모바일 버전에 HTML5를 사용한 결과, 데이터를 느리게 가져오는 불안정한 애플리케이션이 만들어졌다.^[15]

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

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

2. 2. 초기 개발 및 공개

2012년, 마크 주커버그는 "회사가 저지른 가장 큰 실수는 네이티브가 아닌 HTML에 너무 많은 투자를 한 것이다"라고 언급했다.^[45] 그는 페이스북이 곧 더 나은 모바일 경험을 제공할 것이라고 약속했다.

페이스북 안에서 조던 워크는 백그라운드 자바스크립트 스레드로부터 iOS의 UI 요소를 생성하는 방법을 발견했다.^[46] 이 기술을 사용해 네이티브 앱을 만들기 위한 내부 해커톤이 조직되었다.^[47]

수개월 간의 개발 끝에 2015년 페이스북은 리액트 자바스크립트 구성을 위한 최초 버전을 출시하였다. 기술 토론에서^[48] 크리스토퍼 셰도는 페이스북이 이미 그룹 앱과 광고 관리자 앱 운영 환경에 리액트 네이티브를 사용하고 있다고 설명했다.^[49]

3. 동작 원리

리액트 네이티브는 리액트와 유사하게 작동하지만, 가상 DOM을 통해 DOM을 직접 조작하지 않는다. 대신, 직렬화, 비동기, 일괄 처리 브리지를 통해 네이티브 플랫폼과 통신하는 백그라운드 프로세스에서 자바스크립트 코드를 실행한다.^[50]^[51]^[52]

리액트 컴포넌트는 리액트의 선언형 UI 패러다임과 자바스크립트를 통해 기존 네이티브 코드를 감싸고 네이티브 API와 통신한다. 이를 통해 새로운 개발자 팀이 네이티브 앱 개발을 할 수 있게 하며, 기존 네이티브 팀들은 훨씬 더 빠르게 작업할 수 있다.^[53]

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

4. Hello World 예시

javascript

import React from 'react';

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

const HelloWorldApp = () => Hello world!;

export default HelloWorldApp;

// Create React Native App을 사용하는 경우 이 줄은 건너뛴다.

AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

```

위 코드는 간단한 "Hello world!" 텍스트를 표시하는 앱을 생성한다.

다음 코드를 사용해 다른 컴포넌트에 `HelloWorldApp`를 임포트하여 사용할 수도 있다.

```javascript

import HelloWorldApp from './HelloWorldApp';

참조

_[1] 웹사이트 React Native: Bringing modern web techniques to mobile https://code.fb.com/[...] 2015-03-26
_[2] 웹사이트 Chapter 1. What Is React Native? https://www.oreilly.[...] O’Reilly Media, Inc. 2020-07-30
_[3] 웹사이트 Android Release for React Native https://code.faceboo[...] 2015-09-14
_[4] 웹사이트 Mozilla's radical open-source move helped rewrite rules of tech https://www.cnet.com[...] 2022-05-11
_[5] 웹사이트 Building For TV Devices · React Native https://reactnative.[...] 2020-10-02
_[6] 웹사이트 React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and React https://microsoft.gi[...] 2020-10-02
_[7] 웹사이트 React Native for Apple TV https://dlowder-sale[...] 2020-10-02
_[8] 웹사이트 React Native for Web https://github.com/n[...] 2019-11-06
_[9] 웹사이트 React Native on the Universal Windows Platform https://blogs.window[...] 2016-11-06
_[10] 웹사이트 Out-of-Tree Platforms https://reactnative.[...] Facebook, Inc. 2020-07-30
_[11] 웹사이트 React Native Showcase https://reactnative.[...] 2023-04-04
_[12] 웹사이트 React Native in H2 2021 · React Native https://reactnative.[...] 2021-08-20
_[13] 웹사이트 Zuckerberg's Biggest Mistake? 'Betting on HTML5' https://mashable.com[...] Mashable 2018-04-07
_[14] interview Fireside Chat With Facebook Founder and CEO Mark Zuckerberg https://techcrunch.c[...] 2021-08-16
_[15] 웹사이트 Zuckerberg's Biggest Mistake? 'Betting on HTML5' https://mashable.com[...] 2020-10-29
_[16] 웹사이트 A short Story about React Native https://jobninja.com[...] 2018-01-16
_[17] 웹사이트 A Deep Dive into React Native https://www.youtube.[...] 2018-01-16
_[18] 웹사이트 React Native: Bringing modern web techniques to mobile https://code.faceboo[...] 2015-03-26
_[19] 웹사이트 Bridging in React Native https://tadeuzagallo[...] 2015-10-14
_[20] 웹사이트 How we build React Native app: 7 things which save your development time. Part 2 https://blog.uptech.[...] 2019-11-06
_[21] 웹사이트 How to Create a React Native Document Scanner https://sdk.docutain[...] INFOSOFT 2024-09-06
_[22] 웹사이트 Using TypeScript https://reactnative.[...] Meta Platforms, Inc. 2023-07-14
_[23] 웹사이트 React Native Style https://reactnative.[...] 2021-02-24
_[24] 웹사이트 React Native: Bringing modern web techniques to mobile https://code.fb.com/[...] 2019-11-06
_[25] 웹사이트 React Native · A framework for building native apps using React https://facebook.git[...] 2019-11-06
_[26] 웹사이트 React Native for Android: How we built the first cross-platform React Native app - Facebook Engineering https://engineering.[...] 2019-11-06
_[27] 웹사이트 React Native for Web https://github.com/n[...] 2019-11-06
_[28] 웹사이트 react-native-macos https://github.com/m[...] 2023-09-11
_[29] 웹사이트 React Native on the Universal Windows Platform https://blogs.window[...] 2016-11-06
_[30] 간행물 React Native Desktop · https://github.com/s[...] Status 2023-02-26
_[31] 웹사이트 Zuckerberg's Biggest Mistake? 'Betting on HTML5' https://mashable.com[...] Mashable 2018-04-07
_[32] 웹사이트 A short Story about React Native https://jobninja.com[...] 2018-01-16
_[33] 웹사이트 A Deep Dive into React Native https://www.youtube.[...] 2018-01-16
_[34] 웹사이트 React Native: Bringing modern web techniques to mobile - Facebook Engineering https://engineering.[...] 2019-11-06
_[35] 웹사이트 Bridging in React Native https://tadeuzagallo[...] 2015-10-14
_[36] 웹사이트 React Native vs Flutter: Which Cross-Platform Framework is Better? https://parsed.io/re[...] 2019-11-06
_[37] 웹사이트 How we build React Native app: 7 things which save your development time. Part 2 https://blog.uptech.[...] 2019-11-06
_[38] 웹인용 React Native: Bringing modern web techniques to mobile https://code.fb.com/[...]
_[39] 웹인용 Chapter 1. What Is React Native? https://www.oreilly.[...] O’Reilly Media, Inc. 2020-07-30
_[40] 웹인용 Android Release for React Native https://code.faceboo[...]
_[41] 웹인용 React Native for Web https://github.com/n[...] 2019-11-06
_[42] 웹인용 React Native on the Universal Windows Platform https://blogs.window[...] 2016-04-13
_[43] 웹인용 Out-of-Tree Platforms https://reactnative.[...] Facebook, Inc. 2020-07-30
_[44] 문서 https://github.com/s[...]
_[45] 웹인용 Zuckerberg's Biggest Mistake? 'Betting on HTML5' https://mashable.com[...] Mashable 2018-04-07
_[46] 웹인용 React (JavaScript library) https://en.wikipedia[...]
_[47] 웹인용 A short Story about React Native https://jobninja.com[...] 2018-01-16
_[48] 웹인용 A Deep Dive into React Native https://www.youtube.[...] 2018-01-16
_[49] 웹인용 React Native: Bringing modern web techniques to mobile https://code.faceboo[...]
_[50] 웹인용 Bridging in React Native https://tadeuzagallo[...] 2015-10-14
_[51] 웹인용 React Native vs Flutter: Which Cross-Platform Framework is Better? https://parsed.io/re[...] 2019-11-06
_[52] 웹인용 How we build React Native app: 7 things which save your development time. Part 2 https://blog.uptech.[...] 2019-11-06
_[53] 웹인용 How React Native can Empower App Development Process? https://www.xongolab[...] 2019-02-15
_[54] 웹인용 reactspring.io – React Native Security http://reactspring.i[...] 2020-10-05

본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com