React Native Mimari Tasarımı: Ölçeklenebilir Mobil Uygulamalar
Yazar: Burak Balkı | Kategori: Full Stack Development | Okuma Süresi: 10 dk
React Native mimari tasarımı, JSI mimarisi, state management stratejileri ve performans optimizasyonlarını içeren kapsamlı teknik rehber.
## React Native Mimari Tasarımı ve Modern Mobil Geliştirme
**React Native**, JavaScript ve React kullanarak hem iOS hem de Android platformları için yerel (native) performans sunan uygulamalar geliştirmenize olanak tanır. Modern bir full stack geliştiricisi için React Native mimarisini anlamak, sadece kod yazmak değil, aynı zamanda cihaz kaynaklarını verimli kullanan, ölçeklenebilir ve sürdürülebilir sistemler inşa etmek anlamına gelir. Bu rehberde, bir uygulamanın temelinden ileri seviye optimizasyon süreçlerine kadar tüm mimari kararları teknik detaylarıyla inceleyeceğiz.
## React Native Mimarisinin Temelleri: Bridge ve JSI
React Native'in kalbinde, JavaScript tarafı ile Native (Java/Kotlin/Swift) tarafı arasındaki iletişim yatar. Geleneksel mimari **Bridge** (Köprü) mekanizmasına dayanırken, yeni mimari **JSI (JavaScript Interface)** ile bu süreci modernize etmiştir.
- **Bridge Mimari:** JavaScript ve Native tarafları asenkron JSON mesajları aracılığıyla haberleşir. Bu durum, yoğun veri transferlerinde darboğaz oluşturabilir.
- **JSI (New Architecture):** C++ tabanlı olan bu yapı, JavaScript'in Native objelere doğrudan referans vermesini sağlar. Bu, senkronize iletişimi ve çok daha yüksek performansı beraberinde getirir.
| Özellik | Bridge Mimari | JSI (Yeni Mimari) |
| :--- | :--- | :--- |
| İletişim Tipi | Asenkron (JSON) | Senkron (Direct C++) |
| Veri Serileştirme | Gerekli | Gereksiz |
| Performans | Orta (Darboğaz riski) | Yüksek (Native hızında) |
| Render Motoru | Fabric | Fabric |
## Klasör Yapısı ve Proje Organizasyonu
Ölçeklenebilir bir React Native projesinde klasör yapısı, ekiplerin birbirini engellemeden çalışabilmesi için kritik öneme sahiptir. **Feature-based** (Özellik tabanlı) veya **Atomic Design** yaklaşımları en yaygın tercih edilenlerdir.
```bash
src/
├── assets/ # Görseller, fontlar ve ikonlar
├── components/ # Global ve tekrar kullanılabilir bileşenler (Atomic Design)
│ ├── atoms/
│ ├── molecules/
│ └── organisms/
├── constants/ # Renk paleti, API endpointleri, tema ayarları
├── hooks/ # Custom React hooks
├── navigation/ # Stack, Tab ve Drawer tanımlamaları
├── screens/ # Sayfa bazlı bileşenler (Login, Dashboard vb.)
├── services/ # API servisleri, Axios instance
├── store/ # Redux, Zustand veya Context API yönetimi
└── utils/ # Yardımcı fonksiyonlar (Validation, Formatting)
```
## State Management (Durum Yönetimi) Stratejileri
Full stack bir uygulamada veri tutarlılığı en önemli unsurdur. React Native ekosisteminde durum yönetimi için üç ana yaklaşım öne çıkar: **Zustand**, **Redux Toolkit** ve **React Context**.
### Zustand ile Hafif ve Hızlı State Yönetimi
Zustand, boilerplate kod miktarını azaltması ve performanslı çalışması nedeniyle modern projelerde Redux'ın yerini almaya başlamıştır.
```javascript
import { create } from 'zustand';
const useAuthStore = create((set) => ({
user: null,
isAuthenticated: false,
login: (userData) => set({ user: userData, isAuthenticated: true }),
logout: () => set({ user: null, isAuthenticated: false }),
}));
export default useAuthStore;
```
## Navigasyon Mimarisi: React Navigation
Mobil uygulamalarda navigasyon, web'den farklı olarak bir "stack" (yığın) yapısında çalışır. **React Navigation** kütüphanesi, bu süreci yönetmek için endüstri standardıdır.
```javascript
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function AppNavigation() {
return (
);
}
```
> **Not:** Derin linkleme (Deep Linking) yapılandırması, uygulamanın dış dünyadan (web veya push bildirimleri) belirli sayfalara yönlendirilmesi için mimari aşamada planlanmalıdır.
## Native Modüller ve Köprüleme (Bridging)
React Native'in yeteneklerinin yetmediği durumlarda (örneğin özel bir donanım sensörüne erişim), Native modüller yazılması gerekir.
### Örnek: Java (Android) Tarafında Native Modül Tanımı
```java
public class MyModule extends ReactContextBaseJavaModule {
MyModule(ReactApplicationContext context) {
super(context);
}
@Override
public String getName() {
return "MyModule";
}
@ReactMethod
public void getDeviceID(Promise promise) {
try {
String id = android.provider.Settings.Secure.getString(
getReactApplicationContext().getContentResolver(),
android.provider.Settings.Secure.ANDROID_ID
);
promise.resolve(id);
} catch (Exception e) {
promise.reject("Error", e);
}
}
}
```
## Veri Katmanı ve API Entegrasyonu: TanStack Query
Sunucu tarafındaki verilerin önbelleğe alınması ve senkronizasyonu için **TanStack Query (React Query)** kullanılması, ağ trafiğini optimize eder ve kullanıcı deneyimini iyileştirir.
```javascript
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
const fetchUsers = async () => {
const { data } = await axios.get('https://api.example.com/users');
return data;
};
export function UserList() {
const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: fetchUsers });
if (isLoading) return {item.name} } />;
}
```
## Performans Optimizasyonu: Frame Rate ve Bellek Yönetimi
React Native uygulamalarında performans sorunları genellikle aşırı render (re-render) işlemlerinden kaynaklanır. **60 FPS** hedefine ulaşmak için şu teknikler uygulanmalıdır:
- **Memoization:** `useMemo` ve `useCallback` ile gereksiz hesaplamaları önleyin.
- **FlatList Optimizasyonu:** `getItemLayout`, `initialNumToRender` ve `windowSize` parametrelerini kullanın.
- **Image Caching:** `react-native-fast-image` kütüphanesi ile görselleri diskte önbelleğe alın.
```javascript
import React, { memo } from 'react';
import { View, Text } from 'react-native';
const ExpensiveComponent = memo(({ data }) => {
return (
{data.title}
);
});
```
## Güvenlik Protokolleri ve Hassas Veri Saklama
Mobil güvenlikte en kritik kural, hassas verilerin (token, şifre) asla `AsyncStorage` içerisinde saklanmamasıdır. Bunun yerine **Keychain** (iOS) ve **Shared Preferences** (Android) kullanılmalıdır.
```javascript
import * as SecureStore from 'expo-secure-store';
async function saveToken(value) {
await SecureStore.setItemAsync('user_token', value);
}
async function getToken() {
return await SecureStore.getItemAsync('user_token');
}
```
## Test Stratejileri: Unit ve E2E
Kaliteli bir mimari, test edilebilir olmalıdır. React Native projelerinde testler üç seviyede ele alınır:
1. **Unit Test (Jest):** Saf fonksiyonların ve hook'ların testi.
2. **Component Test (Testing Library):** UI bileşenlerinin render testi.
3. **E2E Test (Detox):** Uygulamanın bir kullanıcı gibi gerçek cihazda test edilmesi.
```javascript
test('toplama fonksiyonu doğru çalışmalı', () => {
expect(sum(2, 2)).toBe(4);
});
```
## Sık Yapılan Hatalar ve Anti-Pattern'ler
- **Inline Style Kullanımı:** Render sırasında her seferinde yeni obje oluşturulmasına neden olur. `StyleSheet.create` tercih edilmelidir.
- **Büyük Resim Dosyaları:** Uygulamanın bellek (RAM) kullanımını hızla artırır.
- **Zayıf Hata Yönetimi:** API isteklerinde `try-catch` bloklarının eksikliği uygulamanın çökmesine (crash) yol açar.
- **JS Thread'i Kilitlemek:** Ağır hesaplamaları JS tarafında yapmak UI donmalarına sebep olur. Bu işlemler Web Workers veya Native tarafına kaydırılmalıdır.
## Sık Sorulan Sorular (SSS)
**1. Expo mu yoksa CLI mı tercih edilmeli?**
Hızlı prototipleme ve kolay dağıtım için Expo; ancak özel native modül ihtiyacı ve tam kontrol gerektiren karmaşık projeler için React Native CLI tercih edilmelidir.
**2. React Native gerçekten 'Native' performans sunar mı?**
Evet, UI bileşenleri native olarak render edilir. Ancak iş mantığı (business logic) JavaScript tarafında çalıştığı için çok yoğun hesaplamalarda native dillere (Swift/Kotlin) göre fark oluşabilir.
**3. AsyncStorage güvenli mi?**
Hayır. AsyncStorage şifrelenmemiş bir depolama birimidir. Hassas veriler için `react-native-keychain` veya `expo-secure-store` kullanılmalıdır.
**4. Uygulama boyutunu nasıl küçültebilirim?**
Android için Proguard kullanımı, kullanılmayan kütüphanelerin temizlenmesi ve görsellerin WebP formatına dönüştürülmesi boyutu önemli ölçüde azaltır.
**5. Hermes motoru nedir?**
Hermes, Facebook tarafından geliştirilen ve React Native için optimize edilmiş bir JavaScript motorudur. Uygulama açılış hızını artırır ve bellek kullanımını azaltır.
## Özet ve Sonuç
React Native ile profesyonel bir mobil uygulama geliştirmek, doğru mimari kararların en başta alınmasını gerektirir. JSI tabanlı yeni mimariyi anlamak, doğru state management aracını seçmek ve performans optimizasyonlarını bir standart haline getirmek, projenizin başarısını belirler. Unutmayın ki iyi bir mimari, sadece bugünün ihtiyaçlarını karşılayan değil, yarının büyüyen gereksinimlerine de cevap verebilen bir yapıdır.