React-Native의 작동 원리에 대해.

일반적인 리액트의 구조

• 컴포넌트를 이용해 HTML 생성 → ReactJS를 이용해 JavaScript화 → 브라우저를 이용해 실행

React-Native의 구조

• 운영체제와 개발자 사이의 ‘인터페이스’. 우리가 코드를 만들면 IOS나 안드로이드 자체의 코드로 ‘번역’되도록 그들에게 요청하는 것. 단지 메세지를 주고받는 레이어일 뿐이다.

차이점:

• 리액트에는 Browser가 존재하지만, RN에는 대신 ‘Bridge’가 존재한다.

• 우리는 ‘JavaScript’ 부분만 코드를 작성해주면 된다.
• 예를 들어 우리가 버튼을 누를 때, 운영체제가 모든 화면 터치의 시간과 위치를 감지하고(native 부분), RN이 그 정보로 JSON 메세지를 생성하고(Bridge 부분), JS(우리가 작성한 코드)가 해당 이벤트를 받는다. 이후 어떠한 반응을 보일 지를 native에게 메세지를 보내준다.

• 전체적인 앱의 구조.
• 우리는 JavaScript와 Styling 부분만 만들어서 전송해주는 것. 나머지 InfraStructure은 Java(IOS에서는 Swift) 내부에 존재한다.
• 화살표 부분 = Bridge.