[react-native] EXPO로 시작해보기 15 - API 연동해 결과 가져와 출력하기

json으로 반환되는 API를 이용해서 

해당 결과를 적용해 컴포넌트를 출력.. 

 

 

파라미터 값이 있을 때 해당 컴포넌트를 출력하도록 한다. 

...

export default class App extends React.Component {

	render(){
    	return(
        	...
            {this.state.param == null ? null : <AvgWeather param={this.state.param} />}
            
            ....
        )
    }
}

....

 

 

파라미터 값을 가지고 해당 컴포넌트를 생성하며 API값을 가져온다.

import ......
//필요한 내용 import

export default class ComponenetName extends React.Component {

state = {
	apiResult : []
}
	    componentWillMount(){
        //컴포넌트가 생성될때 render()함수가 실행되기 전에 실행되는 함수 
        axios
            .get(`API주소?파라미터명=${this.props.param}`) // json형태로 반환해주는 API 전달받은 값을 이용해 파라미터로 넘겨줌
            .then(result => {
              const arrayList=[]; //결과값을 받아올 배열
              if (result.data && Array.isArray(result.data)) {
                result.data.forEach(el => { // 결과 수 만큼 반복
                  arrayList.push({ // arrayList에 결과의 원하는 부분을 저장 
                    name: el.name,
                    number: el.number,
                    text: el.text,
                  });
                }); 
              }
              this.setState({
                apiResult: arrayList, // state에 저장 
              });
            })
            .catch(error => { //오류발생시 콘솔에 출력 
              console.log(error);
            });
      }
      
      render(){
      	return(
        <View>
              {this.state.apiResult.map((el, index) => { 
              // state에 저장했던 apiResult를 이용해 map으로 반복해서 출력 
                  return (<View style={styles.style1} key={index}>
                  //반복출력하는 부분에 구분을 위해 key 값을 준다. 
                      <Text style={styles.name}>{el.name}</Text>
                      <Text style={styles.number}>{el.number}</Text>
                      <Text style={styles.text}>{el.text}</Text>
                      //해당 결과를 가져와 출력한다. 
                  </View>);
              })}
        </View>
        )
      }
}


const styles = StyleSheet.create({
	...
    
})