[React Native] 리액트 네이티브는 폰 안에 있는 브라우저가 아니다 - 동작

Jung Woo Sohn·2022년 3월 21일
0

ReactNative

목록 보기
3/8

우리는 실제로 앱을 만들고 있기 때문이다.

ReactJS 로 웹사이트를 만드는 경우에는
HTML을 만들고 이게 ReactJS로 가서 평범한 JavaScript가 되고 브라우저가 이를 실행시켜 준다.

리액트 네이티브는 모바일 웹 사이트가 아니다.
앱 안에 있는 브라우저 같은게 아니다. React Native 에서는 브라우저를 사용하지 않는다. React Native는 번역기에 가깝다. 우리와 운영체제 사이에 있는 인터페이스다.

그래서 React Native 코드로 작성을 하면 그것이 iOS / Android 코드로 번역이 되는 것이다.

Button 을 그리는 경우에 React Native 로 Button Component 를 만들면 이를 iOS 와 Android 에 요청을 하게 된다. 그래서 각각의 운영체제에서의 Button의 형태로 그려주게 된다. React Native 는 버튼을 만들지 않고 요청을 한다. React Native 에는 브라우저라는 것은 없고 대신에 이렇게 각각의 운영체제와 연결해주는 Bridge 가 있다.

다행인 점은, 이렇게 Bridge 을 통해 운영체제에게 요청을 하는 부분은 전혀 우리가 관여하지 않아도 된다는 것이다.

우리가 해야 하는 부분은 React Native 코드를 작성하기만 하면 되는 것이다.

React Native는 폰 안에 있는 브라우저가 아니다.

React Native 가 어떻게 동작하는지 묘사한 그림

우리가 어떤 Event 를 기다리고 있다고 하자
그건 Native 쪽에서 기록이 될 것이다. (iOS 와 Android 를 의미, 왜냐하면 얘네들이 화면을 통제하는 애들이기 때문에, 이것들을 감지하는 코드들을 가지고 있다.) 그리고 이들은 data를 수집한다. 예를 들면 화면의 어느 위치에서 Event가 발생했나? 얼마나 오래동안 눌렸나? 등 이런 event 에 대한 모든 정보들을 말이다. 그러면 React Native 는 그 정보들을 가져다가 JSON 메세지를 형성한다. 그러면 JavaScript, 우리의 코드는 Bridge 를 통해 그 메세지를 받는다. 안드로이드와 iOS가 이벤트를 듣는 애들이다.

우리의 코드가 있는 곳은 4,5 번 이다. (JavaScript 단) 우리 코드는 event를 기다리고 있다. event 가 생기면 bridge 는 우리에게 메세지를 보내주고 우리는 어떤 코드를 실행시키고 나서 다시 native에게 메세지를 준다.

버튼을 누르는 경우를 생각해보면 그 이벤트 정보가 ReactNative를 통해 우리에게 오면 버튼이 눌렀을 경우 베경색상이 바뀌는 코드 일 경우 다시 이 정보를 React Native 가 Native OS (Android, iOS) 에게 전달해 준다.

우리는 메세지를 받고, 메세지를 주고 있는 것이다. 그런 이유로 브라우저가 없다. JavaScript는 단지 메세지를 주고 받기 위한 레이어에 불과하기 때문이다. 운영체제를 상대로.

실제 앱의 내부 구조이다.

이렇기 때문에, 실제로 앱을 만드는 것이기 때문에 그 모든 사전 설치작업이 필요했던 것이다

https://nomadcoders.co/react-native-for-beginners/lectures/3115

0개의 댓글

관련 채용 정보