#3. 단위환산에 따라 다른 정보 표시하기

섭씨/화씨 단위를 설정할 수 있는 버튼을 만들고, 이 버튼을 클릭하여 단위를 변경하면, 변경한 단위로 다시 openweathermap에 api를 재 요청하여, 정보를 받아온 뒤, 이를 메인화면에 띄워주면 된다. 이 기능을 구현하기 위해선, 우선 단위를 선택할 수 있는 ui를 만들고, 이 ui 상에서 상태변화가 일어나는 부분을 저장해줄 state hook을 정의하고, 클릭이라는 이벤트가 발생할 때, 단위와 관련된 state를 변경해줄 수 있어야 한다. 단위와 관련된 state를 변경한다면, 그 state 대로 다시 api 요청이 진행될 것이다.

 

export default function App() {

	//단위를 담을 수 있는 state를 설정한다. 이 state에 따라 api에 요청하는 정보가 달라진다
	const [unitsSystem, setUnitsSystem] = useState('metric');
    
    //단위와 관련된 state를 url에 인코딩하여, api 요청을 한다.
    async function load(){
      const weatherUrl = `${BASE_WEATHER_URL}lat=${latitude}&lon=${longitude}&units=${unitsSystem}&appid=${WEATHER_API_KEY}`;
      const response = await fetch(weatherUrl);
      const result = await response.json();
    }
    
    //앞에서 작성한 if문을 살짝 수정하였다
    if(currentWeather){
    return (
      <View style={styles.container}>
        <StatusBar style="auto" />
        <View style={styles.main}>
        //단위환산을 담당하는 컴포넌트를 별도로 만들고, 단위와 관련한 state와 state변경함수를 상속한다
          <UnitsPicker unitsSystem={unitsSystem} setUnitsSystem={setUnitsSystem} />
          <WeatherInfo currentWeather={currentWeather} />
        </View>
      </View>
    );
}

애초에 api 요청을 할 때부터 단위와 관련된 state를 별도로 만든 뒤 이 정보를 url에 함께 인코딩하여 api 요청을 하도록 만들었다. 단위환산을 담당하는 ui에서 단위 state를 변경만 한다면, 자동으로 다른 정보가 메인 화면에 나타나게 된다.

 

import React from 'react'
import { View, Text, StyleSheet, Platform } from 'react-native'
import { Picker } from '@react-native-community/picker'

//app.js에서 만든 단위와 관련된 state와 state변경함수를 전달받는다
export default function UnitsPicker({unitsSystem, setUnitsSystem}) {
    return (
        <View style={styles.unitsSystem}>
        	//Picker라는 라이브러리를 활용해 UI를 구성한다
            //UI상에서 값이 변화하면, 그 값에 따라 state변경함수를 통해 단위state를 변경해준다
            <Picker selectedValue={unitsSystem} onValueChange={(item)=>{setUnitsSystem(item)}} mode="dropdown" itemStyle={{fontSize:20}}>
                <Picker.Item label="C°" value="metric" />
                <Picker.Item label="F°" value="imperial" />
            </Picker>
        </View>
    )
}

앞에서 단위와 관련된 state를 api 요청에 포함시켰기 때문에, 단위환산 UI에서는 단위 state를 변경해주는 부분만 구현하면 된다. UI 상에서 변화가 일어날 때, 그 값에 따라 단위 state를 변경해준다