본문 바로가기

728x90

🚀 Development/React Native12

React Native 기본 코드(Hellow World 실행 화면 출력하기) React Native 기본 코드(Hellow World 실행 화면 출력하기) // index.js import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); index.js에서 AppRegistry. registerComponent 앱네임에 앱 파일을 등록해서 처음 실행되는 진입점을 설정한다. App.js파일에 진입하게 되면 export한 App 컴포넌트가 실행된다. // App.js import React from 'react'; import { StyleSheet, Tex.. 2023. 6. 15.

React Native의 작동 원리 React Native의 작동 원리 JSX로 짜여진 소스를 리액트 네이티브 프레임워크에 올린다. 바벨을 통해 코드가 JS bndle 돼서 JS thread에서 JSX코드가 실행된다. 각 플랫폼의 앱 실행은 native thread에 의해 실행되는데, JS thread와 Native thread가 직접적으로 커뮤니케이션을 할 수 없어서 중간에 react native에서 제공되는 bridge에 의해 상호작용한다. bridge는 리액트 네이티브에 있는 코드가 네이티브 코드로 변환을 처리하는 기능이다. 바벨(Babel) 이란? 최신 자바스크립트 문법을 모든 브라우저가 이해하지 못하기 때문에, Babel을 통해 브라우저가 이해할 수 있는 문법으로 변환해주는 컴파일러이다. 초기의 바벨은 ES6 코드를 ES5 코드로.. 2023. 6. 15.

React Native의 특징 및 장점 / 활용 React Native의 특징 및 장점 1. 자바스크립트에서 XML을 추가한 확장형 문법인 JSX(Javascript XML)를 사용 React native는 JSX를 사용하지 않고 순수한 자바스크립트 코드를 사용할 수 있지만, React를 사용하는 중요한 이유 중 하나가 ‘직관적’이라서 JSX를 사용하면 컴포넌트를 구성하는데 쉽게 적응할 수 있다. * 직관적->리액트를 사용하면서 코드를 보고 화면에 어떤 UI가 그려질지 충분히 예상 가능하다는 것 2. 소스코드 재사용과 생산성. 리액트는 Component 기반으로 기능을 분리하기 때문에 재사용할 수 있는 구조이다. 기존에 리액트로 개발된 사이트에서 Component 코드를 그대로 재사용하고 작성된 코드 하나로 iOS, Android를 동시에 개발하기 때.. 2023. 6. 15.

React Native란? React Native와 React 차이, 리액트 탄생 배경 리액트 탄생배경 2011, 페이스북 개시 페이스북이 급성장하면서 팀의 규모가 커졌고, 앱의 기능이 다양해졌다. 사람이 많아지면 기능 개발 속도가 빨라질 것으로 예상하지만, 실제로는 각자의 개발 스타일이 다르고 기능 하나를 추가할 때에도 다른 곳에 영향이 가는지 체크해야한다. 이 과정을 개발자는 Human-Error 친화적이라고 이야기한다. 페이스북 개발자들은 이 문제를 기술적으로 해결해야한다고 여겼다. 2012, 인스타그램 배치 2012년 페이스북은 인스타그램을 인수했다. React는 페이스북 Ads를 위한 프로토타입으로 만들고 있었는데, 인스타그램 개발자들이 React를 사용하고 싶어하는 바람에 오픈소스, 모든 개발자가 사용할 수 있는 라이브러리로 탄생할 수 있었다. 2013, 오픈소스 세상에 공개 R.. 2023. 6. 15.

이전 1 2 3 다음

728x90

티스토리툴바