리액트네이티브 XML Parsing , React Native Xml Parsing

공공데이터 포털에서 제공하는 API를사용하여 날씨앱을 제작할려고 이것저것 알아보는중 XML 파싱에대해서 실습한 내용을 기록으로 남긴다. 

XMLDOM 라이브러리를 사용하였다. 

npm install xmldom   라이브러리를 설치한다. 

 공공데이터 포털에서 사용할 서비스는 대기오염정보 조회 서비스 이다. 해당 API를 사용하기 위해서 회원가입을 하고 서비스 신청을 선택해야된다. 

실제 테스트로 사용할 API는 시도별 실시간 측정정보 조회서비스이다. API 조회시 응답 데이터 포맷이 XML이다. 

미리보기 버튼을 선택시 해당 XML값이 리턴된다.

const API_KEY = "xSpkBj5Uf8pu8S%...."; //key는 ..처리함
const API_STEM = "http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";
var DOMParser = require('xmldom').DOMParser;
var SIDO = "경남";
function fetchData() {
    SIDO = encodeURIComponent(SIDO);
    var url = `${API_STEM}?serviceKey=${API_KEY}&numOfRows=10&pageNo=1&sidoName=${SIDO}&ver=1.3`;
    
    return fetch(url)
        .then(response => response.text())
        .then(data => {
            console.log(data);
            var xmlDoc = new DOMParser().parseFromString(data, 'text/xml');
            var x=xmlDoc.getElementsByTagName("item");
            
            for (var i=0;i<x.length;i++){
                console.log(x[i].childNodes);
                var nodeList = x[i].childNodes;
 
                for (var j=0; j<nodeList.length; j++) {
                    var item = nodeList[j];
                    
                    if (item.firstChild) {
                        console.log(item.nodeName +" : "+item.childNodes[0].nodeValue);
                    }
                }
            }
        
            return xmlDoc;
        })
        .catch(error => {
            console.log(error);
        });
}
export default { fetchData: fetchData};
 
 

[Data.js]

fetch함수내에 13라인에 DOMParser()를 생성한후 parseFromString 메서드를 사용하여 문자열을 XML로 파싱할 수 있게 변경한다. 

xml 구조상 <items> 하위에 <item>...</item> 앨리먼트로 존재한다. getElementsByTagName메서드로 다수의 item을 선택한후 childeNodes를 메서드를 이용하여 NodeList에 접근한다. NodeList내부에는 Element, Text 객체로 구성되어있는데, 이때 firstChild메서드를 이용하여 Elemente 내에 Node 속성에 접근하였다. XML 구조를 명확하게 보기위해서는 console.log() 함수를 이용하여 데이터 구조를 찍어보자.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Data from "./src/Data";
 
 
 
export default class App extends Component {
 
  
  componentDidMount() {
    Data.fetchData().then(data => {
      
    }); 
  }
 
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>        
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
 

[App.js]

App.js에는 componentDidMound() {..} 함수내에서 fetchData()함수를 호출하는 간단한 코드이다.

공공데이터 포털에서 제공하는 API는 https요청이 아닌 http요청이므로 

아래링크를 참조하여 http요청을 허용해야 한다.

http허용설정링크 참조  <== 클릭

참고

xmldom

xmldom예제

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

https://developer.mozilla.org/ko/docs/Web/API/Node/childNodes