Per ardua ad astra.

화면 간 데이터 전달하기 (React Navigation)들어가며리액트 네이티브(React Native) 프로젝트에서 React Navigation 라이브러리를 이용하여 화면 간 이동(Navigation) 기능을 구현할 때, 화면 간 데이터를 전달하는 방법을 간단하게 정리해본다. 방법데이터 전달하기@navigate()@ 메서드를 사용할 때, 두 번째 인자로 객체를 전달하면 해당 데이터를 다음 화면에 보낼 수 있다.navigation.navigate('MealsOverview', { categoryId: itemData.item.id,}); ⇒ 첫 번째 인자: 이동할 화면 이름⇒ 두 번째 인자 : @params@ 객체 (원하는 데이터 포함) 데이터 추출하기방법 ① : route prop 사용하기@Meal..

React Navigation 라이브러리들어가며리액트 네이티브(React Native) 앱에서 화면 간의 전환을 쉽게 구현할 수 있도록 도와주는 라이브러리인 React Navigation에 대해 간단하게 정리해본다. React Navigation개념React Native 앱에서 화면 간의 전환(네비게이션)을 쉽게 구현할 수 있도록 도와주는 오픈소스 라이브러리React Native 앱에 다양한 네비게이션 패턴(스택, 탭, 드로어 등)을 추가할 수 있게 해준다.웹의 라우팅(@react-router@)과 비슷하지만, 모바일 환경에 맞춘 기능(스와이프, 제스처, 헤더 애니메이션 등)을 제공한다. 주요 기능기능설명스택 네비게이션(Stack Navigation)- A 화면 → B 화면 이동 및 뒤로가기를 할 수 있..

뒤로가기 기능 막는 방법들어가며리액트 네이티브(React Native)를 이용하여 만든 앱에서 특정 스크린에서 뒤로가기 기능을 막는 방법을 간단하게 정리해본다. 방법방법 ① : BackHandler API 이용하기 (Android)@react-native@ 패키지의 @BackHandler@ API를 사용해서 뒤로가기 이벤트를 무시하도록 설정할 수 있다.이 방법은 안드로이드(Android)에서 물리적인 뒤로가기 기능을 막아준다.iOS에서는 물리적인 뒤로가기 버튼이 없기 때문에 별도로 처리해주지 않아도 된다.import { useEffect } from 'react';import { BackHandler } from 'react-native';function myApp() { useEffect(() => ..