[React Native] 화면 간 데이터 전달하기 (React Navigation)

화면 간 데이터 전달하기 (React Navigation)

들어가며

• 리액트 네이티브(React Native) 프로젝트에서 React Navigation 라이브러리를 이용하여 화면 간 이동(Navigation) 기능을 구현할 때, 화면 간 데이터를 전달하는 방법을 간단하게 정리해본다.

 

방법

데이터 전달하기

• @navigate()@ 메서드를 사용할 때, 두 번째 인자로 객체를 전달하면 해당 데이터를 다음 화면에 보낼 수 있다.

navigation.navigate('MealsOverview', {
  categoryId: itemData.item.id,
});

 

⇒ 첫 번째 인자: 이동할 화면 이름

⇒ 두 번째 인자 : @params@ 객체 (원하는 데이터 포함)

 

데이터 추출하기

방법 ① : route prop 사용하기

• @MealsOverviewScreen@처럼 화면으로 등록된 컴포넌트는 @route@ prop을 자동으로 받는다.

function MealsOverviewScreen({ route }) {
  const catId = route.params.categoryId;
}

 

방법 ② : useRoute 훅 사용하기

import { useRoute } from '@react-navigation/native';

function MealsOverviewScreen() {
  const route = useRoute();
  const catId = route.params.categoryId;
}

 

⇒ @route.params@는 @navigate@ 시 전달한 객체와 동일하다.

⇒ @categoryId@ 등의 키로 원하는 데이터를 추출할 수 있다.

 

비교하기

	route prop 사용하기	useRoute 훅 사용하기
사용 위치	화면 컴포넌트	화면 컴포넌트 또는 하위 컴포넌트
사용 방법	@({ route })@로 props로 받음	@const route = useRoute();@로 훅 사용
필요 조건	props를 직접 받아야 함	@navigation@ context 내에서만 사용 가능
장점	간단하고 명시적	유연하게 어디서든 사용 가능
사용 예	기본 화면 컴포넌트	중첩/하위 컴포넌트에서도 @route@ 접근 가능

 

@useRoute@ 훅을 이용한 방식은 navigation prop을 직접 전달받지 않는 컴포넌트이거나, 중첩 컴포넌트에서 route 정보를 참조해야 할 때 사용하면 유용하다.

일관성과 가독성을 위해 하나의 방식을 프로젝트 전체에서 통일하는 것이 좋다.

 

 

참고 사이트

useRoute | React Navigation

Moving between screens | React Navigation