리액트 네이티브 독학 - 네비게이션

 

 

리액트 네이티브와 리액트간에는 기본적인 태그부터 차이가 나는 것 같으며 기본 구성에 좀 더 신경을 써야하는 것 같다.

 

 

기초 오류 해결

우선 .eslintrc.js 파일을 수정한다.

 

여기서

 

 

이렇게 바꾼다. eslint와 prettier와의 충돌과 관련된 이슈를 방지한다고 한다. 확실히 이렇게하니 임의로 만든 src 폴더 내의 새 파일에 탬플릿과 똑같은 코드를 복붙해도 생기던 에러를 풀어주었다. 스샷으로 기록을 남기고 싶었으나 클립보드로 캡처한다는 걸 잊었다.

 

리액트 라우터 -> 리액트 네비게이션

'네이티브는 앱 환경이므로 페이지를 옮겨가는 라우터가 아니라 뷰(view)를 겹치는 리액트 네비게이션을 사용하는 것이 유리하다'고 GPT가 설명하였다. 코드도 넷 중 하나는 없는 코드를 뽑아내는 3.5버전 녀석의 할루시네이션은 정말 실컷 겪어봤기에 나무위키 보는 심정으로  넘긴다음관련 키워드로 구글링을 하였다. 망가진 시계도 하루 2번은 제 때를 가리킨다고, 대부분의 관련 정보글도 이것이 맞다고 설명하였다. 그렇다면 뭐, 고민없이 설치해야지.

 

설치 코드

npm install @react-navigation/native @react-navigation/stack

 

기초 구조

리액트 네비게이션을 App.tsx에 적용하고 Stack을 쌓은 모습이다. 아직 태그 요소등을 전부 분석하지 못했기에, 원래 APP에 있던 기본 화면 샘플 코드를 main 페이지에 복붙했다. 중간중간 몇 번의 에러가 있었지만 npm 모듈을 재설치하고, 안드로이드 스튜디오에서 디바이스 매니저를 열고 cool boot를 하는 등의 과정을 거쳐 해결하였다.

 

 

기본적으로 가장 먼저 노출되는 것은 맨 위의 Stack인 것을 확인했다. 또 하나 알아낸 것은, 웹에서는 쉽게쉽게 코드 한 줄 고치고 저장하면 알아서 고쳐지는데, 여기서는 캐시 관련 에러가 간혹가다 발생하고 있다. 에뮬레이터를 거치다보니 끄고 키고의 반복인 것 같다. 

 

 

헌데, 리액트 네비게이션을 추가하면서 상단에 못보던 헤더가 생겼다. 해당 페이지 이름만 적혀있는 것 같은데, 헤더를 따로 만들어 관리할 거라면 이 헤더를 없애는 것이 좋아보인다.

 

구글링을 생활화하자. GPT도 쓸만하지만 이런 간단한 것은 검색해서 찾는 것이 훨씬 빠른 것 같다.