AsyncStorage
- React Native kursu
- Orta seviye
- Ders 22/116
- 6 dk
AsyncStorage ile notları kaydedersin.
AsyncStorage nedir?
AsyncStorage React Native'te kalıcı veri saklama sağlayan modüldür. Uygulama kapansa bile veriyi korur; bir anahtar-değer deposudur. AsyncStorage.setItem("notes", value) ile kaydeder, AsyncStorage.getItem("notes") ile okursun.
Tüm işlemler async'tir; bu yüzden await kullanırsın. Değer yalnızca dize olabilir; bu yüzden nesneleri ve dizileri JSON.stringify ile dizeye çevirip kaydedersin, okurken de JSON.parse ile geri çevirirsin. AsyncStorage, notlar gibi küçük veriler için idealdir; büyük verilerde SQLite gibi alternatifler tercih edilir.
Uygulama AsyncStorage ile kaydet
NotesApp bileşenine saveNotes adında async bir fonksiyon ekle. AsyncStorage.setItem("notes", JSON.stringify(notes)) ile notları kaydet. Fonksiyon await kullansın.
Başlangıç kodu
import { useState } from "react";
import { Text, TextInput } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
function NotesApp() {
const [notes, setNotes] = useState([{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }]);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
// saveNotes adında async bir fonksiyon yaz
// AsyncStorage ile notes'u kaydet; JSON.stringify kullan
return <Text>Notlar</Text>;
}Örnek çözüm
import { useState } from "react";
import { Text, TextInput } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
function NotesApp() {
const [notes, setNotes] = useState([{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }]);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
async function saveNotes() {
await AsyncStorage.setItem("notes", JSON.stringify(notes));
}
return <Text>Notlar</Text>;
}AsyncStorage okuma
Kayıt yaptıktan sonra uygulama açıldığında notları geri yüklemen gerekir. AsyncStorage.getItem("notes") ile kayıtlı dizeyi okursun; bu işlem async'tir, bu yüzden await kullanırsın. Dönen dize JSON.parse ile nesneye çevrilir.
Okuma işlemini useEffect içine koyarsın; öyle ki bileşen ekrana ilk geldiğinde (mount) notlar yüklensin. Boş dizi [] dependency array ile bu efekt yalnızca bir kez çalışır. Eğer kayıt yoksa getItem null döner; bu durumda boş dizi kullanırsın. Böylece uygulama her açılışta kayıtlı notları geri yükler.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 AsyncStorage'dan oku
const raw = await AsyncStorage.____("notes");const raw = await AsyncStorage.getItem("notes");Açıklama: getItem ile kayıtlı dize okunur.
2 AsyncStorage ne zaman yüklenmeli?
useEffect(() => {
/* yükleme */
}, []);- Her render'da
- useEffect ile mount'ta Doğru cevap
- Yalnızca butona basılınca
- Hiçbir zaman
Açıklama: useEffect ile mount'ta yüklenir.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
AsyncStorage.setItem |
Kaydeder |
AsyncStorage.getItem |
Okur |
JSON.stringify |
Nesneyi dizeye çevirir |
JSON.parse |
Dizeyi nesneye çevirir |