[RN 프로젝트] #7 리액트네이티브 fetch + KOPIS 공연 API 가져오기, XML to JSON (React-native-xml2js)

💡구현 목표

앱 메인 화면에 당월의 뮤지컬 포스터를 슬라이더로 출력하기!

 

1. KOPIS 공연 API 인증키 발급

아래 링크에서 인증키를 발급하고 OPEN API의 자세한 항목을 확인할 수 있다.

https://www.kopis.or.kr/por/cs/openapi/openApiList.do?menuId=MNU_00074 

공연예술통합전산망

 

2.  리액트 네이티브 fetch + KOPIS 공연 API 가져오기

Fetch란?

• 리액트네이티브에서 네트워크 통신을 도와주는 api (fetch와 axios가 있음.)
• axios와 달리 라이브러리를 import하지 않아도 사용할 수 있다.
• Promise based
• 네트워크 에러 발생 시 계속 기다려야함. -> response timeout API 제공 X
• 지원하지 않는 브라우저가 있다.
• fetch는 promise 자체를 반환하므로 json으로 변환해야 함. body로 json.stringify()를 통해 문자열 파싱해야함.

OAuth2.js 파일에 각종 시크릿키를 보관하고 (KOPIS 서비스키, 카카오, 네이버 등)

export const SERVICE_KEY = '서비스키';

export const kopisURL = 'https://www.kopis.or.kr/openApi/restful';

export const kopisImgURL = 'https://www.kopis.or.kr';

 

이런 식으로 구현!! 여기서

catecode=GGGA&area=11 은 장르 뮤지컬만, 지역 서울만 이라는 뜻이다. 자세한 항목은 위에 첨부한 KOPIS 사이트에서 확인 가능!

// 메인 화면 포스터 슬라이더
export const getMonthMusical = () =>
    fetch(
        `${kopisURL}/boxoffice?service=${SERVICE_KEY}&ststype=month&date=${getDateString()}&catecode=GGGA&area=11`
    )
        .then((res) => res.text())
        .then((data) => xmlToJson(data))
        .catch((error) => console.log(error));

// 뮤지컬 상세 정보
export const getMusicalData = (params) => {
    const [_, musicalId] = params.queryKey;
    return fetch(`${kopisURL}/pblprfr/${musicalId}?service=${SERVICE_KEY}`)
        .then((res) => res.text())
        .then((data) => xmlToJson(data))
        .catch((error) => console.log(error));
}

 

3. XML to JSON (React-native-xml2js)

위의 주소로 조회해 보면 아래와 같은 데이터가 xml 형식으로 나온다.

 

이걸 JSON으로 바꾸기 위해 xml2js 라이브러리를 사용해야 한다.

const parseString = require('react-native-xml2js').parseString;

//xml to JSON
export const xmlToJson = (xmlData) => {
    const cString = xmlData.replace('\ufeff', '');
    let jsonData;

    parseString(cString, (err, result) => {
        if(err !== null) {
            console.log('error:', err);
            return;
        }
        jsonData = JSON.parse(JSON.stringify(result));
    });
    return jsonData;
};

 

4. 앱 메인 화면에 포스터 슬라이더

먼저 월간 뮤지컬 포스터를 슬라이더로 구현하기 위핸 MonthMusicalList 컴포넌트를 작성하고

메인 화면(MainScreen.js)에 이런 식으로 작성.

 

5. 결과물!