본격 리액트 네이티브 시동기 - 화면전환과 파일분리

이 글에선 React-native(이하 RN) 를 이용해 간단한 로그인화면과 화면이동들을 구현하면서 익힌것들을 쓸 것이다.

일단 RN을 설치 후 회고록를 작성하고나서도 정신못차리고 검색과 코딩의 비율이 7:3을 넘지 못하며 시간을 보낸글임을 미리 밝힌다ㅠㅠ

처음엔 무조건 시작해서 텍스트 만들어보고 버튼만들어보고 하는 식으로 시작했다. 

expo 프로젝트로 이것저것 시험해보다가 네이티브 모듈을 붙일땐 어쩌지? 하는 생각이 들어 확인해보니

expo에는 네이티브 모듈을 못붙인다는 정보를 입수(!!) 애초에 이번 프로젝트엔 구글맵api부터 시작해서 네이티브기능이 덕지덕지 붙을 예정이었기에 expo를 끌고갈순 없었다..개꿀이었는데...눈물을 머금고 포기

RN 공식홈페이지 문서를 따라 프로젝트를 재 생성하고 버튼이니 텍스트니 만들었던 코드(얼마 안되지만) 복붙 후 다시 이것저것 해보기 시작

일단 RN으로 프로젝트를 진행하며 필요한게 무엇일지 생각해봤다.

크게 정리해보자면

1. 화면전환을 하는 방법

2. 나중을 위한 파일분리 -> RN은 방심하면 하나의 소스파일에 코드가 왕창 몰리기 쉬운 구조인거같아 이부분을 주의했다.

3. 네이티브 모듈 연동(구글맵 api 등 )

4. 애니메이션

이렇게 4가지 되시겠다.

이 글에서는 그중에 1번과 2번에 대해 작성한다.

잡설이 길었다.

일단 파일을 분리하기 위해 화면전환에 대한 솔루션이 필요했다. 

언제나 그랫듯 결론부터 ! 

화면전환은 react navigation(react native navigation아니다)을 이용했다. 

사용법은 공홈문서를 보고 따라하는식으로 했고, 약간의 응용만 추가됏다.

의외로 파일을 분리하는데서 삽질이 좀 있었는데, 파일을 분리하고 각 폴더를 만들어서 나눈것은 좋았으나, 

경로를 잘못써서 에러나고 export를 안해줘서 에러나고 등등의 정말 초보적이지만 처음 건드릴때 하기 쉬운 실수들로 인해 시간을 좀 지체했다.

이번 삽질에서 얻은것 ! 

문법은 확실하게 익히고 예제를 잘 봐서 문법실수를 없게하자.

서드파티를 이용할거라면 공식문서가 잘 작성되어있는지 확인하고 사용법을 빠르게 훑어본 후 어려운지 쉬운지를 대략적으로 판단,

간략하게 장단점을 파악 후 결정! 예제를 마구 복붙해서 일단 시동! 어떻게돌아가는지 확인! 디테일한것부터 슬슬 바꿔보기! 구조파악!

이정도를 얻은것같다.