리액트 네이티브 애플리케이션의 최적화 :: The Ultimate RN Guide

Video

Summary

이 비디오에서는 React Native를 최적화하는 방법에 대해 설명합니다. 이 비디오는 세 가지 유형의 최적화로 나뉘며, 첫 번째로 UI 리렌더링에 주의하는 방법을 설명합니다. React는 부모 컴포넌트가 업데이트 될 때 모든 자식을 리렌더링하거나, 컴포넌트 속성이 변경되었을 때 변경되지 않았더라도 리렌더링하는 경우가 있습니다. 이러한 불필요한 업데이트를 줄이는 방법으로는 컴포넌트를 메모이제이션하고, 가능한 경우 uncontrolled 컴포넌트를 사용하며, 전역 상태를 사용하는 것이 있습니다.

Points

• 📱 React Native 최적화를 위해서는 UI re-rendering 문제를 이해해야 합니다.
• 🔄 불필요한 re-rendering은 메모리 사용량을 늘리거나 디바이스를 느리게 만들 수 있습니다. 불필요한 업데이트를 줄임으로써 개발자는 앱 성능을 향상시키고 리소스 사용을 줄일 수 있습니다.
• 💡 컴포넌트 메모이제이션(memoization), 가능한 경우 비제어 컴포넌트 사용, 전역 상태(global state)과 같은 기술은 불필요한 업데이트를 줄이는 데 도움이 될 수 있습니다.
• 💻 사용자 수와 프로젝트 리포지토리 내의 이슈/PR 등을 확인해 안정성이 있는 라이브러리를 설치해, 불필요한 업데이트를 방지하는 것이 좋습니다.
• 🚀 리액트의 빠른 리렌더링은 때때로 속성이 변경되지 않은 컴포넌트를 다시 인식하여 불필요한 메모리 사용과 장치 성능 저하를 초래합니다.
• 📚 영상을 제작한 CallStack에서 "Ultimate Guide to React Native Optimization" 출시 (123p). 이메일 등록 후 무료로 다운받을 수 있습니다.
• 📱 책은 무료지만 여러분의 시간도 소중하기 때문에, 영상을 다 보는 것 만으로도 전자책과 동일한 정보 학습이 가능합니다. https://www.callstack.com/campaigns/download-the-ultimate-guide-to-react-native-optimization

Scripts

Doing the right thing is never easy.

채소가 몸에 좋은건 누구나 알지만 눈 앞의 사탕이 더 유혹적일 수 있습니다. "올바른 일을 하는 것은 언제나 쉽지 않다"는 이유 때문입니다. 개발에서 우리는 어떤 일을 해야 할지 보통 알고 있지만 때로, "그 올바른 일"이 추가작업 시간을 요구할 때는 그것을 건너뛰기도 합니다. 오늘은 올바른 결정을 내리는 것에 대해 이야기하려고 합니다. 내일 더 나은 앱을 만들 뿐만 아니라 장기적으로 시간을 절약할 수 있습니다.

작년에 저희 CallStack에서 "React Native Optimization"를 위한 "Ultimate Guide"를 출시했습니다. 이 전자책 가이드는 123 페이지로 구성되어 있습니다. 123 페이지를 읽을 시간이 없다면, 잘 찾아오셨습니다. 이 가이드는 React Native 경험을 최적화하기 위해 시청해야 하는 유일한 시리즈입니다. 그러니 편안하게 앉아서 React Native 최적화 가이드를 즐기세요.

시작하기 전에 이 가이드의 일부 조언은 모두 당신에게는 직관적일 수 있지만, 아직 알지 못한 것도 있을 것입니다. 그래서 이들을 탐색해 보고 더 배울 기회를 쉽게 포기하지 마세요.

이 가이드는 세 가지 다른 유형의 최적화로 나누어집니다. 오늘은 'React Native' 구현 세부 정보를 이해하는 데 초점을 맞출 것입니다.

Let’s start with the first one:

A: UI 리렌더링을 제어하는 것이 리액트 개발자의 핵심입니다.
이것은 당신에게 놀라울 일이 아니겠지만, 때로는 React가 변경되지 않은 내용을 다시 렌더링합니다.
부모 컴포넌트가 업데이트되고 모든 하위 항목을 다시 렌더링하거나, 컴포넌트 props가 "변경"되었지만 변경되지 않았을 때 발생합니다.
이로 인해 많은 메모리를 사용하거나 장치의 속도가 느려질 수 있습니다.
1. 컴포넌트를 메모하여 리렌더링 시기를 결정할 수 있습니다(PureComponent, memo)
2. 가능한 경우 제어되지 않는 컴포넌트를 사용할 수 있습니다. 텍스트인풋 컴포넌트로 예를 들어,
'리액트 네이티브 앱'이 비동기식으로 작동하고 JS/Native 호출이 잘못 정렬되어 일관되지 않은 값을 남길 수 있으므로
입력 속도가 너무 빠를 경우 텍스트 입력 값이 깜박일 수 있습니다. 원시적인(네이티브) 측면만이 진실의 근원을 지시한다면,
여기서 데이터 흐름을 단순화하는 것입니다.
3. 이런 문제 상황에서 글로벌 상태를 사용하면 각 구성 요소가 해당 상태에서 사용 중인 내용이 업데이트된 경우에만 다시 렌더링할 수 있습니다.
이런 기능을 제공하는 메이저 라이브러리(리덕스, 리코일 등)와 그 사용법을 익숙하게 알고 있어야 하며 불필요한 업데이트를 방지하는 것이 좋습니다.
이러한 기술을 사용하면 리렌더를 줄일 수 있으므로 필요한 리소스를 줄이고 애플리케이션을 더 빠르게 실행할 수 있습니다.

B. 각 레이아웃에 맞는 전용 컴포넌트를 사용하세요.
규모 있는 리스트 컴포넌트를 작성한다면, 스크롤뷰와 뷰 같은 컴포넌트를 조립하는 것이 아니라,
가능하면 FlatList와 같은 최적화된 컴포넌트를 사용하세요. 모든 옵션을 알고 사용하면 더욱 효율적으로 사용할 수 있습니다.
특정 레이아웃을 위한 전용 컴포넌트를 사용하세요. ScrollView와 같은 원시 컴포넌트 대신 큰 목록을 최적화한 전용 컴포넌트를 사용하세요.
예를 들어, 날짜를 조작해야 할 경우에 베스트는 moment.js 이지만, 간단한 조작에는 2Kb인 day.js와 같은 더 작은 패키지를 사용할 수 있습니다.

C. 외부 라이브러리를 설치/사용하기 전에 두 번 생각하세요.
라이브러리의 크기, 기능 수, 종속성, 더 나아가서는 리포지토리의 star 수, pull request 수, issue 수 등을 고려하세요.
React Native는 앱을 부팅하기 전에 모든 JavaScript 코드를 로드하고 구문 분석해야 하므로,
크기가 큰 라이브러리를 사용하지 않는 것이 중요합니다.

D. 모바일 플랫폼에 전용 라이브러리를 사용하세요.
대부분의 자바스크립트 생태계는 웹 기반입니다. 모바일 시장에서 새 기기가 출시될 때 적은 CPU 소비가 꽤나 중요한 지표인만큼,
웹에 초점을 맞춘 라이브러리는 모바일에 최적화되지 않을 수 있습니다. iOS에서는 앱의 에너지 소비를 분석하여 배터리 수명을 최적화합니다.
라이브러리를 선택할 때 이러한 보이지 않는 결과를 염두에 두세요. 리액트만을 개발하는 것과 다른 접근을 해야 합니다.

E. Native와 JavaScript 간의 균형을 유지하세요.
React Native는 네이티브 측면에서 답변을 받기 위해 메시지를 한 번 더 보내야합니다. 이러한 메시지는 최대한 줄이세요.
Animated와 같은 React Native 코어 애니메이션 라이브러리가 제공하는 네이티브 드라이버를 사용하면 애니메이션을 더욱 부드럽게 할 수 있습니다.
더욱 복잡한 사용 사례를 다룰 때는 React Native Reanimated와 Gesture Handler를 사용하세요.
어떤 이유로든 비어있는 메시지 또는 지속 시간과 같은 잘못된 매개 변수를 전달하는 경우 다음의 과정에 시간을 소모하고 있는 것입니다.

[1]. 시리얼라이징(직렬화)하고 브릿지에 메시지를 보냅니다.
[2]. 네이티브에서 실패하기를 기다립니다.
[3]. 그런 다음 네이티브는 에러 객체를 생성합니다.
[4]. 그 에러 객체를 직렬화하고 다시 JavaScript로 보냅니다.

그러나 우리는 두 매개 변수가 모두 올바른 파라미터인지 JavaScript 측에서 먼저 확인함으로써 이 비효율적인 의사 소통을 피할 수 있습니다. 
이것은 때때로 한쪽에서 처리 할 수있는 브릿지로 전송되는 이 메시지를 최소화 할 수있는 방법에 대한 아주 좋은 예입니다.
이 문제 말고도 또 흔하게 발생하는 이슈는 스타일에 객체를 사용할 때입니다.
당신은 자바스크립트 및 리액트네이티브가 이 두 객체를 다른 것으로 간주한다는 것을 알고 있습니다.
의미가 다르면, (그렇지 않아야하지만) 두 번 네이티브로 보내질 것입니다.
대부분의 경우 스타일시트 API를 사용 하여 이 문제를 해결하여 두 스타일이 모두 동일하다는 것을 알 수 있습니다.
기억해야 할 중요한 점은 무해한 것처럼 보이는 것도 그 규모와 관계 없이 앱 전체 관점에서는 성능을 저하시킬 수 있다는 것입니다. 
리액트 네이티브가 네이티브와 어떻게 소통하는지 항상 기억하고 이러한 불필요한 모든 메시지를 최소화하려고 노력하십시오.

F: 무슨 일이 있어도 애니메이션을 60FPS로 만듭니다.
우리는 모두 일상적인 앱에서 애니메이션을 매끄럽게 하고 빠른 시각적 피드백을 주는 데 익숙합니다.
이것은 모든 요소가 애니메이션화될 필요는 없는 웹과의 중요한 차이점입니다.
리액트 네이티브로 애니메이션을 구현해 봤다면 그것이 얼마나 어려운지 알게 될 것입니다. 특히 원활한 상태를 유지하는 데 있어 그렇습니다.
가능하면 Animated, 즉 애니메이션을 매우 빠르게 실행하는 React Native Core Animation 라이브러리, 또 그와 함께 제공되는 네이티브 드라이버를 사용합니다.
보다 정교한 사용 사례를 다루는 경우 대부분의 장치에서 상호 작용을 60FPS로 유지하는 React Native Reanimated 및 Gesture Handler를 사용하는 것이 좋습니다.
다시 말하지만, 모바일에서 원활한 애니메이션은 필수적입니다. 절대 잊지 마세요.

Alright, before we end, here’s a quick recap of the 6 first rules to optimise your React Native application.

1), Pay attention to UI re-renders.
2), Use dedicated components for certain layouts.
3), Think twice before you pick an external library.
4), Use libraries dedicated to the mobile platform.
5), Find the balance between native and JavaScript.
6), Animate at 60FPS no matter what.

마지막으로 React Native Application을 최적화하기 위한 6가지 규칙에 대한 간략한 요약을 보여드리겠습니다.

1), UI 리렌더에 주의하십시오.
2), 특정 레이아웃에 전용 구성 요소를 사용합니다.
3), 외부 라이브러리를 선택하기 전에 2+ 번 생각합니다.
4), 모바일 플랫폼 전용 라이브러리를 사용합니다.
5), 네이티브와 자바스크립트의 균형을 찾습니다.
6), 무슨 일이 있어도 60FPS로 애니메이션을 만듭니다.

Okay, that’s it for today. If you are a curious person, you can expect a lot more videos on this channel. Remember to subscribe if you don’t want to miss it. Thanks for watching and see you next time :)