xml 데이터를 받는법에 대한 질문이 있습니다

안녕하세요
개발 관련해서 지식이 별로 없지만 한번 앱같은거 만들어보고 싶어서
react native를 통해서 버스앱을 한번 만들어보려고 합니다
자바 스크립트는 배운적이 없어서 인터넷을 참고하면서 만들고 있는데
인터넷에 날씨앱 만드는 관련 정보가 있어서 그거 보면서 하고 있습니다.
api를 통해 xml 정보를 읽어오는 함수를 만들고 있는데
인터넷에 xmlDoc관련 내용을 따라하다보니
xml에 있는 모든 정보를 읽어오는게 아닌
하나의 정보만 읽어오네요
console.log(xmlDoc.getElementsByTagName(“stationId”)[0].childNodes[0].nodeValue);
이부분에서 .childNodes 앞에 있는 [0]의 숫자위치에 있는 stationId를 읽어오는것 같은데
xml에 있는 모든 stationId를 읽어들이고 싶은데 어떻게 하면 될까요?
아는게 없어서 찾아서만 하니까 좀 힘드네요 ㅠㅠ

아래는 여태까지 작성한 App.js의 코드 내용입니다.

import React, { Component } from ‘react’;
import {Alert, TextInput, StyleSheet, View, Text, Button} from “react-native”;
import { render } from ‘react-dom’;
import Loading from “./Loading”;
import * as Location from “expo-location”;
import axios from “axios”;
window.DOMParser = require(‘xmldom’).DOMParser;

const API_KEY = " ";

export default class extends React.Component {
state = {
isLoading: true,
}

getBusStationAroundList = async (latitude, longitude) => {
var Url = http://apis.data.go.kr/6410000/busstationservice/getBusStationAroundList?serviceKey=${API_KEY}&x=${longitude}&y=${latitude}

const { data } = await axios.get(Url);
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(data);
console.log(xmlDoc.getElementsByTagName("stationId")[0].childNodes[0].nodeValue);

}

getLocation = async () => {
try {
await Location.requestForegroundPermissionsAsync();
const {
coords: { latitude, longitude }
} = await Location.getCurrentPositionAsync();
this.getBusStationAroundList(latitude, longitude);
this.setState({ isLoading: false });
} catch (error) {
Alert.alert(“사용자의 위치를 찾을 수 없습니다”);
}
}

componentDidMount() {
this.getLocation();
}

render() {
const { isLoading } = this.state;
return isLoading ? : null;
}
};

일단 우선 새로 만드시는거면 class형으로 개발하지 마시고 함수형으로 개발하시는게 좋습니다 그래야 facebook에서 권장하는 reactHook을 사용할 수 있습니다.
질문해주신 문제는 xml데이터를 setState로 저장해주시고 state로 불러오신다음 맵핑하시면 정상적으로 콘솔로그가 찍힙니다.