# react navigation
Navigation prop
screen 앱의 각 구성 요소는 navigation에서 자동으로 props와 함께 제공된다.navigationnavigate : 다른 화면으로 이동하여 수행해야 하는 작업을 파악한다.reset : 네이게이터 상태를 지우고 새 경로로 교체goBack : 활성 화면을 닫
react-navigation에 Ts 적용하기 (2)
지난 포스팅에서는 createNativeStackNavigator, useNavigation에 Typescript를 적용하는 방법에 대해 포스팅했었는데, 이번에는 그 이후에 대해서 알아보자 ! 🪴 스택 네비게이터 내부에 하단 탭 네비게이션 넣기
react-navigation에 TS 적용하기 (1)
타입스크립트에서 네이티브 스택 네비게이터를 사용하기 위해서는 어떤 화면에 어떤 파라미터가 필요한지 정의하는 StackParamList 타입을 정의해줘야 한다. 이 Type을 사용하면 다른 화면을 띄울 때 화면의 이름과, Route Parameter를 검증할 수 있다.타
React Native 토큰 만료 시 로그아웃 처리하기
React 나 React Native 프로젝트들을 경험하다보면 반복적인 코드를 줄이고 가독성을 높이는 API 코딩처리를 위해 axios.create로 만든 instance의 interceptors로 API 처리가 성공 했을 때 또는 실패 했을 때 API 요청한 컴포넌트
React Navigation 오류 좀 그만... | 오류 최소화 & 해결방법
React Native의 기초적인 라이브러리리인 Navigation은 많은 오류를 발생시킨다.최근에도 간단한 프로젝트를 하는데 @react-navigation/stack 에서 오류가 뿜어져 나왔다.더욱 문제는 똑같은 상황에서도 오류가 발생할때가 있고 안할때가 있는데,그
Day 40
React Native의 힘든점 디버깅이 힘들다!!그래서 크롬 디버거를 쓰는걸 추천한다. command + m또 네트워크 부분이 안보임 + 네트워크 부분을 보기 위해서는 react native flipper를 써야함이렇게 네트워크 부분도 확인 할 수 있게 된다. 주소가
[REACT NATIVE] react navigation 정리
※ react navigation 6.x 기준입니다. react native 개발하면서 매번 쓰지만 매번 까먹어서 구글링하는 부분들정리해서 올립니다.
[React-Navigation] 페이지 이동
개발이 필요한 페이지가 로그인페이지를 포함하여 대략 5페이지 정도가 된다.그래서 routing에 대해 알아봤는데,웹에서의 routing이 RN에서는 stack이라는 개념으로 불리고 있었다.stack을 사용하기 위해 react-navigation이라는 라이브러리를 사용해
인턴/ 폴더 구조, react navigation
인턴 둘째 주 주말이다. 하루하루가 정신 없어 어떻게 지나갔는지 모르겠다.낯설었던 react native, 폴더구조와 새로 적용해 본 기능들을 정리해보자. 이곳에서 사용했던 폴더 구조=> Module / Navigator => Screen => index => View
[React Navigation] React Navigator - 2
route를 navigate 할 때 parameters도 같이 보낼 수 있음 !예제)현재 screen의 params를 업데이트 하게 해줌리액트의 setState() 처럼 작동함예제)screen options(ex. title)를 업데이트 할 때는 setParams 보다
[React Navigation] React Navigator - 1
화면 이동시, Screen 하나씩을 Stack에 넣고 빼는 구조화면 전환시, 다른 화면으로 넘어가는게 아니고 새 화면이 스택의 제일 위에 쌓이는 것다음 화면으로 이동한다면 화면 상으로는 이전 화면이 사라지고 새로운 화면이 보이지만, 구조적으로는 컨테이너에 최초 스크린이