[RN] RN을 들어가기 전에!

리액트 네이티브를 공부하기 전에 react 선수지식으로는 state,useState,useEffect,props가 있다.

리액트 네이티브의 작동원리

리액트 네이티브는 js로만 이루어지지 않는다. 오히려 js는 상대적으로 RN에서 그리 중요하지 않은 부분이다. bridge들을 통해 코드가 운영체제와 통신을 할 수 있도록 하는 인프라 시설이 중요하다.그리고 RN앱을 다운 받을 때는 이런 기본 인프라 시설이 있는 앱을 다운받는 것이다.

RN앱은 쉘과 같다. js코드를 넣고 운영체제와 대화하는 것이다. 그렇기에 앱을 컴파일 시켜주는 시뮬레이터인 java와 xcode가 필요한것이다.
모든 준비가 되어있을 때 안드로이드의 경우 java가 인프라 시설들을 가져와서 apk안에 넣어주고 플레이스토어에 보내지는 것이다!
그리고 사용자는 인프라 시설 + js + css를 모두 다 다운받는다.

여기 사진에 보이는 애들이 인프라 시설이다!

RN은 앱안에 있는 브라우저 ? 번역기?

RN은 번역기이다. 브라우저가 아니다! 인터페이스로 ios와 안드로이드 os 사이에 있고 RN으로 코드를 짜면 각 운영체제로 번역이 된다.

예를 들어 사용자가 화면에서 버튼을 누르는 이벤트를 기다린다고 해보자.

안드로이드같이 네이티브가 터치 event 감지(listen) => 안드로이드가 화면의 어디에서 event가 발생했는지에 대해 정보를 수집하고 "버튼이 눌렸습니다"라는 데이터가 메세지로 만들어짐 => RN은 그 정보를 가지고 json메세지 작성 => js가 그 메세지를 받음 => event를 받으면 배경 색깔이 빨강으로 바뀐다고 했을 때 js가 운영체제에 빨간색으로 변경해달라고 메세지 보냄 => 운영체제(안드로이드) 는 알았어! 하면서 인터페이스에서 변화가 일어남

**) 여기서 네이티브 == 안드로이드 == 운영체제임

즉, RN앱은 js,bridge,native 코드가 있어서 메세지를 주고 받는 것이고 우리가 js로 코드를 쓰면 운영체제와 대화할 수 있게 해준다.

expo

java나 xcode같은 시뮬레이터 없이 코드실행결과를 알려주는 앱이 있는데 바로 expo다! cmd창에서 아래 사진처럼

npm install --global expo-cli
명령어를 입력한다.

expo init 만들고 싶은 앱의 이름 
이러고 첫번째 blank선택해서 enter치면 탬플릿이 만들어진다!

이러고 expo 앱이랑 연동시킬때 연동이 안될 수도 있는데
window power shell 검색 -> 마우스 우클릭 후 관리자 권한으로 실행 클릭 ->
위 사진처럼 명령어 입력하면

로그인이 된다!