아임포트 리액트 네이티브 모듈 분석

https://github.com/iamport/iamport-react-native

GitHub - iamport/iamport-react-native: React Native용 아임포트 일반.결제 및 휴대폰 본인인증 모듈입니다.

src/Home

• 본인인증 테스트 버튼 부분 코드

<Button
    m={'4%'}
    bgColor={'#fff'}
    borderRadius={3}
    flex={1}
    shadow={1}
    /* @ts-ignore */
    onPress={() => navigation.push('CertificationTest')}
>
    <Icon
      as={FontAwesome}
      name={'user'}
      textAlign={'center'}
      w={'100%'}
      mb={'6%'}
    />
    <Text>본인인증 테스트</Text>
</Button>

onPress -> navigation.push('CertificationTest') 이므로 버튼 누르면 src/CertificationTest 로 이동한다.

src/CertificationTest

여기서 merchant_uid, company, carrier, name, phone, min_age, tierCode 에 대한 값을 src/Certification 으로 보낸다. 

 <Button
    bgColor={'#344e81'}
    /* @ts-ignore */
    onPress={() => {
      const data: CertificationParams = {
        params: {
          merchant_uid: merchantUid,
          company,
          carrier,	/* KT, SKT, LG, 알뜰폰 */
          name,
          phone,
          min_age: minAge,
        },
        tierCode,
      };
      navigation.navigate('Certification', data);
    }}
  >

원래 제공되는 화면대로 아무것도 입력하지 않고 넘기면

data는 이렇게 넘어간다. 첫번째 줄은 통신사를 알뜰폰으로 설정했을 때, 두번째 줄은 SKT, 세번째 줄은 LGU+, 네번째 줄은 KT. 선택했을 때 carrier로 넘어가는 값들을 console.log(data)를 해서 확인했다.

 

이런 data 값을 src/Certification 으로 넘긴다.

 

src/Certification

src/Certification

IMP는 import IMP from 'iamport-react-native'; 로 가져오는데 이 IMP가 저 뷰와 폼을 가져와서 property 값으로 입력 받은 값을 넘긴다. userCode 는 테스트용일 경우 'imp10391932' 를 사용하면 된다. 

 

callback 으로 src/CertificationResult 로 response를 넘기고 src/CertificationResult 를 로딩한다.

 

src/CertificationResult

response 값으로 뭐가 넘어왔나 console.log 를 찍어봤다.