⚡ 60. React Native 앱 성능 최적화를 위한 코드 분할 전략

---

React Native 앱을 개발하다 보면, 앱이 초기에 무겁고 느리다는 느낌을 받는 경우가 많다.
특히 컴포넌트가 많고, 기능이 방대한 경우엔 초기 렌더링이 느려질 수밖에 없다.

이런 문제를 해결하기 위해 등장한 전략 중 하나가 바로
👉 코드 분할(Code Splitting) & Lazy Loading 전략이다.

---

🧩 코드 분할이란?

앱에서 사용하지 않는 코드까지 처음부터 모두 불러오지 말고,
사용자에게 필요한 시점에만 필요한 코드만 로딩하는 것.

React Native에서도 기본적으로 React.lazy, Suspense, dynamic import() 등의 방식으로 구현 가능하며,
경우에 따라 라이브러리나 화면 전환 방식과 함께 사용하면 효과적이다.

---

🚀 사용 시점

• 초기 렌더링 속도가 느릴 때
• 무거운 컴포넌트가 많을 때
• 특정 기능이 사용자 조건에 따라 동적으로 로드될 때
• 탭(Tab) 화면별로 기능이 분리되어 있을 때

---

🧱 기본 코드 예시

import React, { Suspense } from 'react';
const SettingsScreen = React.lazy(() => import('./screens/SettingsScreen'));

export default function App() {
  return (
    <Suspense fallback={<Text>Loading...</Text>}>
      <SettingsScreen />
    </Suspense>
  );
}

---

🛠️ 함께 활용할 수 있는 전략

전략	설명
React.lazy + Suspense	가장 기본적인 코드 분할 방법
Dynamic Import	조건에 따라 컴포넌트 불러오기
Navigation Stack 분리	탭이나 스택 구조 별로 화면을 분리하여 lazy load
기능 단위 분할	예: 설정, 알림, 채팅 등 기능 단위로 모듈화 후 분기

---

🎯 실제 구조 설계 예시

📁 screens/
 ┣ 📁 home/
 ┃ ┗ HomeScreen.tsx
 ┣ 📁 profile/
 ┃ ┗ ProfileScreen.tsx
 ┣ 📁 settings/
 ┃ ┗ SettingsScreen.tsx ← 필요 시점에 로딩

각 폴더를 기능 단위로 쪼개고 필요할 때만 불러오는 구조로 설계!

---

🧠 느낀 점

앱을 만들다 보면 개발 속도에만 집중하고
성능 최적화는 나중에 하자는 생각이 들 수 있는데,
초기 구조부터 나눠두면 리팩토링 없이 성능이 좋아질 수 있음!

특히 Navigation 구조와 함께 라우팅 단위로 분할하는 구조는
성능에도 좋고 유지보수에도 도움이 되는 듯하다.

---

🧩 "불필요한 코드를 미리 로딩하지 마라 — 사용자 경험은 기다림에서 무너진다."

---