hyeonwooga.log
로그인
hyeonwooga.log
로그인
React-Native #0 | React-Native 개요, Expo
HyeonWooGa
·
2022년 10월 3일
팔로우
0
Expo
react native
0
React-Native
목록 보기
1/6
React-Native (RN)
개요
모든 구조(인프라 시설) 와 JavaScript 코드의 조합 + 마크업/스타일링
아름다운 번역가
인터페이스, 개발자와 운영 체제(IOS, 안드로이드) 사이에 있습니다.
컴파일링
개발자가 RN 코드를 만들면 브릿지를 통해 각각 IOS, JAVA 안드로이드 코드로 번역됩니다.
RN 에서는 브라우저가 없고
브릿지
가 있습니다.
구조
Native : 이벤트 감지, 화면 담당
Bridge : JSON 으로 Native 와 JavaScript 간 통신, 번역 담담
JavaScript : 이벤트 컨트롤, 코드 실행, 운영체제를 상대로 통신하기 위한 레이어일뿐입니다.
앱 구동 과정
Native -> Bridge -> JavaScript
네이티브에서 이벤트 감지
네이티브에서 이벤트를 수집하고 공지
브릿지를 통해 JSON 으로 코드를 변환하고 자바스크립트에 넘김
자바스크립트에서 우리의 이벤트를 리스닝
JavaScript -> Bridge -> Native
자바스크립트에서 이벤트에 반응하여 코드를 실행
브릿지를 통해 각각 IOS 와 JAVA 안드로이드 언어로 변환하고 네이티브에 넘김
네이티브에서 명령을 실행
네이티브 화면 업데이트
Expo
개요
RN 실제 앱 개발에서 개발자가 코드에만 집중하도록 인프라는 제공해주는 라이브러리
CRA 나 CNA 같이 템플릿을 제공해줍니다.
시뮬레이터를 설정하거나 모바일앱(Expo Go)을 통해 코딩과 동시에 동작을 확인할 수 있습니다.
마치며
웹 개발만 하다가 RN 을 통해서 웹개발을 새로 경험해보고 있는데 우선 너무 재미있습니다 😍
RN 덕분에 React 하나로 웹과 앱을 97% 동일한 문법과 로직으로 구현할 수 있는 것이 정말 큰 축복인 것 같습니다 ✨
위의 내용에서 틀린 부분이 있을 수 있습니다. 만약 틀린 부분이 있다면 댓글 부탁드립니다! 감사합니다! 👍
HyeonWooGa
Aim for the TOP, Developer
팔로우
다음 포스트
React-Native #1 | 규칙
0개의 댓글
댓글 작성