결제완료후 완료 response까지 흰화면 지속되는 현상

[Eumhongin]

현재 다날 간편결제를 사용하고있고 테스트용으로 테스트도중 발생한 문제입니다.

package.json

"iamport-react-native": "^2.0.1",
"react": "18.0.0",
"react-native": "0.69.1",

response 를 받아올때까지 저희가 UI를 띄울수있도록 조치가 필요할거 같습니다.

경고문구는 아래와같이 옵니다.
Did not receive response to shouldStartLoad in time, defaulting to YES

매초 어떤 함수를 부르고있는거같은데 IMP.Payment 컴포넌트의 프로퍼티 type에서는 안잡히네요

어떻게하면될까요? 결제완료 전까지 하얀화면이 너무 오래나옵니다 2~3초정도

[anymate98]

response를 받아온다는 것이 어떠한 과정에 해당되나요?
결제창을 띄우는 과정일까요? 아니면 결제가 끝나는 과정인가요?
전자의 경우 만약 로딩 과정에 ui가 필요하다면 loading 파라미터에 띄우고 싶은 컴포넌트를 직접 구현해서 삽입하시면 됩니다.

[Eumhongin]

loading 프로퍼티엔 이미 로딩을 하는 컴포넌트를 할당하였습니다!

분석해본결과 결제완료 callback을 호출하였지만 위와같은 warning이 뜨면서 웹뷰에 렉이걸리는듯합니다.

callback이후 IMP.Payment 컴포넌트를 없애고 커스텀 로딩을 화면 전체에 띄웠더니 해결되었습니다.

return isPaymentComplete ? (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <View
        style={{
          paddingBottom: 52,
        }}>
        {/* Your Custom Loading, 저의경우에는 Lottie를 사용하였습니다. */}
      </View>
    </View>
  ) : (
    <View
      style={{
        justifyContent: 'center',
        flex: 1,
      }}>
      <IMP.Payment
        userCode={IMP_USER_CODE}
        loading={<Loading />}
        data={payment}
        callback={onPaymentComplete}
      />
    </View>
  );

isPaymentComplete 없이 단순히 결제모듈만 넣고 callback을 기다릴경우 해당 warning이 발생합니다.

발생 경로

1. 결제
2. 결제완료 Callback수신받음
3. warning초당 1회씩 찍힘
4. 56~60회이후 callback의 마지막에있는 navigation호출되어 결과화면으로 이동

@anymate98 감사합니다.

[anymate98]

결제 뒤에 반응이 느린 현상은 아직까지 확인된 적이 없는 것으로 기억하는데 한번 확인해보겠습니다.
또한 현상에 대한 해결책을 제시해주셔서 감사합니다.

[Eumhongin]

다른 이슈있으면 또 리포트하겠습니다 :)

늘 항상 감사합니다

[Eumhongin]

+) 추가적인 이슈 리포트합니당

onPaymentComplete내에 async/await 구문이 사용이되면 해당 경고가 활성화되는것을 확인하였습니다.

Container파일

const onPaymentComplete = useCallback(
    async (res) => {
      
      setIsPaymentComplete(true); // 경고 발생하지않고 딜레이없지만 서버로 데이터전송오류시 예외처리 할수없음

      const responseFromServer = await requestPost(url, body);      
      // after process
      setIsPaymentComplete(true); // �서버로 데이터를 보내는 작업을 끝내고 IMP.Payment를 unmount할시 경고 발생함.
    },
    [],
  );

View파일

return isPaymentComplete ? (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <View
        style={{
          paddingBottom: 52,
        }}>
        {/* Your Custom Loading, 저의경우에는 Lottie를 사용하였습니다. */}
      </View>
    </View>
  ) : (
    <View
      style={{
        justifyContent: 'center',
        flex: 1,
      }}>
      <IMP.Payment
        userCode={IMP_USER_CODE}
        loading={<Loading />}
        data={payment}
        callback={onPaymentComplete}
      />
    </View>
  );

setIsPaymentComplete는 IMP.Payment 컴포넌트를 해제하여 경고를 회피하기위한 장치입니다. true시 IMP.Payment를 언마운트합니다

async/await에 의존성이 있는것처럼 보이는데 혹시 어떤 이유일까요??
@anymate98

[anymate98]

callback 파라미터가 결제가 끝난 후(웹뷰를 다 사용한 후)에 전달되는 구조기 때문에 Promise를 사용해 구현되었습니다. 아마 이 부분에서 의존성이 생기는 것으로 파악이 됩니다.

[Eumhongin]

넵 감사합니다 @anymate98