Flipper

• Flipper 는 레이아웃, 네트워크, 로그, 저장소를 한 화면에서 보던 디버거다.
• React Native 에서는 연동이 빠졌고, 지금 RN 디버깅은 React Native DevTools 가 기본이다.
• 성능은 내비게이터 깊이, 지연 로딩, 리렌더 최적화, 프로파일링 순서로 본다.

---

Flipper 가 뭔가

Meta 가 만든 모바일 앱 디버깅 도구다. 데스크톱 앱을 띄우고 에뮬레이터나 기기에 연결하면, 앱 안을 플러그인별로 들여다볼 수 있다.

뷰 계층과 속성, 네트워크 요청과 응답, 네이티브 로그, AsyncStorage 나 DB 같은 저장소를 한 화면에서 볼 수 있어서 RN 초기에 많이 썼다.

---

지금은 상황이 다르다

React Native 쪽에서는 Flipper 연동을 단계적으로 뺐다.

Flipper 자체는 네이티브 앱 디버거로 남아 있지만, npm 패키지는 2023년 0.240.0 이후 멈춰 있다. 새로 시작하는 RN 프로젝트라면 React Native DevTools 를 기본으로 쓰고, 네이티브 쪽은 Android Studio 와 Xcode 로 보는 게 맞다.

---

같이 보던 react-native-mmkv

이 글을 쓸 때 저장소 디버깅 때문에 react-native-mmkv 도 같이 봤다. Tencent 의 MMKV 를 RN 에서 쓰게 해 주는 키-값 저장소다.

AsyncStorage 는 비동기라 매번 await 가 필요한데, MMKV 는 네이티브를 동기로 부르는 구조라 훨씬 빠르다. 2026년 10월 기준 최신은 4.x 고, 새 아키텍처(Nitro Modules) 기반이다.

---

RN 성능 팁 네 가지

• 화면과 내비게이터 수를 적당히 유지한다. 내비게이터를 너무 깊게 중첩하면 성능에 영향을 준다.
• 코드 분할과 지연 로딩으로 필요할 때만 화면과 컴포넌트를 불러온다. 초기 번들이 작아지고 시작이 빨라진다.
• 리렌더를 줄인다. 메모이제이션이나 selector 로 상태를 필요한 만큼만 구독한다.
• 프로파일링으로 병목부터 찾는다. 예전엔 React Native Debugger 나 Flipper 를 썼고, 지금은 React Native DevTools 의 Profiler 를 쓴다.