상태(state값)에 따라 출력 이미지를 다르게 해보자 (React)

 

 

과제로 프로젝트 진행 중이다.

 

미세먼지 농도 데이터를 받아 오는데 

 

 

 

 

API명세를 보면 등급 값에 따라 1,2,3,4(좋음,보통,나쁨, 매우나쁨)으로 나뉜다.

 

나는 이것을 받아온  Grade값에 따라 이미지를 다르게 하여 그림으로 보여주고싶다 

 

 

 

 

 

그림 4개를 준비해야한다.

 

교수님이 스타를 좋아하신다

 

        <good.jpg>                <middle.jpg>                    <bad.jpg>                 <sobad.jpg>

 

 

 

 

  <logo.gif>            // default 이미지

 

---

 

 

우선 사용할  .js파일에 import

import bad from '../marine/bad.jpg';		//bad 나쁨
import good from '../marine/good.jpg';		//good 좋음
import middle from '../marine/middle.jpg';	//middle 보통
import sobad from '../marine/sobad.jpg';	//sobad 매우나쁨
import logo from '../marine/logo.gif';		//logo default

 

 

 

 

state값

constructor(props) {
        super(props);
        this.state = {
            pm10Image:logo,  //미세먼지 등급이미지  logo 초기화
            pm25Image:logo,  //초미세먼지 등급이미지 logo 초기화
        };
    }

 아 참고로 미세먼지 크기 단위가 있는데 여튼 10이면 미세먼지 2.5보다 작으면 초미세먼지다

 

 

 

 

 

img 태그 // src를 현재 state값으로 해줬다

<img src={this.state.pm10Image} height="110" width='110' style={{borderRadius:'20px'}}/>
<img src={this.state.pm25Image} height="110" width='110' style={{borderRadius:'20px'}}/>

 

 

 

서버에 요청하는 fetch함수 다음 알고리즘

if(json.list[0].pm10Grade === '1'){	//갖고온 pm10Grade가 1이면 진입
	this.setState({
    	pm10Image: good,			//image 초기화
        pm10Text:'좋음'
    })
}
else if(json.list[0].pm10Grade === '2'){  //마찬
	this.setState({
	    pm10Image: middle,                // 가지
        pm10Text:'보통'
    })
}
else if(json.list[0].pm10Grade === '3'){  //마찬
	this.setState({
    	pm10Image:bad,                     //가지
        pm10Text:'나쁨'
    })
}
else{this.setState({                      //마찬
	pm10Image:sobad,                      
    pm10Text:'매우나쁨'                   //가지
	})
}

//초미세먼지 마찬가지
if(json.list[0].pm25Grade === '1'){ this.setState({pm25Image: good,pm25Text:'좋음'})}
else if (json.list[0].pm25Grade === '2'){this.setState({pm25Image: middle,pm25Text:'보통'})}
else if (json.list[0].pm25Grade === '3'){this.setState({pm25Image: bad,pm25Text:'나쁨'})}
else{this.setState({pm25Image: sobad,pm25Text:'매우나쁨'})}

 

갖고온  json파일의 pm10,25Grade의 값에 따라 pm10,25Image값이 초기화 됨을 볼 있다

 

 

---

 

클릭을 눌러 데이터를 출력해보면

 

 

 

 

 

 

현재 경남의 미세먼지등급은 '좋음' 초미세먼지는 '보통'이다

 

 

 

마스크를 잘 쓰자