60 FPS in React Native

1. 구 Bridge vs New Architecture(JSI)

구 아키텍처: JS→Native 통신을 JSON 직렬화/역직렬화로 처리해 지연이 발생. 비동기 큐에 메시지가 쌓이면 프레임 드랍. New Architecture(JSI): JS와 Native가 C++ 레이어를 통해 직접 메모리를 공유하고 동기 호출 가능. Fabric(UI), TurboModules(Native 모듈)로 구성.

핵심 용어

2. Reanimated 3: UI 스레드 애니메이션

Reanimated 3는 `worklet` 함수를 UI 스레드에서 직접 실행합니다. JS 스레드가 바쁘거나 멈춰도 애니메이션이 끊기지 않습니다. `useSharedValue`, `useAnimatedStyle`로 애니메이션 값을 정의하고 `withSpring`, `withTiming`으로 전환 효과를 적용합니다. Gesture Handler와 함께 사용하면 제스처 기반 애니메이션도 UI 스레드에서 처리됩니다.

핵심 용어

3. FlatList 성능 최적화

FlatList의 주요 최적화: `keyExtractor`로 안정적인 키 제공, `getItemLayout`으로 아이템 높이 사전 계산(스크롤 오프셋 계산 비용 제거), `windowSize` 조정으로 메모리와 렌더 비용 균형, `removeClippedSubviews`로 화면 밖 뷰 메모리 해제, `React.memo`로 아이템 컴포넌트 리렌더 방지.

핵심 용어

Q1. React Native의 구 아키텍처와 New Architecture의 차이를 설명해주세요.

힌트

[감점 답변] 정의만 반복하거나 "React Native의 구 아키텍처와 New Architecture의 차이를 설명해주세요."에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 구: JS-Native 간 Bridge로 JSON 비동기 통신 → 직렬화 비용, 프레임 드랍 위험. New: JSI(JavaScript Interface)로 C++ 레이어를 통해 직접 동기 통신 가능. Fabric(렌더러), TurboModules(네이티브 모듈)로 구성. 이로 인해 Reanimated 같은 UI 스레드 라이브러리가 더 효과적으로 동작합니다.

Q2. React Native에서 60 FPS 애니메이션을 보장하려면 어떻게 해야 하나요?

힌트

[감점 답변] 정의만 반복하거나 "React Native에서 60 FPS 애니메이션을 보장하려면 어떻게 해야 하나요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 핵심: JS 스레드가 아닌 UI 스레드에서 애니메이션을 구동해야 합니다. Reanimated 3의 worklet 함수가 UI 스레드에서 실행됩니다. JS 스레드 작업(API 호출, 무거운 연산)이 애니메이션에 영향을 주지 않도록 격리하고, `InteractionManager.runAfterInteractions`로 애니메이션 완료 후 무거운 작업을 실행합니다.

Q3. React Native의 FlatList와 ScrollView의 차이와 FlatList를 사용해야 하는 이유는 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "React Native의 FlatList와 ScrollView의 차이와 FlatList를 사용해야 하는 이유는 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] ScrollView는 모든 자식을 한 번에 렌더합니다. 100개 아이템이면 100개 모두 렌더. FlatList는 화면에 보이는 아이템만 렌더하고 스크롤 시 재활용(virtualization)합니다. 긴 목록에서 ScrollView를 쓰면 초기 렌더 시간과 메모리 사용량이 폭증하므로 FlatList를 사용해야 합니다.