React-Native Example

React-Native Tutorial

• ClickThePaintings Code

• ClickThePaintingsWithRedux Code

• 컨트리뷰톤을 통해 RN팀에 참여하였고, RN iOS 예제 앱을 만들어 보게 되었다. RN은 처음이고, 짧은 시간 내에 예제 앱을 구현한 것이기에 기능은 매우 간단하다.
• 그림 데이터를 가져와서 클릭하면 그림의 세부 정보를 보여주는 것

 

• 리액트만 적용한 앱(ClickThePaintings)과 리액트, 리덕스, 리덕스 썽크를 적용한 앱(ClickThePaintingsWithRedux)을 별도로 구현했다. 기본적인 레이아웃은 두 앱 모두 동일하며, 리덕스를 적용한 앱에서는 API를 사용했기에 데이터를 fetch하는 동안 로딩 컴포넌트가 보여지도록 한 것만 다르다.

• 어쨌든 간단하게나마 앱을 만들고 컨트리뷰트 했으니 에러 위주 기록을 남겨보고자 한다.

 

앱 셋팅

• Expo가 아닌 React-Native CLI로 세팅. 사전에 필요한 설치 방법는 공식 문서에 잘 나와있다. 목록만 나열하자면 이렇다.
  1. Node
  2. Watchman
  3. JDK 8 이상
  4. React Native CLI
  5. iOS는 Xcode, 안드로이드는 Android Studio
  참고로 위의 것들 전부 설치하는데 시간이 꽤 오래 걸린다...
• 사전에 필요한 것들을 설치하고 나면 app을 세팅하는 것은 매우 매우 간단하다. 터미널에서 앱을 만들고자 하는 폴더 위치로 이동한 후 react-native init 프로젝트명을 외치면 된다.참고로 이것도 시간이 꽤 걸린다. 특히 Installing cocoapods 라고 나올 때에 마치 정지된 듯 터미널에서 오랫동안 hanging하고 있는데, 에러가 난 것이 아니다. 그냥 설치에 시간이 오래 걸리는 것이며 스택오버플로우에 의하면 20-30분 정도 걸린다고 한다. 완료되는 시간을 재보진 않았지만 init 명령해놓고 다른 일 하는 것이 편하다.
• $ react-native init [ProjectName]

 

앱 시작하기

• 앱을 시작하기 위해서는 프로젝트 폴더로 이동한 뒤, react-native run-ios 를 치면 된다. 안드로이드의 경우 react-native run-android

• 앱을 빌드하고 iOS 시뮬레이터(Xcode 설치 시 포함됨)를 띄울 때에 에러가 소소하게 많이 났는데, 그 중 가장 많이 났던 것들 위주로 써보겠다.
  1. 서버가 이미 running 중Could not connect to development server. Node server is running and available on the same network.run-ios는 안 되고 start는 되는 이유가 뭘까 싶었는데, run-ios는 빌드 및 서버, 시뮬레이터를 동시에 시작시켜주는 것이고, start는 서버를 켜주는데, 서버를 재시작할 수 있도록 도와준다고 한다. 즉 서버를 껐다 켜준다고 한다. 그래서 서버가 문제라고 할 경우에 한 번씩 시도해보는 게 좋을 것 같다.
  2.  
  3. 라는 에러가 뜬다. 여기서 친절하게도 npm start로 다시 시작해보라는 제안을 준다. npm start는 package.json에서 확인가능하듯이 react-native start 를 의미한다.
  4. 빌드할 때에 메트로 번들러가 디폴트로 앱을 localhost:8081에 실행하게 된다. 이 때 이미 서버가 실행돼 있는 경우
  2. 포트가 이미 사용중

     $ sudo lsof -i: 8081
     

     만약 사용되고 있을 경우 결과가 나타나는데, pid(포트 아이디)를 확인한 뒤 sudo kill -9 [pid] 를 실행하면 된다.
  3.  
  4. 위에서 언급했다시피 메트로 번들러는 포트 8081을 디폴트로 사용한다. 따라서 해당 포트가 이미 사용중인 경우 에러를 낸다. 이럴 경우 터미널에서 포트를 죽인 다음 다시 실행하면 된다. 맥OS 기준으로 포트 사용여부를 확인하려면
  5. Unable to resolve module

     $ npm start --reset-cache
     

  6. 이미지를 가져오는 과정에서 경로를 몇 번 바꾸었더니, 바뀐 코드가 적용되지 않고 계속 예전 코드로 에러가 났다며 보여준다. 그러면 캐시를 삭제하자. run-ios로 할 때도 마찬가지로 —reset-cache만 붙여주면 된다.
  7. React Native version mismatch이건 또 갑자기 뭔 소리인가 했다. 에러화면에서 제안하는 방법은 캐시를 삭제하라는 것이었다. 워치맨과 리액트네이티브의 캐시를 삭제하는 watchman watch-del-all && react-native start —reset-cache 명령을 실행해봤지만 고쳐지지 않았다. 구글링한 결과 모든 터미널을 종료한 뒤에 다시 켜서 react-native run-ios로 리빌딩을 하니 고쳐졌다.
  8. console.error: "React Native version mismatch"

 

그 외

• 빌드하는 과정에서도 에러가 많이 났지만, RN의 컴포넌트와 flexbox에 익숙지 않아서 이미지를 원하는 대로 구현하는 데에서 좀 헤맸다. 결론은 Dimensions.get('window').width 랑 resizeMode랑 flexbox를 잘 활용하자… 는 교훈을 얻었다.
• 그리고 생각보다 리액트를 알고 있으면 쉽게 접근할 수 있어서 확실히 확장성이 좋다고 느꼈다. 간단한 앱을 구현하긴 했지만, react, redux로 로직을 적용하는 과정에서 웹과 다른 점이 거의 없었고 라우터도 react-router-native를 사용했는데, react-router-dom과 몇몇 컴포넌트의 이름이 조금 다를 뿐 적용하는 데 전혀 차질이 없었다.
• 다만 현재 구현한 앱에서는 추가적으로 에러 핸들링이나 동적인 이벤트를 추가하는 것이 필요하다.