리액트 네이티브 앱 개발 후기(2)

지난번에 이어서 써보겠습니다!! 지난번 링크 : 1편

<div/>가 안되는 상황에서의 당황은 이루 말할데가 없었죠.

아니아니.. 내가 전해들은 리액트 네이티브는 이게 아닌데.. 하면서요

아무튼 첫화면(처럼 생긴 파일)에서 hello world 화면에다가 "world"를 "world!!!"로 바꿔보면서

핫리로딩 되는거 보고 오 된다된다 하는 마음으로 시작했네요.

이 상황에서 제일 큰 도움이 됐던게 저한테는 expo였습니다.

(물론... 나중에는 제일 방해가 되었던게 expo이기도 합니다. 나중에 또 쓸일이 있겠죠)

개인적으로 reactnative.dev 다큐먼트보다는 docs.expo.io 다큐먼트가

훨씬 깔끔하게 잘 정리돼있는거같았고, 순서대로 뭘 하면 되는지 눈에 더 잘들어왔습니다.

뭐랄까 개발자의 실질적인 질문에 대한 답이 더 잘 설명돼있다는 느낌?

react native 공홈 다큐먼트는 "그냥 어떻게어떻게 알아서 잘 하면 돼!" 였다면

expo 다큐먼트는 "이런거 하고싶어? 그럼 이렇게해봐. 저런거 하고싶어? 그럼 저렇게 해봐" 라는 느낌이었어요.

개인적으로 프로젝트 할 때 스타일이 큰 그림 먼저 다 그려놓고

세부 디테일을 그려가는 방식을 선호하는 편이라서

expo에서 제공하는 라이브러리로 프로젝트를 거의 도배(...) 하다시피 하고 시작했습니다.

지금은 약간 쳐낼건 쳐냈지만 

스태틱 리소스 로딩, 권한설정, 환경변수 세팅, 인앱 브라우저, 상태 바 커스터마이징, 스플래시 스크린, 푸시, OTA 등등 다 expo에서 갖다 썼습니다.

그냥 expo에서 나온거니까 잘되겠지 하면서 고민없이 그냥 add add 했습니다.ㅋㅋ

또 코드 내부에 example에 있는 형식 그대로 있는 부분도 많구요(ㅠㅠ)

지금 이렇게 나열해놓고 보니 너무 떡칠했나.. 싶긴 하네요

아무튼 이런거 다 임포트한 이후에 제가 고민했던건, 바로 디자인 프레임워크입니다.

react.js의 material.io 같은 느낌에 해당하는게 있나 하고 찾아봤습니다.

native-base라는게 있더군요.

제일 많이 사용하는것같길래 별다른 고민없이 설치했는데,

점점 쓰면서 임포트 할 때 컴포넌트 이름이 네이티브랑 겹쳐서 신경써서 골라야하는 것도 번거롭고 

네이티브로 대부분의 컴포넌트는 충족이 되고,
특수한 컴포넌트(탭, 캐러셀 등등)는 커스터마이징을 할 수 있는 전용 라이브러리를 사용하는게
더 나은 것 같아서 한 일주일 써보다가 지워버렸습니다.

그 다음은 라우터입니다.

이걸로만 거의 이주일 넘게 리서칭한거같네요.ㅋㅋㅋ
그때 그냥 옆에서 누군가 "이거 쓰면 됨"했으면 아무 고민없이 썼을텐데, 라우터 라이브러리 이상한거 쓰면 개고생한다는 뼈아픈 경험이 있어서... 혼자서 삽질을 많이 하다보니ㅎㅎ

구글에 react native router 라고 치면 크게

1. react-router

2. react navigation

3. react-native-navigation

4. react-native-router-flux

네가지를 찾을 수 있습니다만, 제가 프로젝트를 처음 만들 때 당시에는 1번 react-router는 web(react.js)버전만 있었고 native는 없었습니다.

각 라이브러리별로 뭐가 좋고 뭐가 안좋은지 꼼꼼하게 살펴봤는데, 아래처럼 표로 요약해봤습니다.

(지금 이거 정리하면서 찾아보니 react navigation이 6.x버전이 나왔네요..크흑)

저는 개인적으로 라이브러리 쓸 때 소스코드 뜯어보는것도 좋아하고
많이 찾아보고 알아보는걸 좋아해서 react navigation의 단점은 오히려 장점으로 느껴졌습니다.(이거때문에 항상 고생하긴 함)

그리고 결정적으로 expo에서 추천하는 navigation 라이브러리가 react navigation이어서 고민끝에

react navigation으로 골랐습니다.

(그리고 실제로 react navigation github 소스코드 많이 뒤적뒤적했다는 전설이)

다음은 상태관리 쪽인데, 여기는 생각을 오래하지 않았습니다. 그냥 react context 사용했습니다.

예전 프로젝트에서 mobx를 썼었는데, 생각보다 많이 실망을 하기도 했고
(redux는 가공할 syntax를 보는게 너무 마음에 안들어서 애시당초 접음)

결정적으로 저는 functional component 성애자인데 mobx에서 functional component로 store 선언하는게 생각보다 잘 안됐어서(...) 

또 별도로 라이브러리를 설치하지 않아도 react 자체적으로 기능을 하는게 있으니 굳이 redux나 mobx를 설치할 유인을 못찾았습니다.

이렇게 여러가지 라이브러리 추가추가 하다보니 세팅할것도 많아지고 해서 프로젝트 구조를 또 정리했습니다.

제가 좋아하는 프로젝트 구조는 아래와 같습니다.

(base)

- App.js : 스태틱 파일 로딩, 스플래시 핸들링, 컨텍스트 프로바이딩 등등 모든 프로젝트에서 공통으로 사용되는 기능을 우선 정의

- (프로젝트 이름).js : 딥링크, 다이내믹 링크, 푸시 설정, 안내팝업, 자동로그인, 토스트, status bar wrapper, navigator 등등 이 프로젝트에서 dependent하게 사용되는 기능들 정의

ㄴasset(폴더) : 스태틱 파일들 저장

ㄴnavigation(폴더) : 네비게이션 설정을 위한 파일을 모아놓은곳

ㄴstores(폴더) : 상태관리하는 store 모아놓은곳

ㄴscreens(폴더) : 네비게이션에서 다루는 컴포넌트(직접 screen이 되는 파일들) 모아놓은곳

ㄴcomponents(폴더) : 여러 화면에 걸쳐서 사용되는 컴포넌트들 모아놓은 곳

ㄴconstants(폴더) : stores에서 사용하는 action이름이나 navigation routes 이름들, 스타일 색상 고정값, 프젝트 공통 세팅값 등등 constants 모아놓는곳

ㄴutils(폴더) : 여러군데에서 사용하는 함수들 모아놓은곳(ex : 날짜 변환 등등)

다른분들은 프로젝트 구조 어떻게 구성하시는지 궁금하네요. 더 좋은 방법 있으시면 공유 부탁드려요 ㅎㅎ

프로젝트 디렉터리 구조 정리까지 하고 하니 거의 한달 넘게 걸렸습니다.ㅋㅋㅋ

아무래도 일은 일대로 하고 이건 이것대로 하다보니 시간이 잘 안나는것도 있었고,

저는 눈에 보이는 결과를 좋아하는데 프로젝트 구성하는건 눈에 보이는 결과가 없다보니

의욕이 많이 안차서 빈둥빈둥 하기도 했습니다.

이후에 화면 하나씩 만들기 시작했는데,

여기서 당황했던 점은 스타일입니다.

css와 거의 유사하다는 점은 너무너무 마음에 들었는데요,

예를들어서 fontFamily, color, margin, padding, flex 등등이 거의 유사했습니다.

근데 css 파일은 없고, css의 장점인 클래스로 스타일 상속도 안된다는점을 알아버렸습니다.

(즉 하나하나 스타일 이름대로 지정해서 inline으로 넣어줘야 한다는 말)

-> 자체적으로 js object에 {...object} 이거 사용해서 상속처럼 구현해버릴까 싶기도 했는데, 

그러면 또 일이 커질거같아서 그냥 포기했습니다ㅎㅎ

그리고 삽질 진짜 많이했던데가 {flex:1} 이 스타일.

scroll이 필요한 곳(예 : ScrollView)에 이걸 걸어버리면 스크롤이 안되는걸 정말 일주일동안 어디에서도 못찾아서

어제까지는 됐었는데 이게 또 안되지???? 하면서 방황을 했습니다ㅋㅋㅋ

지금에서야 웃으면서 말할수 있지만..  

이게 "다시는 react native 안쓴다"라고 말한 첫번째였습니다.ㅋㅋㅋㅋㅋ

그리고 나서 화면 하나하나 만들 때 부터는 그래도 속도내서 작업 진행했던 기억이 있네요.

나중에는 가속도 붙어서 하루에 화면 세네개씩 찍어내고 그랬습니다ㅎㅎ

물론 디자이너한테 혼나고 다 다시하긴 했지만요

쓰다보니 또 길어져서 다음편으로 넘기겠습니다. 

다음에는 애정과 증오의 expo 에 대해서 써보려고 합니다.