[알게된 것] React Native WebView 나이스 인증

😀문제상황

IOS 환경에서 보안 정책의 이유로 WebView를 통한 나이스 팝업창이 보이지 않음

정확히는 흰 화면만 노출됨

😁해결방법

jsp를 통해 팝업을 띄우는 방법이 아닌, 나이스 인증에 필요한 소스를 jsp의 ReactNativeWebView.postMessage 메서드를 통해 전달받음

function fnPopup(){
    if (window.ReactNativeWebView) {
        // RN에서 데이터는 반드시 문자열로 받을 수 있기 때문에
        // JSON.stringify를 사용합니다.
        window.ReactNativeWebView.postMessage("key:<%= sEncData %>");
    } else {
        alert("관리자에게 문의 해주세요.");
    }
}

이후 react의 state에 해당 데이터를 담아 WebView를 다음과 같이 정의함

 <WebView
    key={encodeData}
    source={
        encodeData
        ? {
            uri: 'https://nice.checkplus.co.kr/CheckPlusSafeModel/checkplus.cb',
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: `m=checkplusService&EncodeData=${encodeData}`,
          }
        : {uri: '{나이스 인증 정보를 전달받을 페이지 주소}'}
        }

state를 key로 정의하는것이 매우 중요하다. 상태가 담기며 화면을 나이스 주소로 리렌더링 해야하기 때문