[React Native] JSONP 파싱 (도로명주소 API)

http://www.juso.go.kr/addrlink/devAddrLinkRequestGuide.do?menu=roadApi

의 주소 검색 API를 연동하려고하는데, 자꾸 JSON 파싱이 안돼서 엄청 헤맸다.

예제 중,

/*
 파일명 : apiSampleJSON.jsp
 내  용 : 웹 ↔ 도로명주소 검색API 방식(검색결과형식 JSON)
 비  고 : 크로스도메인으로 인한 jsonp 이용, 검색결과형식 JSON 추가(2016.10.14)
           검색결과형식을 XML로 받는 경우, 웹 호출 소스보기(XML)을 참고하시길 바랍니다. 
*/

라는 주석을 보고 JSONP 파싱으로 구글링 한 결과

https://stackoverflow.com/questions/41146650/get-json-from-jsonp-fetch-promise의 글을 보게되었다.

일반적인 JSON의 경우 형식이
{

      key: value

}

라면 이 API의 응답은

({"results":{"common":{"errorMessage":"정상","countPerPage":"10","totalCount":"336","errorCode":"0","currentPage":"1"}, ...

}) 

로 양 끝에 ( ) 가 추가되어있었다.

따라서 먼저 text로 받아서 ( ) 안의 data만 추출해서 파싱해야 했다

 requestAddress() {
        fetch('url')
            .then((response) => response.text())
            .then((responseText) => {
                Alert.alert("res", responseText);
                const match = responseText.match(/\((.*)\)/); // 정규식은 JSONP응답에 따라 달라질 수 있음. 이 경우 ( 응답 )이고 match는 ( ) 를 포함한 전체 응답과 () 내부의 데이터가 배열 형태로 출력됨 
                if(match==null) Alert.alert("Message", "null");
                Alert.alert("1", match[0].toString()); 
                Alert.alert("2", match[1].toString());

                let jsonResult =  JSON.parse(match[1].toString()); // ( ) 를 뗀 진짜 json 형태의 데이터를 파싱하고
                let jusoArray=  jsonResult.results.juso; // juso 속성도 array 형태이기 때문에 또 받아주고,
                Alert.alert("result", jsonResult.results.juso.toString());
                Alert.alert("juso", JSON.stringify(jsonResult));//이건 확인용 
                Alert.alert("real data", jusoArray[0].detBdNmList);// juso 배열읭 첫번째 데이터의 detBdNmList 속성 값을 출력해주었다.
            })
            .catch((error) => {
                console.error(error);
            });

    }

자료도 너무 없고 JSONP 이 처음엔 JSON 의 오타인줄 알고 그냥 넘겼던게 화근이었다. 아직 리액트네이티브는 갈길이 먼듯!