[ 앱 개발자 도전기 : 크로스플랫폼_ReactNative ] React Native 자료구조 & 알고리즘 확장 공부 로드맵.
▽ [ 앱 개발자 도전기 : 크로스플랫폼_ReactNative ] React Native 자료구조 & 알고리즘 확장 공부 로드맵.
목 차
📘 React Native: 자료구조 & 알고리즘 확장 가이드
1. 자료구조 활용 in RN
1-1. 리스트 최적화
- FlatList vs SectionList vs ScrollView
- VirtualizedList 내부 동작 (windowSize, maxToRenderPerBatch)
- 알고리즘 관점: Sliding Window & Lazy Loading
1-2. Map / Set / WeakMap
- Set → 중복 없는 선택 목록
- Map → O(1) 조회 (검색창, 친구 목록)
- WeakMap → 메모리 자동 해제 (캐싱에 유리)
1-3. 큐 & 스택
- React Navigation Stack = 자료구조 Stack
- 메시지 큐: Background Task 스케줄링
2. 알고리즘 최적화
2-1. 검색 최적화
- O(n) 필터링 → 해시 기반 검색 인덱스
- Trie → 자동완성 구현
2-2. 페이징 & 무한 스크롤
- FlatList + onEndReached
- Cursor 기반 API → DB 효율적 호출
- Placeholders & Skeleton Loader
2-3. 캐싱 전략
- AsyncStorage → key-value 저장
- SQLite → 구조화된 데이터
- react-native-fast-image → 이미지 캐싱
- 알고리즘: LRU Cache 패턴
3. 앱 특화 알고리즘
3-1. UI 성능 최적화
- Memoization
- React.memo / useMemo / useCallback
- 중복 렌더링 방지
- Diffing 알고리즘 이해
- Virtual DOM → 최소 변경 적용
3-2. 지도 & 위치 기반
- A* 알고리즘 → 최단 경로
- BFS/DFS → POI(Point of Interest) 탐색
- Graph → 지하철 경로 안내, 물류 배송 경로
3-3. 실시간 데이터.
- Queue 기반 소켓 메시지 처리
- 우선순위 큐: 중요 메시지 먼저 처리
4. RN 면접/실무 대비 문제
- Two Pointer → 채팅 메시지 페이징
- HashMap → 사용자 중복 체크
- Stack → 뒤로 가기 히스토리
- Priority Queue → 다운로드 순서 관리
- Graph 탐색 → 지도 경로 추천
📘 React Native: 자료구조 & 알고리즘 확장 가이드
1. 자료구조 활용 in RN
1-1. 리스트 최적화
-
FlatList vs SectionList vs ScrollView
-
VirtualizedList 내부 동작 (windowSize, maxToRenderPerBatch)
-
알고리즘 관점: Sliding Window & Lazy Loading
1-2. Map / Set / WeakMap
-
Set → 중복 없는 선택 목록
-
Map → O(1) 조회 (검색창, 친구 목록)
-
WeakMap → 메모리 자동 해제 (캐싱에 유리)
1-3. 큐 & 스택
-
React Navigation Stack = 자료구조 Stack
-
메시지 큐: Background Task 스케줄링
2. 알고리즘 최적화
2-1. 검색 최적화
-
O(n) 필터링 → 해시 기반 검색 인덱스
-
Trie → 자동완성 구현
2-2. 페이징 & 무한 스크롤
-
FlatList + onEndReached
-
Cursor 기반 API → DB 효율적 호출
-
Placeholders & Skeleton Loader
2-3. 캐싱 전략
-
AsyncStorage → key-value 저장
-
SQLite → 구조화된 데이터
-
react-native-fast-image → 이미지 캐싱
-
알고리즘: LRU Cache 패턴
3. 앱 특화 알고리즘
3-1. UI 성능 최적화
-
Memoization
-
React.memo / useMemo / useCallback
-
중복 렌더링 방지
-
-
Diffing 알고리즘 이해
- Virtual DOM → 최소 변경 적용
3-2. 지도 & 위치 기반
-
A* 알고리즘 → 최단 경로
-
BFS/DFS → POI(Point of Interest) 탐색
-
Graph → 지하철 경로 안내, 물류 배송 경로
3-3. 실시간 데이터.
-
Queue 기반 소켓 메시지 처리
-
우선순위 큐: 중요 메시지 먼저 처리
4. RN 면접/실무 대비 문제
-
Two Pointer → 채팅 메시지 페이징
-
HashMap → 사용자 중복 체크
-
Stack → 뒤로 가기 히스토리
-
Priority Queue → 다운로드 순서 관리
-
Graph 탐색 → 지도 경로 추천
📊 Flutter vs RN: 알고리즘 적용 사례 비교
| 시나리오 | Flutter | React Native |
|---|---|---|
| 무한 스크롤 | ListView.builder + Isolate로 데이터 처리 | FlatList + VirtualizedList 내부 windowing |
| 이미지 캐싱 | cached_network_image + Hive LRU Cache | react-native-fast-image + AsyncStorage |
| 대용량 데이터 처리 | Isolate 분리 (병렬 처리) | Hermes 엔진 + 메모이제이션 |
| 경로 탐색 | 다익스트라 / A* + Google Maps | A* / BFS + RN Maps |
| 알림 스케줄링 | Heap (PriorityQueue) | JS Priority Queue / setTimeout 큐 |
