React-Native #0 | React-Native 개요, Expo

HyeonWooGa·2022년 10월 3일
0

React-Native

목록 보기
1/6

React-Native (RN)

개요

  • 모든 구조(인프라 시설) 와 JavaScript 코드의 조합 + 마크업/스타일링
  • 아름다운 번역가
    • 인터페이스, 개발자와 운영 체제(IOS, 안드로이드) 사이에 있습니다.

컴파일링

  • 개발자가 RN 코드를 만들면 브릿지를 통해 각각 IOS, JAVA 안드로이드 코드로 번역됩니다.
  • RN 에서는 브라우저가 없고 브릿지 가 있습니다.

구조

  • Native : 이벤트 감지, 화면 담당
  • Bridge : JSON 으로 Native 와 JavaScript 간 통신, 번역 담담
  • JavaScript : 이벤트 컨트롤, 코드 실행, 운영체제를 상대로 통신하기 위한 레이어일뿐입니다.

앱 구동 과정

Native -> Bridge -> JavaScript

  1. 네이티브에서 이벤트 감지
  2. 네이티브에서 이벤트를 수집하고 공지
  3. 브릿지를 통해 JSON 으로 코드를 변환하고 자바스크립트에 넘김
  4. 자바스크립트에서 우리의 이벤트를 리스닝

JavaScript -> Bridge -> Native

  1. 자바스크립트에서 이벤트에 반응하여 코드를 실행
  2. 브릿지를 통해 각각 IOS 와 JAVA 안드로이드 언어로 변환하고 네이티브에 넘김
  3. 네이티브에서 명령을 실행
  4. 네이티브 화면 업데이트

Expo

개요

  • RN 실제 앱 개발에서 개발자가 코드에만 집중하도록 인프라는 제공해주는 라이브러리
    • CRA 나 CNA 같이 템플릿을 제공해줍니다.
  • 시뮬레이터를 설정하거나 모바일앱(Expo Go)을 통해 코딩과 동시에 동작을 확인할 수 있습니다.

마치며

  • 웹 개발만 하다가 RN 을 통해서 웹개발을 새로 경험해보고 있는데 우선 너무 재미있습니다 😍
  • RN 덕분에 React 하나로 웹과 앱을 97% 동일한 문법과 로직으로 구현할 수 있는 것이 정말 큰 축복인 것 같습니다 ✨
  • 위의 내용에서 틀린 부분이 있을 수 있습니다. 만약 틀린 부분이 있다면 댓글 부탁드립니다! 감사합니다! 👍

profile
Aim for the TOP, Developer

0개의 댓글