ReactNative: 기존 네이티브 프로젝트에 이식하기 (+native 메소드 호출)


(글 작성한 시점의 최신 ReactNative ver: 0.41)


 1. What I want to do


내가 원한건 이런 화면이다.

전체적으로 Android 네이티브 코드로 제작되어있는데, (Toolbar나 DraweLayout 등...)
   ① 기본적인 메뉴들은 네이티브 화면이 보여지지만
   ② 특정 메뉴는 ReactNative로 코딩된 화면 노출
   ③ 어떤 화면에서는 아예 혼합되어있어야 하고 
   ④ 아예 ReactNative로만 된 activity도 2 dept로 호출할 수 있는 앱
   + 그리고 각 ReactNative 화면에서도 자유롭게 네이티브의 메소드들을 호출할 수 있게끔.


▼ gif로 보자면 대충 이런식으로 흐른다 . (연두색은 네이티브 / 하늘색은 ReactNative)

 





2. What I should do
  1. 일단 일반적인 방법으로 AndroidStudio에서 새로운 프로젝트를 생성해준다.
  2. 네이티브 코드로 대충 뼈대를 잡아준다. DrawerLayout, SlidingTab 등등..
  3. ReactNative 사용 가능 환경 설정을 해준다. (Integration With Existing Apps) package.json, index.android.js 만들고 gradle 설정 작업 등을 한다. 
  4. ReactNative를 보여줄 부분에 ReactRootView를 사용하여 dynamically adding 해준다. 대충 이런식으로.. 이 부분은 위에 링크한 공식 문서를 참고해 충분히 응용 가능하다.
  5. ReactNative에서 네이티브 내의 메소드들을 호출하기 위해 모듈을 생성한다. ReactContextBaseJavaModule를 오버라이딩 받아야하며, getName()에서의 리턴값은 ReactNative에서 import 시 명시할 모듈이름이기 때문에 유의해서 짓는다. 그리고 @ReactMethod 어노테이션과 함께 원하는 메소드들을 생성해주면 된다. 이 어노테이션이 달린 메소드들은 ReactNative에서 호출이 가능하다.
  6. 모듈들을 패키지로 묶어준다. ReactPackage를 상속받아서 createNativeModules 안에서 모듈들을 add() 해주면 된다. 나머지 메소드들에서는 필요한게 아니라면 일단  Collections.emptyList() 들을 리턴해주면 된다.
  7. 만든 모듈을 사용하려면 4번의 ReactRootView를 사용한 곳에서 필수로 .addPacakge() 해주어야 한다. 아래 코드로 보면 6번 라인이 신규로 추가된 라인이다.
  8. 사용할 때는 별도 작업 없이 import 만 잘 명시해주면 NativeModules.모듈명.메소드명();로 쉽게 사용 가능하다. 모듈을 사용하기 위해서 기존 코드에서 2줄만 업데이트했다. 하기 코드에서는 12번라인의 import문과 16번라인의 사용문.





3. Fixed error

64비트 라이브러리 이슈, 컴파일 에러, 런타임 에러 등등 많았지만..

일단 ReactNative에서 네이티브 메소드들을 호출하기 위한 작업 과정에서 발생했던 이슈는 크게 2가지다. (물론 둘 다 해결하고 나니 부끄러운 이슈들이었다...ㅎㅎ...)

  1. undefined is not an object (evaluating...): js에서 모듈을 못 찾는 이슈 
    가이드 문서를 보면 사실 getPackages()를 Appication에 추가하라고 한다. 그러나 나 같은 경우 ReactRootView를 사용하여 ReactInstanceManager를 수동으로 설정하므로 ReactInstanceManager 생성하는 부분에 추가 작업을 해줘야 한다. (앞에서의 7번 step) 뭐 물론 .setApplication() 하는 부분에 해당 Appication을 명시해주는 것도 해결방법일듯 하다.
  2. 모듈 안에서 (네이티브 메소드) getCurrentActivity() 가 null로 반환되는 이슈
    ReactInstanceManager.onHostResume()에서 파라미터로 activity를 넣어주기 때문에 이 부분이 꼭 되어있어야 한다. 나 같은 경우는 onResume()에 onHostResume()하는 부분은 들어가있었지만, ReactInstanceManager가 애초에  onResume() 이후로 생성하도록 코딩이 되어있어서 (사용시에 생성하도록.. 즉, 메뉴 이동이 일어나야 생성한다.) onResume()에서 ReactInstanceManager가 null인 까닭에 onHostResume()가 제대로 불리지 않아서 activity가 셋팅되지 않았었다.





마치며

다른 회사와 협업을 하는 과정에서 우리가 전체적인 틀을 만들고 특정 메뉴들만 협력업체가 개발을 하게 되었었는데, 협력업체가 본인들 화면을 ReactNative로 개발하겠다는 것이 해당 테스트 앱을 만들게 된 계기였다. (우린 네이티브 코드로 개발을 하는 상황)

아마 이런식으로 화면을 붙이고 ReactNative에서도 자유롭게 네이티브 메소드들을 호출할 수 있도록 설정하면, ReactNative의 서드파티 브릿지 개발 한계 이슈라던지 하는 문제점들이 어느 정도 커버 가능할 것으로 보인다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

5년차의 슬럼프

이미지
2-3년 전까지만해도 꿈을 이뤘다고 생각했다. 매 해 더 어렵고 까다로운 일들을 맡게되고, 또 그것을 잘 해내면서 인정을 받을 때 마다 내가 성장하고 있다고 믿었다. 내가 성장할 때마다 인정을 받았고, 인정 받을 때마다 난 성장했다. 쌓이는 신뢰도와 높은 인사평가의 점수가 곧 나의 자질이며 실력이라고도 생각했다. 내 목표의식은 항상 successful result에 있었기 때문에 그에 따르는 성취감과 업무 만족도는 비례했으며, 따라서 회사의 발전이 곧 나의 발전이었다. 덕분에 프로젝트들을 주도할 기회가 점차 많이 주어지게 되었고, 그 과정 속에서 솔직히 만족스러웠다기보단 회사의 비전을 고민하게 되는 계기가 되었다. 두세개의 프로젝트를 병행하면서도 나은 결과를 위해 신체적으로나 심리적으로 많이 무리했었고, 물리적으로 불가능한 일정을 해보겠다고 사무실에 남아 새벽까지 일하다보면 어떤 날들에는 막역한 부담감이 너무 무거워 하염없이 눈물이 나기도 했다. 같이 일하는 팀원들은 다들 이미 힘들고 지친 나머지 프로젝트의 완성도를 높이는 작업에는 여력이 없는 모습들을 보며, 나도 점차 지쳐갔다. 내 열성을 다른 사람에게까지 강요할 수는 없는 노릇이었으니까. 개발 과정에서 아무리 time complexity와 design에 대해서 이야기해도, 반론을 제기하며 논쟁 했던 사람이 없다. 심지어 이미 개발을 다 끝낸 코드에 이슈를 제기했을 때도 상대방은 바로 수긍하며 다시 짜겠다고했다. 이상하게도 그 모습을 보며 화가 났다. 고민하지 않고 작성한 덕분에 쉽게 지워버릴 수 있는, 자존감이 없는 코드에 화가 났고, 그렇게 짜올 동안 누가 지적 한번 해준 적 없다는 상황이 화가 났다. 무엇보다 더 나은 방법이 있는지 찾아보지 않고 내 말 곧이 곧대로 수정하는 모습이 결국 등을 돌리는 계기가 되었다. 내게 필요했던건 워라밸도, 높은 연봉도 아니라 최소한 나와 비슷한 열정을 가진 사람들이었다. 내가 더 이상 이 회사에 남아 있어야 할 이유가 없었다. 남아서 더 배워야할 우리
자세한 내용 보기

10대 여고생이 만난 프로그래밍 - 마이크로소프트웨어 31주년 컨퍼런스

이미지
마이크로소프트웨어 31주년 컨퍼런스에서 "10대 여고생이 만난 프로그래밍"이라는 주제로 컨퍼런스를 진행했다.  내가 어떻게 프로그래밍을 시작하게 되었는지, 그리고 어떤 노력을 했었는지와 프로그래밍을 향한 나의 열정(?)에 대해 했다. 발표하는 동안 많은 분들이 내 이야기를 경청해주고 공감해주셔서 그래도 끝에 가선 긴장이 많이 풀린 것 같다ㅠㅠ 많이 긴장했었고 또 많이 미숙했었지만 나를 주제로 한 이야를 누군가 앞에서 이야기할 수 있어 좋았고, 더군다나 다른 발표자분들이 정말 대단하신 분들로만 모여있어서 이 자리에 섰다는 것 자체가 황송할 따름이었다...ㅎㅎ 관련 링크 :  http://onoffmix.com/event/34936
자세한 내용 보기

About Me

S tella Kim (a.k.a. Cowkite) T wenty two years old (was born 1996) K orean C hristian F emale P rogrammer S nowboarding N o excessive, No achieve H ope to developing every beautiful things '어떠한 사람이 되어야지', '이런 길을 걸어야지' 하며 늘 거창한 뜻을 품고선, 그 모든 포부를 뜨거운 냄비안에 우겨넣고는 마냥 진취적으로만 꿈을 꿨었다. 그러나 내 작은 냄비 안에 담긴 꿈들은 늘 금새 넘쳐 흘러 버렸고, 뜨거웠던 만큼 또 금방 식기도 했다. 모든 사람은 일면적이기만 할 수 없다. 난 개발을 좋아하고 또 개발자이며 더 위대한 개발자가 되고 싶지만, 사실 그림 그리는 것이나 피아노 치는 것도 좋아하고 보드 타는 것을 즐기며 누군가를, 혹은 무엇을 사랑하게 될 때에 진정 내가 살아있으며 행복함을 느낀다. 내가 학생일 때 누군가가 나에게 꿈을 묻는다면 늘 주저 없이 'easily customizable platform developer'라고 대답을 했지만, 이제는 플랫폼 개발자보단 세상의 모든 아름다운 것들을 개발하는 개발자가 되고싶다. 약간 노란 캔버스 위에는 커다란 나무를, 머릿속에는 마법사들이 뛰어노는 호그와트를, 가족들에게는 내 모든 감사함을, 그리고 까만 에디터 위에는 세상을 더 편리하게 할 코드들을. 숨이 다 할 때까지 개발하고, 연주하며, 사랑하고 싶다.
자세한 내용 보기