구글링하면 많이 나오는 내용이지만 정리할 목적과 나중에 빠르게 다시 볼 수 있도록 하기 위한 목적으로 기록한다.
React Native는 4가지 스레드를 갖는다.
그러나 가장 핵심적인 부분들로 구분하면 다음과 같이 구분할 수 있다.
1. UI 스레드 (메인 스레드)
2. JS 스레드
3. Native Bridge
UI 스레드
UI 스레드는 메인 스레드라고 하기도 한다.
이름에서 알 수 있듯 UI를 그리는 스레드로 안드로이드, IOS의 UI를 그리는 역할을 맡는다.
또한 UI 이벤트가 발생하는 내역을 JS 스레드로 넘기는 역할도 수행한다.
JS 스레드
마찬가지로 이름에서 알 수 있듯 JS 코드를 처리하는 스레드이다.
위에서 적었듯, UI 스레드에서 넘어온 이벤트를 바탕으로 JS 코드를 실행하거나 API 호출 등 각종 비즈니스 로직 등을 처리한다.
네이티브 뷰 업데이트에 관한 내용은 일괄적으로 처리되어 이벤트 루프의 끝에서 UI 스레드로 전달된다.
Native Bridge
UI 스레드와 JS 스레드가 통신할 수 있도록 하는 중개자 역할을 수행한다.
Native Bridge에서 병목이 발생하면 React Native 앱의 성능 저하가 발생한다.
실행 과정
앱을 처음 시작하면 UI 스레드가 실행된다.
실행된 UI 스레드는 JS 스레드를 실행시켜 자바스크립트 번들을 로딩한다.
자바스크립트 코드가 모두 로드되면 UI 스레드는 그 코드들을 모두 JS 스레드로 보낸다. 그래야 무거운 JS 코드가 돌아가더라도 UI 스레드는 Load가 없어 문제가 생기지 않기 때문이다. (아마 내부적인 로직에 이상이 생기거나 속도가 느려지는 것은 에러를 던져서 사용자에게 알리거나 사용자가 좀 기다리게 하면 되지만 UI를 그리는 부분이 문제가 생기면 사용자에게 어떠한 대처를 하기 어렵기 때문에 그런 것이 아닐까 싶다.)
이제 JS 스레드가 실행되어 자바스크립트 번들을 로드하면 리액트는 가상 DOM을 생성하고 Diffing 알고리즘으로 변경 사항을 탐색한다.
탐색 완료된 변경 사항은 Native Bridge를 통해 Shadow 스레드로 전달된다.
Shadow 스레드는 전달 받은 변경 사항 데이터로 레이아웃을 계산하고 계산 완료된 레이아웃의 파라미터나 객체를 UI 스레드로 보낸다.
UI 스레드가 전달 받은 레이아웃 데이터를 바탕으로 UI를 렌더링한다.
사용자가 화면에서 UI 이벤트를 발생시키면 이벤트 정보들이 Native Bridge를 경유하여 JS 스레드로 넘겨진다.
UI 이벤트 정보를 바탕으로 JS스레드에서 비즈니스 로직들이 실행되고 리액트는 다시 가상 DOM을 생성하여 변경 사항을 탐색한다.
4번에서 9번까지의 과정이 앱이 종료될 때까지 계속 반복된다.
참고 1) Shadow 스레드
위에서 언급된 Shadow 스레드는 Native Bridge를 통해 넘어온 가상 DOM의 변경 사항을 바탕으로 레이아웃을 계산하고, 계산한 레이아웃 파라미터나 객체를 UI 스레드로 전달한다.
화면에 렌더링하는 것은 UI 스레드만 가능하므로 Shadow 스레드가 계산한 레이아웃 데이터를 UI 스레드에 전달하면 UI 스레드가 해당 레이아웃을 화면에 렌더링한다.
참고 2) 데드 라인
IOS는 초당 60프레임, 안드로이드는 초당 90~120프레임을 표시한다. 따라서 IOS, 안드로이드 각각 16.67ms (1/60초), 8.33 ~ 11.11ms(1/120~1/90초) 안에 JS 스레드에서 이벤트 루프를 완료한 후 UI 스레드로 전달하고 UI를 그려서 한 프레임을 렌더링해야 프레임 끊김 없이 화면을 볼 수 있다. 실제로 프로젝트를 개발한 후, 특히 안드로이드에서 프레임이 조금 끊기는 것을 느꼈는데 아마 코드를 비효율적으로 작성하는 등 최적화된 상태가 아니어서 그러한 현상이 발생했던 것 같다.
하지만 아직은 이 수치를 봐도 어떻게 코드를 짜야 데드 라인 내로 렌더링이 완료되도록 할 수 있을지 감이 잘 오지 않는다.
ScrollView와 navigatorIOS는 온전히 UI 스레드에서 실행되기 때문에 Native Bridge에서 병목 현상을 발생시키지 않는다.
참고 3) Diffing 알고리즘
리액트는 가상 DOM을 활용해 변경된 부분을 비교/탐색하고 변경된 곳만 부분적으로 리렌더링하는 방식을 사용한다.
좀 더 구체적으로 설명하면 컴포넌트 내에서 상태값이 변경되면 해당 컴포넌트를 dirty하다고 표시하고 batch에 추가한다.
그 후 가상 DOM의 요소와 실제 DOM의 요소를 비교 순회하면서 dirty 체크가 되어있는 컴포넌트들을 처리한다. 처리하는 과정에서 속성값만 변한 경우에는 속성값만 업데이트하고 해당 컴포넌트의 태그나 컴포넌트 자체가 변경된 경우라면 해당 노드를 포함한 하위 모든 노드를 제거하고 새로운 가상 DOM으로 대체한다.
아무튼 이때 가상 DOM에서 변경된 부분을 탐색하는 알고리즘이 바로 Diffing 알고리즘이다.
간단하게 설명하면 트리 구조 상에서 같은 레벨끼리만 비교하여 변경된 부분을 탐색하는 방식이다.
으로 프로젝트를 생성하니 typescript가 적용된 RN 0.66.4 버전 프로젝트가 잘 생성되었다.
Git
새로운 프로젝트를 위해 새 레포지토리를 생성했다.
로컬에서 레포지토리에 코드를 push하고 깃헙에서 Read.me 파일을 생성하니 다시 로컬에서 push를 하기 전에 pull을 해야 했다.
그런데
힌트: You have divergent branches and need to specify how to reconcile them.
힌트: You can do so by running one of the following commands sometime before
힌트: your next pull:
힌트:
힌트: git config pull.rebase false # merge
힌트: git config pull.rebase true # rebase
힌트: git config pull.ff only # fast-forward only
힌트:
힌트: You can replace "git config" with "git config --global" to set a default
힌트: preference for all repositories. You can also pass --rebase, --no-rebase,
힌트: or --ff-only on the command line to override the configured default per
힌트: invocation.
fatal: Need to specify how to reconcile divergent branches.
이러한 에러가 발생하며 pull 이 안 됐다.
찾아보니 git pull 전략을 설정해야 한다고 한다.
그래서 위 메시지에서 제시된 방법 중 세번째인 fast forward (ff) 방식을 설정했다.
git config pull.ff only
(참고로 only 키워드는 해당 레포지토리에만 적용하는 것이고 --global을 넣으면 전역적으로 설정할 수 있다.)
그런데
fatal: 정방향이 불가능하므로, 중지합니다.
이런 에러가 발생했다.
fast foraward가 안 되는 것이었다.
그래서
git pull --rebase
로 rebase를 진행하고
git config --unset pull.ff
git config pull.rebase true
로 fast forward 설정한 것을 해제한 후 rebase를 디폴트로 설정했다.
merge는 merge할 때마다 추가 커밋이 생겨서 불-편해 rebase로 설정했다.
React Native - React Navigation
1. SafeAreaView
React Navigation을 사용하는 RN 프로젝트를 생성하고 route 세팅을 하고 있었다.
그런데 IOS에서 SafeArea가 잘 적용되지 않았다.
찾아보니 React Navigation를 사용할 때는 React Native에서 기본 제공하는 SafeAreaView가 아닌 react-native-safe-area-context의 SafeAreaProvider와 SafeAreaView를 사용해야 한다고 한다.
이전에는 이러한 문제를 경험해본 적이 없는데 왜 이번에만 이런지 잘 모르겠다.
적용 방법은 다음과 같다.
import React from 'react';
import { Provider } from 'react-redux';
import store from './src/store';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './src/utils/RootNavigation';
import AppMain from './src/navigations/AppMain';
const App = () => {
return (
<Provider store={store}>
<SafeAreaProvider>
<NavigationContainer ref={navigationRef}>
<AppMain />
</NavigationContainer>
</SafeAreaProvider>
</Provider>
);
};
export default App;
다른 부분은 무시하고 SafeAreaProvider만 확인하면 된다. NavigationContainer보다 상위에서 감싸주기만 하면 된다.
이렇게 감싸주고 일반적으로 SafeAreaView를 사용하듯 하위 컴포넌트에서 사용하면 된다. (react-native-safe-area-context의 것을 사용해야 한다.)
