React Native란? React Native와 Expo로 앱 만들어보기 1탄

앱 개발을 한 번 해보고 싶다는 생각이 들어서 찾아보니 React Native로도 앱 개발을 할 수 있다는 것을 알고 이게 무엇인지 알아보았다.

일반적으로 앱 개발을 하기 위해서는 안드로이드 또는  IOS를 사용해야 한다. 이 때 시장에서는 이 두 가지 개발을 따로 개발하기에 시간 소모도 있고 빠르게 동시에 개발 할 수 없을까? 해서 나온 것이 React Native 라는 하이브리드 앱이다.

React Native은 어떤 흐름을 가지고 동작할까?

React Native 작동 구조

어떤 이벤트가 발생하면 ios와 안드로이드는 bride를 통해서 JS에게 메시지 전달을 한다. 즉 react native가 그 정보를 가지고 JSON 메시지 생성한다. JS가 그 메시지를 다시 받고 그에 맞게 코드를 실행하고 나서 bridge를 통해 다시 native에 메시지를 보낸다.

React native은 ios와 안드로이드에게 메시지를 전달하는데, 예를들어서 이 버튼 좀 보이게 해줘 메시지 보내면 두 운영체제가 그에 맞게 버튼이 보이게 해준다. IOS와 안드로이드 사이에서 bridge 역할 한다. 좀 더 보기 쉬운 이벤트 발생 처리 흐름 구조에 대한 그림을 하나 더 보자면

React Native 작동 구조2

위의 그림과 같이 저 Bridge는 JSON 데이터를 보내고 받고 할것이다. 어떤 버튼을 누름으로써 생기는 data 정보를 Bridge가 받아서 JS가 처리할 수 있게 전달하는 느낌이다. 그리고 Native는 IOS와 안드로이드에게 업데이트 된 UI 요청을 할 것이다.

 

나는 To-do list 정도 수준이 되는 React Native 앱을 만들고자 했고 하지만 앱을 만드려면 시뮬레이터 설치가 필수였다. 나는 맥을 사용자라 xcode 설치를 해야했다.

App의 구조

App의 구조

React Native으로 앱을 만들때 실제로 내가 작성하는 코드는 보라색으로 칠해진 저부분만 내가 개발하면 된다. 하지만, 그 외에 있는 이 모든 인프라가 필요하기 때문에 이 인프라를 구성하고 있는 Java 또는 Xcode가 꼭 필요하다. 하지만, expo라고 이 모든 인프라를 가지고 있고 앱스토어 또는 구글플레이에 이미 있는 앱이 이 모든 구성을 갖추고 있다. 이 앱을 통해서 React Native으로 앱을 만들어 보았다.

결과물은 다음 글에서 공개,,!!