빙글빙글 돌아가는 프로그레스(progress)를 만들자 (React,meterial-ui)

데이터를 요청하고 받을 때 까지 

 

뭐가 ui적으로 눈에 보이면 좋다. 이게 돼가는지 안돼가는지 봐야 된다.

 

얘를 들면 요론거

 

 

버튼을 눌러 데이터를 요청하고 받아오기 전까지 저 프로그레스가 떴으면 좋겠다.

 

 

 

 

해보자

 

난 react에서 제공해주는 material-ui를 사용했다 여기가면 무료로 사용할 수 있다

material-ui.com/

 

 

먼저 material ui를 사용하기 위해 패키지 설치

npm install @material-ui/core

 

 

좌측 메뉴 Component - Feedback 에 가면 Progress 보인다

 

 

나 이걸 사용하고 싶다. 소스코드와 함께 친절하게 있다 

 

 

 

 

사용하고 싶은 .js파일에 import 해주기 // style은 안쓸거다 저거만으로 예쁘니깐

import CircularProgress from '@material-ui/core/CircularProgress';

 

 

 

return ( 안에  이걸 써주기만 하면 사실 바로 보인다. 

<CircularProgress />	//파란색 동그라미
<CircularProgress color="secondary" />	//빨간색 동그라미

 

 

 

상황에 따라 보였다 안 보였다 해야한다

 

어떤 구조이냐면 프로그레스를 항상 띄워 놓되  css [display: 'none' 또는 'inline']을 state값으로 상태에 따라 보였다 안보였다 할거다 

 

 

 

 

 

state값 circle 'none' 초기화

 constructor(props) {
        super(props);
        this.state = {
            circle:'none',
        };
    }

 

 

 

 

내가 넣은 circularProgress,  display: 현재의 state값

<CircularProgress color="secondary" style={{display:this.state.circle}}/>

이러면 처음에는 안보인다 'none'이니깐

 

 

 

 

 

버튼을 누르면 활성화 되는 search 함수 // "◀◀◀◀ "를 봐야 된다

search=(e)=>{       //input창에 지역 쓰고 버튼 누르면 발동되는 함수
        e.preventDefault();

        const body = {
            sidoName: this.props.sidoName	// 현재 시,도이름을 body에 넣는다.
        }

        this.setState({
            circle:'inline'   // ◀◀◀◀ 버튼 누르면 circle 'inline'으로 초기화 이러면 보인다
        })

        fetch('http://localhost:5000/location',{ // localhost 서버 5000번 포트의 location에게 보낸다.
            method:"post",
            headers: { "Content-Type":  "application/json" },
            body: JSON.stringify(body),	// json화 해버리기
        })
        .then(res => res.json())    // 서버로부터 받음
        .then(json => {
            console.log('측정시간:'+json.list[0].dataTime);     //dataTime (측정시간) 콘솔 출력
            console.log('측정소:'+json.list[0].stationName);     //지역 콘솔 출력
            console.log('미세먼지:'+json.list[0].pm10Value);    //pm10Value 미세먼지 지수 콘솔출력
            console.log('초미세먼지:'+json.list[0].pm25Value);    //pm25Value 초미세먼지 지수 콘솔출력
            console.log('미세먼지등급:'+json.list[0].pm10Grade);    // 미세먼지 등급 콘솔출력
            console.log('초미세먼지등급:'+json.list[0].pm25Grade);    // 초미세먼지 등급 콘솔출력
            
            this.setState({
                dataTime:json.list[0].dataTime,
                stationName:json.list[0].stationName,
                pm10Value:json.list[0].pm10Value,
                pm25Value:json.list[0].pm25Value,
                pm10Grade:json.list[0].pm10Grade,
                pm25Grade:json.list[0].pm25Grade,
                circle:'none' // ◀◀◀◀ 데이터 받을꺼 다 받았으면 다시 'none'으로 초기화
            })

 

위와 같이 상황에 따라 필요한 시점에 circle값을 초기화 해주면 된다

 

 

 

 

 

결과: 버튼 누르면 빙글빙글 돌다가

 

 

 

데이터가 도착하면 circle이 없어진다 ! 

 

 

 

 

 

 

 

 

 

내 뇌피셜이기 때문에 정석이 아닐 수 있다