React Native의 작동 원리

반응형

React Native의 작동 원리

1. JSX로 짜여진 소스를 리액트 네이티브 프레임워크에 올린다.
2. 바벨을 통해 코드가 JS bndle 돼서 JS thread에서 JSX코드가 실행된다.
3. 각 플랫폼의 앱 실행은 native thread에 의해 실행되는데, JS thread와 Native thread가 직접적으로 커뮤니케이션을 할 수 없어서 중간에 react native에서 제공되는 bridge에 의해 상호작용한다.
4. bridge는 리액트 네이티브에 있는 코드가 네이티브 코드로 변환을 처리하는 기능이다.

바벨(Babel) 이란?

최신 자바스크립트 문법을 모든 브라우저가 이해하지 못하기 때문에,

Babel을 통해 브라우저가 이해할 수 있는 문법으로 변환해주는 컴파일러이다.

초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 일만 했지만, 현재는 리액트의 JSX문법도 처리해준다.

트렌스파일러는 소스를 입력 받으면 다른 소스로 변환하는 컴파일러의 일종이기 때문에 컴파일러라고 부르는 것은 문제가 되지 않는다.

​

바벨 진행 단계

1. 파싱(Parsing): 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계

2. 변환(Transforming): 추상 구문 트리를 변경

3. 출력(Printing): 변경된 결과물을 출력

 

JS Bundle 이란?
Bundle은 “어떤 것들을 묶는다”라는 뜻으로,
기능별로 모듈화 했던 자바스크립트 파일들을 묶어준다는 뜻이다.

Bridge 이란?
리액트 네이티브가 네이티브 코드로 변환되는 과정에는 Bridge가 필요하다.
리액트 네이티브에 자바스크립트 코드를 이용해서 네이티브 계층과 통신할 수 있도록 연결해주는 역할의 bridge가 있다.

JavaScript Thread 이란?
리액트 코드가 실행되는 장소(보통 리액트 코드로 구성되어있다.)

Native Thread 이란?
네이티브 계층 코드
Main Thread: UI를 담당하는 메인 스레드
Shadow Thread: 백그라운드 스레드로 레이아웃을 계산하는데 사용된다.
Native Module: 각 모듈의 자체 스레드

반응형