React Native로 앱을 만들고, 고통 받으며 적는 글

좋았던 점.

react로 앱을 만든다. 자바스크립트다. 타입스크립트도 가능하다.

 

힘들었던 점.

초기 세팅이 제일 힘들다.

재설치만 몇 번한 것 같다. 무엇이 잘못된 건지도 모르겠다. 왜 잘되는지 모르겠다.

 

라이브러리

react-native-navigation을 통해 화면이 이동하는데, Stack이라는 개념과 Navigation이라는 개념이 있다.

Stack은 웹의 히스토리나 자료구조처럼 1 > 2 > 3 으로 쌓이고 뒤로 가면 3 > 2 > 1 이런 형식이고

Navigation은 쌓이지 않는다.

 

앱을 껐다 켜도 데이터가 유지되려면 storage를 사용해야한다. (https://github.com/react-native-async-storage/async-storage)

 

 

React-Native 특성

react-native에서 지원하는 Text, View 태그 등등을 사용해야 한다.

display 속성에 flex 또는 none 밖에 없다.

스타일컴포넌트와 비슷한 형식으로 스타일을 만든다.

스타일 속성명이 카멜 케이스다.

 

 

일반 View는 스크롤되지 않는다. 그래서 ScrollView라는 태그를 사용해야 한다.

그런데 이 ScrollView라는 나쁜 것이 flex: 1이 먹히지 않아 화면을 확보하지 못하는 경우가 많은데, 찾아 contentContainerStyle 이란 것을 사용해야지만 스타일이 정상적으로 잘 들어간다. ScrollView 특성상 콘텐츠 내용의 길이가 적을 때에는 적은 확보 해서 보여준다.

 

 

SafeAreaView를 스크린의 최상위에 적어줘야 IOS에서 잘리지 않고 이쁘게 보인다.(안드로이드는 그냥 평범한 View로 보인다.)

SafeAreaView에도 flex:1을 해줘야지 전체화면을 잡아준다.

 

디버깅하기 너무 힘들다. 디버깅 라이브러리를 쓰는 게 맘 편하다.

 

 

로컬에서 IOS는 안 되는 게 너무 많다.

- http로 되어있는 웹을 띄우려 했는데 https가 아니라 보안 때문에? 막힌다.

- 디버깅 툴에 연결을 못한다..(내가 못하는 건지...)

- 자바스크립트 모듈을 설치하면 pod-install이라는 명령어를 항상 해줘야 한다. (IOS 의존성 설치.. 이걸 몰라서 한동안 접은 적도 있었다. 안드로이드는 자동이던데...)