RNCWKWebview 에러 발생
React-Native(이하 RN)으로 어플리케이션을 개발중인데, 갈수록 두서가 없어지고 에러의 늪으로 빠져가는것만 같다.
목표에서 벗어나지 않게 잘 잡아야겠다. 이 에러 처리하느라고 쓴 시간이 꽤 길다보니 정신사나워서 아주 힘들었다..
---
본론으로 들어가서, 설명조로 얘기합니다.
환경은 다음과 같습니다.
- react : 16.8.3
- react-native : 0.59.5
- react-native-webview : 3.9.1
- expo : 사용 안함
에러이미지는 다음과 같습니다.
RNCWKWebView를 UIManager에서 찾을수가 없다는 메세지. 이 메세지가 뜬 이유는 제가 RN에서 웹뷰를 띄우려고 하니까 나타났습니다. 당최 이게 뭐냐.. 나는 당연히 링크누르면 웹뷰 나올줄알았지.. 다른 어플에서처럼 ( ㅡ.ㅡ.. ) 그치만 아니었고.. 위와 같은 에러가 떠서 잽싸게 구글링을 했습니다. 그렇지만 제가 찾은 것은 수많은 영어문서들..이었습니다.
하지만 링크를 눌렀을 때 웹이 나타나야 하기 때문에, 웹뷰를 꼭 띄워야 하는 상황이었고, 이 에러를 해결할수밖에 없었습니다.
이제 본론으로 들어가서,
이 에러가 발생한 이유는, RN에서 WebView 컴포넌트가 분리되었기 때문입니다. RN 홈페이지(링크)에서 보면, WebView는 React Native Core에서 제거될 것이다 라고 되어있고, 분리가 되었습니다. 그래서 react-native 패키지에서 사용하면 저런 에러가 나타납니다.
Core에서 제거되었기 때문에, 이 react-native-webview는 외부에서 관리되며 github에 소스가 올라가있습니다. (github 주소) 당연히 npm에도 올라가있고 package.json에 추가하여 패키지를 다운로드 받을 수 있습니다.
하지만 문제가 또 있는데, package.json에 webview를 추가한다 해서 바로 사용할 수 없다는 것입니다.
(정확한 이유는 아직 찾지 못했습니다) - 여기서 package.json에 webview를 추가만 했을 뿐, 네이티브 코드와 연결을 시켜줘야하기 때문인 것 같습니다. react-native를 expo 없이 시작하게되면, ios와 android폴더가 자동으로 생기는걸 볼 수 있습니다.(expo로 시작하게되면 eject를 해줘야 네이티브(ios, android) 폴더가 생깁니다).
여기서 생각해볼 수 있는 점은, package.json에 추가하여 다운로드받은 패키지는 단순히 '다운로드'만 받는 것일뿐, 네이티브 코드와 연결이 되어있지 않다. 그렇기 때문에 link 명령어를 통해 네이티브 코드에서 사용할 수 있도록 연결을 시켜줘야 한다는 것입니다.
그래서 npm, yarn 등으로 추가한 webview를 네이티브 코드와 연결시키기 위해 아래와 같은 명령어를 RN 폴더상에서 입력합니다.
react-native link react-native-webview
이렇게 하면 잠깐 시간이 지나고 연결이 되었다는 로그가 찍힙니다.
이렇게 하고 나서 다시 실행해보면 위에 에러가 사라지고 정상적으로 webview가 작동하는 것을 볼 수 있을 것입니다!!
-----------------------------------------------------
추가, 만약 link가 제대로 작동하지 않을 경우(ios만 해당)
link 작업 후 webview가 제대로 작동하면 정말 다행이지만, 안되는 경우도 있습니다. 저도 그런 적이 있었는데, 이 link 작업이 제대로 되지 않는 경우에 할 수 있는 방법은, ios폴더의 이름을 변경하고 link 작업을 하는 것입니다.
ios에서만 link 작업이 제대로 되지 않는 이유가 뭔지 잘 모르겠습니다만.. ios폴더의 이름이 문제가 되는건 확실한듯..
ios폴더의 이름을 'iosX' 등으로 바꾼 후 link 명령어를 실행한 후, 다시 폴더명을 ios로 바꿉니다. 그리고 run-ios.
이렇게 하면 웹뷰가 제대로 동작하는 것을 볼 수 있습니다.
------------------------------------------------------------------------------
그리고 하나 참고할 것은, link 작업이 제대로 진행됐다면, ios같은경우 ios폴더에서 .xcodeproj - xcode 프로젝트 파일을 실행하여 ios에 라이브러리가 제대로 추가되었을 것입니다.
아래그림 참조(빨간색 별표 보면 Libaries 부분)
저는 이렇게 해결이 되었는데, 워낙 변수가 많은 부분이라.. 이렇게 해도 해결이 되지 않는 경우들이 있을 것 같습니다.
혹시 webview에 대해서 궁금하신 분들은 여기를 참고해보셔용 webview에 대한 설명입니다.
WKWebView가 원래 이름이고, RNWKWebView란 이름은 앞에 'RN'이 추가된 것 뿐이며, 결국은 WKWebView입니다.
이럴때 영어실력이 되신다면 RN github에 이슈를 직접 올리시는것을 추천드리며, github에 이미 이 에러를 포함한 다른 수많은 에러들이 올라오고 해결되어있으니 직접 구글링 하시는 것을 추천드립니다.!!
이 문제가 해결되기를 정말 간절히 바랍니다..
문제가 있거나 내용에 대한 질문은 댓글 남겨주세요 감사합니다 태클도 환영입니다.!
목표에서 벗어나지 않게 잘 잡아야겠다. 이 에러 처리하느라고 쓴 시간이 꽤 길다보니 정신사나워서 아주 힘들었다..
---
본론으로 들어가서, 설명조로 얘기합니다.
환경은 다음과 같습니다.
- react : 16.8.3
- react-native : 0.59.5
- react-native-webview : 3.9.1
- expo : 사용 안함
에러이미지는 다음과 같습니다.
RNCWKWebView를 UIManager에서 찾을수가 없다는 메세지. 이 메세지가 뜬 이유는 제가 RN에서 웹뷰를 띄우려고 하니까 나타났습니다. 당최 이게 뭐냐.. 나는 당연히 링크누르면 웹뷰 나올줄알았지.. 다른 어플에서처럼 ( ㅡ.ㅡ.. ) 그치만 아니었고.. 위와 같은 에러가 떠서 잽싸게 구글링을 했습니다. 그렇지만 제가 찾은 것은 수많은 영어문서들..이었습니다.
하지만 링크를 눌렀을 때 웹이 나타나야 하기 때문에, 웹뷰를 꼭 띄워야 하는 상황이었고, 이 에러를 해결할수밖에 없었습니다.
이제 본론으로 들어가서,
이 에러가 발생한 이유는, RN에서 WebView 컴포넌트가 분리되었기 때문입니다. RN 홈페이지(링크)에서 보면, WebView는 React Native Core에서 제거될 것이다 라고 되어있고, 분리가 되었습니다. 그래서 react-native 패키지에서 사용하면 저런 에러가 나타납니다.
Core에서 제거되었기 때문에, 이 react-native-webview는 외부에서 관리되며 github에 소스가 올라가있습니다. (github 주소) 당연히 npm에도 올라가있고 package.json에 추가하여 패키지를 다운로드 받을 수 있습니다.
하지만 문제가 또 있는데, package.json에 webview를 추가한다 해서 바로 사용할 수 없다는 것입니다.
(정확한 이유는 아직 찾지 못했습니다) - 여기서 package.json에 webview를 추가만 했을 뿐, 네이티브 코드와 연결을 시켜줘야하기 때문인 것 같습니다. react-native를 expo 없이 시작하게되면, ios와 android폴더가 자동으로 생기는걸 볼 수 있습니다.(expo로 시작하게되면 eject를 해줘야 네이티브(ios, android) 폴더가 생깁니다).
여기서 생각해볼 수 있는 점은, package.json에 추가하여 다운로드받은 패키지는 단순히 '다운로드'만 받는 것일뿐, 네이티브 코드와 연결이 되어있지 않다. 그렇기 때문에 link 명령어를 통해 네이티브 코드에서 사용할 수 있도록 연결을 시켜줘야 한다는 것입니다.
그래서 npm, yarn 등으로 추가한 webview를 네이티브 코드와 연결시키기 위해 아래와 같은 명령어를 RN 폴더상에서 입력합니다.
react-native link react-native-webview
이렇게 하면 잠깐 시간이 지나고 연결이 되었다는 로그가 찍힙니다.
이렇게 하고 나서 다시 실행해보면 위에 에러가 사라지고 정상적으로 webview가 작동하는 것을 볼 수 있을 것입니다!!
-----------------------------------------------------
추가, 만약 link가 제대로 작동하지 않을 경우(ios만 해당)
link 작업 후 webview가 제대로 작동하면 정말 다행이지만, 안되는 경우도 있습니다. 저도 그런 적이 있었는데, 이 link 작업이 제대로 되지 않는 경우에 할 수 있는 방법은, ios폴더의 이름을 변경하고 link 작업을 하는 것입니다.
ios에서만 link 작업이 제대로 되지 않는 이유가 뭔지 잘 모르겠습니다만.. ios폴더의 이름이 문제가 되는건 확실한듯..
ios폴더의 이름을 'iosX' 등으로 바꾼 후 link 명령어를 실행한 후, 다시 폴더명을 ios로 바꿉니다. 그리고 run-ios.
이렇게 하면 웹뷰가 제대로 동작하는 것을 볼 수 있습니다.
------------------------------------------------------------------------------
그리고 하나 참고할 것은, link 작업이 제대로 진행됐다면, ios같은경우 ios폴더에서 .xcodeproj - xcode 프로젝트 파일을 실행하여 ios에 라이브러리가 제대로 추가되었을 것입니다.
아래그림 참조(빨간색 별표 보면 Libaries 부분)
저는 이렇게 해결이 되었는데, 워낙 변수가 많은 부분이라.. 이렇게 해도 해결이 되지 않는 경우들이 있을 것 같습니다.
혹시 webview에 대해서 궁금하신 분들은 여기를 참고해보셔용 webview에 대한 설명입니다.
WKWebView가 원래 이름이고, RNWKWebView란 이름은 앞에 'RN'이 추가된 것 뿐이며, 결국은 WKWebView입니다.
이럴때 영어실력이 되신다면 RN github에 이슈를 직접 올리시는것을 추천드리며, github에 이미 이 에러를 포함한 다른 수많은 에러들이 올라오고 해결되어있으니 직접 구글링 하시는 것을 추천드립니다.!!
이 문제가 해결되기를 정말 간절히 바랍니다..
문제가 있거나 내용에 대한 질문은 댓글 남겨주세요 감사합니다 태클도 환영입니다.!
댓글
댓글 쓰기