nomadcorders_왕초보를 위한 React Native 101

React Native는 단 하나의 구조가 아니라 여러가지 인프라와 그 인프라를 연결지어 주는 bridge역할을 하나로 묶은 시스템이다. 

안드로이드라면 java와 sdk(software developement kit) ios라면 xcode와 시뮬레이터를 다운 받아서 인프라를 컴파일하여 앱으로 만들어야 한다. 

위의 모든 과정을 하기 위해선 설치부터 어려움이 있는데 이번 강좌에서는 자바스크립트를 제외한 모든 인프라가 컴파일 되어 있는 앱(배포용 x, 테스트용 어플)을 다운받고, 자바스크립트 코드만을 해당 앱으로 보면서 어떻게 사용되는지 테스트 할 것이다.

윈도우 사용자라면 커맨드 창을 열어서 아래의 명령어로 패키지를 다운로드 받아준다. 
이때 node.js 버전은 14 이상이어야 한다.

npm install --global expo-cli

마지막으로 앱스토어에 가서 안드로이드라면 Expo, ios라면 Expo go를  다운로드 받은 후에 계정을 만들어 로그인 하도록 하자.

 

React Native의 작동 원리 

• React Native는 인터페이스로 개발자와 운영체제 사이에 존재하는 번역기 개념이다.
• 개발자가 React Native코드를 만들어서 보내면 IOS 또는 Java코드로 번역되어 전달된다.
• React Native는 버튼을 만들어 달라고 같은 명령을 하면 iOS나 안드로이드에서 자신의 언어로 버튼을 만든다. 
• React Native는 브라우저가 없기 때문이다.

 

1. 리스너가 대기하는 이벤트가 감지되면 React Native에 쌓인다.
2. 운영체제가 해당 이벤트에 대한 데이터를 수집한다. (Ex. 화면의 어느 부분에서 이벤트가 발생했는가?)
3. 2의 정보를 가지고 React Native는 JSON 메시지를 작성해서 자바스크립트에 전달한다. 
4. 메시지가 자바스크립트에 도달하면 React Native는 Native 운영체제에 변경해야하는 부분을 전달한다.
5. 핵심. 메시지를 받고 보낸다!
   1. 그래서 브라우저가 없음
   2. 자바스크립트는 운영체제를 상대로 메시지를 주고받기 위해 사용하는 레이어일 뿐이다.

 

Create a New App

1. 특정 디렉토리에 가서 "expo init App이름" 명령어를 통해 프로젝트를 생성해준다. 
2. "cd App이름"을 통해 생성해준 프로젝트에 들어가서 expo login 명령어로 컴퓨터에서도 로그인을 진행한다. 
3. "npm run start or npm start" 명령어를 통해 컴퓨터에서 전송받은 코드를 핸드폰에서 확인할 수 있다.
   1. 이때 컴퓨터와 핸드폰은 동일한 와이파이, 즉 동일한 인터넷에 연결되어 있어야 한다.

 

#2.1
The Rules of Native

1. 웹사이트가 아니다. 그래서 html 태그를 사용할 수 없다.
따라서 div 대신 View라는 컨테이너를 사용한다. (사용하기 위해서는 반드시 import 해야 한다.)

2. 모든 text는 <Text>라는 컴포넌트에 들어가 있어야 한다. 

3. html태그 처럼 style을 사용할 수 있지만 일부 기능은 사용할 수 없다.
stylesheet.create({}) -> 단순한 객체일 뿐이지만, 기능명을 자동완성 해주는 기능을 지원한다.

4. 일부 컴포넌트는 모두 화면에 표현되지 않고, 운영체제와 소통을 위해 사용되는 것도 있다. (Status bar)

#2.2
React Native Packages

안드로이드와 IOS를 위한 운영체제별로 많은 기능을 컴포넌트로 제공했었지만, 유지보수의 어려움으로 인해 지원 기능을 축소 시키고 최대한 빠르게 Native앱을 만들 수 있도록 수정했다. 

0. expo에서 제공하는 SDK 목록
https://docs.expo.dev/versions/latest/

1. React Native에서 제공하는 Components 목록
https://reactnative.dev/docs/components-and-apis

2. React Native에서 제공하는 APIs 목록
https://reactnative.dev/docs/accessibilityinfo

3. AsyncStorage(동기 저장소는 사라짐).아래 경로의 커뮤니티 패키지를 사용해야 한다.
아래의 경로에는 third-party package와 api를 제공한다. 과거와는 달리 지원하지 않는 기능을 너희가 직접 구현해서 사용하라고 패키지로 제공하는 것이다.!
https://reactnative.directory/?search=storage

이렇게 자체적으로 API를 만들기 시작했고, 이러한 것을 Expo SDK라고 한다.

같은 컴포넌트 이름이더라도 expo에서 제공하는지, react native에서 제공하는지에 따라 사용할 수 있는 옵션이 다르고 기능도 다를 수 있다.

 

 

 

References 

#1 : https://nomadcoders.co/react-native-for-beginners/lectures/3116  
#2 : https://nomadcoders.co/react-native-for-beginners/lectures/3115