리액트 네이티브 독학 - 스택 네비게이션, 타입 스크립트

언제 어디서든, 괜찮은 키워드가 생기면 일단 구글링 해두는 것이 중요하다. 당장 볼 게 아니지만 구글은 내가 뭘 검색했는지 기록하기 때문에, 다시 접근하기도 용이해지기 때문이다.

 

기초 구조는 이전 글에서 작성했으니 타입스크립트와의 호환성을 적겠다. 복잡한 설명은 가능한 지양하겠다. 나 자체가 깊이 알지 못하는 것도 있고, 이런데까지 와서 글을 볼 사람들이면 이미 정보가 깊은 글들을 보고도 뭔가 설명이 안되서 왔을태니 말이다.

 

 

타입스크립트를 사용할 경우, JS를 사용할 때와 달리 useNavigation에 에러가 있을 것이다. 관련 함수를 사용하기 위해서는 props를 선언해야한다. 그냥 타입 스크립트를 사용하면서 생기는 타입 관리라 생각하면 된다. 지금은 페이지가 3개 뿐이라 저렇게 해뒀지만 추가될 수록 여기도 적어줘야한다.

 

1. navigate

 

가장 기본적인 스크린 이동 방식이다. 기본적으로 새 스택을 생성한다. 하지만 제자리를 네비게이션하면 같은 스크린을 쌓는 것이 아니라 그냥 같은 새 스크린으로 덮는다.

픽시브 모바일을 사용해본적 있으면 추천 목록을 이리저리 서핑하다가 같은 게시글을 계속 누르는 제자리 이동을 할 수 있다는 것을 알탠데, 그 경우에는 뒤로가기를 누르면 눌러둔 같은 게시글로 이동된다. 그렇다면 그건 어떻게 이동되냐.

 

2. push

 

그때 써먹는 것이 push다.

 

 

여기서 가운데 버튼을 누르면

 

빨라서 찍기가 힘들어....

 

밑의 카운터가 누적되지않고 새 페이지로 이동된다. 하지만 네비게이션으로 찍으면.......

 

 

헌 같은 스크린을 지우고 새 같은 스크린을 만든다. 그런데 기존값을 갱신한다!! 아마 파라미터를 넘기는 것일테지. 그래서 navigation을 쓴다면 스크린 초기화를 염두에 둬야할 것이다.

 

3.popToTop

 

가장 윗 스택으로 이동한다. 아마 쓰인다면 홈 버튼 정도에 쓰이지 싶다. 기본적으로 메뉴 스크린은 navigation으로, 상세 스크린은 push로, 메인 스크린 이동 등은 popToTop으로 사용하게 될 것 같다. 

 

 

 

기타 - 프레이머 모션에 대한 고민

기초적인 애니메이션 효과 따위에 대해서는 스타일드 컴포넌트로도 어느정도 조절할 수 있다. 작년 진행했던 아재개그 토이 프로젝트에서 해봐서 안다. 그래도 좀 더 복합적인 애니메이션 효과를 웹 환경에서 조성하기 위해 이전 프로젝트에는 프레이머 모션을 썼는데, 모바일 환경은 다시 간결함을 요구하는 환경이라 이것의 사용에 대한 고민이 많다.

조금이라도 복합적인 기능을 쓰려면 프레이머 모션이 필요하다. 하지만 모바일은 가능한 단순해야하고, 빨라야한다. 2, 3초씩 진행되는 애니메이션을 매 번 참아줄 사용자는 없을태니 말이다........그래서 이번 주 안에 api 통신 등에 대한 독학이 끝나면 진행할 토이 프로젝트에선, 프레이머 모션 없이 진행하게 되지 싶다.