Veri modeli
- React Native kursu
- Başlangıç
- Ders 84/116
- 6 dk
Hava durumu veri modelini kurarsın.
Hava durumu verisi
Bir hava durumu kaydında en az üç bilgi olur: city (şehir adı), temp (sıcaklık) ve condition (durum: güneşli, bulutlu, yağmurlu). Bu üçünü bir nesnede tutmak mantıklıdır.
Örneğin İstanbul için: {`{ city: 'İstanbul', temp: 18, condition: 'Bulutlu' }`}. Bu nesne uygulamanın weather state'inde tutulur ve ekran buradan beslenir.
State grupunda nesne state'i öğrenmiştin. Burada aynı deseni kullanırız: const [weather, setWeather] = useState({'{ city: 'İstanbul', temp: 18, condition: 'Bulutlu' }'}).
weather state'i tanımla
State grubundan hatırla: useState bir başlangıç değeri alır ve değer-setter ikilisi döndürür. Nesne state'inde başlangıç bir nesnedir.
Burada const [weather, setWeather] = useState({'{ city: 'İstanbul', temp: 18, condition: 'Bulutlu' }'}) yazarız. Böylece ilk render'da ekranda İstanbul veriliri görünür; kullanıcı şehir değiştirdiğinde setWeather ile nesneyi yeniden yazarız.
İleride şehir seçiminde spread yerine tam nesne vererek değiştireceğiz: setWeather({'{ city: 'Ankara', temp: 22, condition: 'Güneşli' }'}). Çünkü şehir değişince üç alan birden değişir; spread gerektirmez.
Uygulama weather state'i ekle
App bileşenine useState ile bir weather state'i ekle. Başlangıç değeri {`{ city: 'İstanbul', temp: 18, condition: 'Bulutlu' }`} olsun. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
function App() {
// weather state'ini buraya tanımla
return (
<View style={styles.container}>
<Text>Hava durumu</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
});
export default App;Örnek çözüm
import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
function App() {
const [weather, setWeather] = useState({ city: 'İstanbul', temp: 18, condition: 'Bulutlu' });
return (
<View style={styles.container}>
<Text>Hava durumu</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
});
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Veri alanlarını eşle
| Kavram | Anlamı |
|---|---|
city |
Şehir adı |
temp |
Sıcaklık değeri |
condition |
Hava durumu |
weather |
State nesnesi |
2 Sıcaklık hangi alanla tutulur?
- temp
- city
- condition Doğru cevap
- weather
Açıklama: temp sayı olarak sıcaklığı taşır.
3 useState başlangıç nesnesi
import { useState } from 'react';
function App() {
const [weather, setWeather] = ____({ city: 'İstanbul', temp: 18, condition: 'Bulutlu' });
}import { useState } from 'react';
function App() {
const [weather, setWeather] = useState({ city: 'İstanbul', temp: 18, condition: 'Bulutlu' });
}Açıklama: useState nesne başlangıç değeriyle çağrılır.