[React Native] RN 공부하며 익힌 내용 정리

무지성으로, RN에 대한 기본 개념 쌓아야 하는 내용들을 작성한 내용.

 

ReactNative가 Native 코드로 변환 및 동작할 수 있는 원리

 

우선 ReactNative 코드가 Android, iOS 환경에서 돌아갈 수 있는 코드로 컴파일이 가능한 이유는, 각 네이티브의 구성 요소와 매핑이 되도록 정해져 있는 react-native에서 제공하는 CoreComponent를 사용하여 구현할 수 있기 때문이다.

<View>, <Text>등, react-native에서 정한 Core Component를 기반으로 구현하면, 빌드 타임에 이러한 요소들이 각 네이티브의 요소로 변환되면서 UI를 그릴 수 있게 된다.

그러나 이렇게 native로 변환되는 부분은 UI 담당인 마크업 부분만 컴파일되서 변환되는 것이고, 돌아가는 내부로직 코드들이 네이티브 코드로 변환되는 것은 아니다. 

 

따라서, Native Thread, JS Thread 두가지가 존재하게 되는데, 
Native Thread는 네이티브 단 UI를 그리고 동작시키는 담당하고, JS Thread는 내부 로직이 돌아가는 부분을 담당한다.

User Interaction을 받은 이벤트 호출, 혹은 반대로 내부 로직의 결과로 인한 UI 조작을 할때마다 각 스레드별 인터렉션이 필요로 하게 될건데, 이는 직접 인터렉션은 할 수 없고 Bridge를 통해서 한다.

Bridge는 웹뷰 개발을 해본 사람이라면 알듯이, 네이티브와 Javascript간 통신하기 위한 인터페이스를 말한다.
이를 알아서 구축하고 인터렉션한다.

정리하면,
- UI는 네이티브
- 내부로직은 여전히 Js
- 각 스레드는 Bridge를 통해 인터렉션함.

 

기본 컴포넌트 개념

[Core Components와 Native Components]

https://reactnative.dev/docs/intro-react-native-components

 

해당 섹션에서는 React Native가 컴포넌트로써 어떻게 동작하는지 설명한다.

[Views and mobile development]

안드로이드와 iOS를 개발할 떄 가장 기본적인 UI 블록은 view 이다.
텍스트, 이미지, 혹은 유저 인풋값에 대한 화면에 보여지는 요소를 담을 수 있는 작은 사각형 엘리먼트이다.

view는 다른 view를 포함할 수 있다.

 

[Native Components]

React Native는 Javascript를 통해서 React Component를 구성하고 views를 작성한다.

React Native가 이에 유사되는 Android와 iOS View를 생성하게 되는데, 이를 위해 Android와 iOS에서 보여지는 동일한 view로 구현하도록 제공되는 컴포넌트가 있는데, 이를 Native Components 라고 부른다.

React Native 바로 앱 구축을 할 수 있는 기본 구성 요소를 Core Components라고 한다.

또한 별도로 Android와 iOS에 최적화된 별도의 Native Component를 사용할 수도 있다.

이러한 컴포넌트 생태계를 활발하게 하기 위한 공간도 있음.

https://reactnative.directory/

 

[Core Components]

RN에서는 다양항 Core Components를 가지고 있음.

(Native Component와의 차이를 정확히 몰라서 별도로 찾아봤는데, 그냥 React Native에서 기본적으로 제공하는 기본 컴포넌트를 얘기하는 것이다.)

위 표 외에 더 많은 Core Component들은 아래 링크에서 확인할 수 있음.

https://reactnative.dev/docs/components-and-apis

 

디버그 하는 방식 - 중요

android는 Flipper를 많이 사용하는 것 같다.

iOS는 아직 조금 더 알아보아야 함.

 

기타 개념

[CPU 환경] x86_64와 ARM 64의 차이

과거에는 Intel에서 제작한 x86 그리고, AMD에서 x86을 호환하여 더 확장시킨 x86_64를 기반으로 PC 환경이 갖추어져 있었기 때문에 개발자들이 큰 문제를 겪지 않았지만, 최근 ARM 기반의 CPU가 큰 성장세를 띄고 PC 시장에서 많이 사용하게 되면서 개발자들이 이러한 CPU 환경에 대해 신경을 쓰기 시작하게 되었다.

원래 ARM은 저사양 디바이스, 저사양 기기에서 사용되던 단순한 아키텍처를 가진 방식인 만큼 저사양, 저전력 기반으로 사용되던 CPU 였으나, 시간이 흐르며 ARM의 성능이 x86 못지 않게 빨라지면서도, 저사양, 저전력 스펙을 그대로 유지되며 발전해오면서 x86이 꽤차고 있던 자리를 압박하기 시작했고, AWS의 Cloud Machine Craviton 출시와 Apple의 M1처럼 ARM을 이용한 제품이 하나씩 나오기 시작하며, 결국 PC 시장에서까지 ARM이 급속도로 퍼지기 시작했다.

그리고 우리 개발자 환경에서까지 ARM 혹은 x86이 섞이기 시작하며, 어떤 시스템을 돌리냐에 따라 CPU의 환경까지 고려해야될 시키가 오게 되었다.

[로그인 인증 처리]

Encrypt Storage 모듈을 이용해서 처리할 수 있음.

 

[Navigation]

react Navigation 모듈을 이용하면 편하다.
항상 모듈을 이용할 때마다 iOS를 위해 아래 명령어를 실행 시켜줘야 한다.

npx pod-install ios

 

[접근권한]
react native pemissions 모듈을 이용하면 편하다.

 

사이드 프로젝트 진행한 내용 소개 및
ReactNative를 사용해보며 느낀 소감

 

정말 간단하게 CoreComponent만을 가지고, 뽀로로 이미지 올려서 더하기,빼기, 결과보기 하는 앱을 만들어 보았다.
(전혀 예쁘지 않다)

코드 아키텍처는 리액트와 큰 차이가 없어서 어렵지 않았지만, 의외로 어려웠던 부분은 마크업과 스타일을 적용하는 부분이었다.
우선 기본 HTML,css를 절대 쓸 수 없으며, react-native에서 정해진 Core Component를 기반으로 구현해야 하는데, 아직 어떤 것들이 있는지 어떤 프로퍼티가 어떻게 동작을 해야하는지 잘 모르던 상태여서, 내가 원하던 방식에 대한 컴포넌트와 프로퍼티를 찾기가 좀 힘들었다. 스타일 적용 방식도 css와 꽤 많이 다르다. flex나 padding 등 특정 스타일에 대해 적용하려할 때 필요로한 프로퍼티가 조금씩 다른게 많아서 꽤나 찾아보아야 했다.

그래도 작게나마 하나 만들고, 클론 코딩 하나 해보고 나니 감이 꽤나 잡혔다. 네비게이션이나 인증 처리 같은 작업들은 온전히 JS 코드로 작업하기보단, 네이티브 변환 때문이라도 왠만하면 라이브러리를 쓰는 방식으로 하는 것 같다.

 

향후 진행해보면 재밌을 내용 정리

- preact를 이용하여 번들 사이즈 줄여보기(가능할지 아직 검색도 안해봐서 우선 작성해봄)

- CI/CD 구축

- TDD 환경 세팅

- CodePush를 위해 업로드하는 파일들을, MS Cloud Storage가 아닌, 자체 Storage에서 업로드해서 사용할 수 있는 방식.