[React Native] API fetch + Opne API 사용하기 (async / await)

Inryu·2021년 3월 5일

openapi reactnative

Vegan V

목록 보기

3/3

github 😇

0. 무엇을 구현해야 하는가!?

react-native-camera-kit를 통해 바코드를 인식한 후, codeValue를 이용해 API fetch를 해야한다.

이때 흐름은

바코드 인식 후,
➡️ 바코드 연계제품정보 (open API)
➡️ 식품(첨가물) 보고제조보고(원재료) (open API)
➡️ is_vega API (node.js)

이렇게 된다.

open API는 식품의약품 안전처의 데이터 활용 서비스에서 찾아 이용했다.

https://www.foodsafetykorea.go.kr/apiMain.do

1. API 살피기

1. 바코드 연계제품 정보 open API

요청 인자 : BAR_CD (바코드번호)
출력 인자 : PRDLST_REPORT_NO (품목보고번호)

바코드 번호로 요청하여, 품목 보고 번호를 가져올 것이다.

2. 식품(첨가물)품목제조보고(원재료) open API

요청 인자 : PRDLST_REPORT_NO (품목보고번호)
출력 인자 : RAWMTRL_NM (원재료)

에서 가져온 품목보고번호로 요청하여, 원재료들을 가져올 것이다.

3. is_vegan API (백엔드)

API 코드

요청 인자 : 원재료
출력 인자 : is_vegan -> 1이면 비건 / 0이면 논비건

2. async / await를 이용하여 data fetch 하기

1->2->3 의 순서대로 API를 fetch해야 한다! (1의 리턴값이 2의 인풋값, 2의 리턴값이 3의 인풋값이 되는 구조이기 때문)

따라서 비동기 처리 방식인 async/await을 사용하였다.

DetectBarcode.js

바코드 번호 -> 품목 보고 번호

  //바코드 번호로 품목보고번호 얻기
  const getRepotNo = async () => {
    const response = await fetch(
      'http://openapi.foodsafetykorea.go.kr/api/' +
        key.openAPIkey +
        '/C005/json/1/5/BAR_CD=' +
        qrvalue,
      {
        method: 'GET',
      },
    );

    if (response.status === 200) {
      const responseJson = await response.json();
      return responseJson.C005.row[0];
    } else {
      return 0;
      // throw new Error('unable to get');
    }
  };

품목 보고 번호 -> 원재료 명

  //품목보고번호로 원재료명 얻기
  const getRawmt = async (reportnum) => {
    const response = await fetch(
      'http://openapi.foodsafetykorea.go.kr/api/' +
        key.openAPIkey +
        '/C002/json/1/5/PRDLST_REPORT_NO=' +
        reportnum,
      {
        method: 'GET',
      },
    );

    if (response.status === 200) {
      const responseJson = await response.json();
      console.log('==원재료 정보==');
      console.log(responseJson.C002.row[0].RAWMTRL_NM);
      return responseJson.C002.row[0].RAWMTRL_NM;
    } else {
      return 0;
      // throw new Error('unable to get');
    }
  };

원재료명 -> is_vegan

 //db fetch
  const getIsvegan = async (mtarr) => {
    const is_vegan_result = [];

    for (var i = 0; i < mtarr.length; i++) {
      const response = await fetch(
        'http://192.168.0.4:3000/isvegan?' +
          new URLSearchParams({
            rmt_name: mtarr[i],
          }),
        {
          method: 'GET',
        },
      );
      if (response.status === 200) {
        const responseJson = await response.json();
        // console.log(responseJson.data.retrievedData);
        // return responseJson.data.retrievedData;
        is_vegan_result.push(responseJson.data.retrievedData);
      } else {
        throw new Error('unable to get isvegan data');
      }
    }

    return is_vegan_result;
  };

바코드 값이 인식된 후 실행되는 함수 getdataFUll는 위의 3가지 프로미스들(fetch는 Promise방식)을 연결해준다.

  const getdataFUll = async () => {
    setLoading(true);
    const report_numdata = await getRepotNo();
    const report_num = report_numdata.PRDLST_REPORT_NO;
    const food_name = report_numdata.PRDLST_NM;
    const raw_mt = await getRawmt(report_num);
    // setRawmt(raw_mt);

    //쉼표 기준으로 잘라서 배열 만들기
    var mt = raw_mt.split(',');
    var mtarr = [];

    for (var i = 0; i < mt.length; i++) {
      mtarr.push(mt[i]);
    }

    const is_vegan_result = await getIsvegan(mtarr);

    var is_vegan_flag = 1; //비건

    for (var i = 0; i < is_vegan_result.length; i++) {
      if (is_vegan_result[i].is_vegan == 0) {
        is_vegan_flag = 0; //논비건 셋팅
        break;
      }
    }

    setLoading(false);
    navigation.navigate('BarcodeResult', {
      report_num: report_num,
      raw_mt: is_vegan_result,
      is_vegan_flag: is_vegan_flag,
      food_name: food_name,
    });
  };

이 때, getRawmt(report_num)에서 리턴한 원재료명 데이터는 쉼표로 연결 되어있어서 쉼표 기준으로 잘라 배열을 만든 후, getIsvegan(mtarr)로 넘긴다.
getIsvegan(mtarr) 내부에서는, 인자 배열 값 하나하나씩을 for문을 돌리면서 api fetch를 실행한다.

필요한 데이터들을 fetch 한 이후에, navigation에 params에 넣어 BarcodeResult 스크린으로 넘어간다.