기본 navigation과 route

[주인장]

React Native 내비게이션에서 navigation과 route는 화면(Screen) 컴포넌트에 자동으로 전달되는 두 가지 중요한 props(속성)입니다.

이 둘은 React Navigation 라이브러리를 사용할 때 핵심적인 역할을 합니다.

• navigation (내비게이션) : "어떻게" 이동할지를 담당합니다. (예: "다음 화면으로 가", "뒤로 가")

• route (라우트) : "현재" 화면의 상태와 데이터를 담당합니다. (예: "이 화면의 이름은?", "이전 화면에서 전달받은 값은?")

1. navigation prop (액션 담당)

navigation 객체는 화면 간의 이동을 실제로 실행하는 다양한 함수(메서드)들을 담고 있습니다. "운전대"나 "리모컨"이라고 생각할 수 있습니다.

주요 기능 및 예시:

1. navigation.navigate('ScreenName'): 다른 화면으로 이동합니다.

// 'Settings'라는 이름의 화면으로 이동하는 버튼

<Button

  title="설정으로 이동"

  onPress={() => navigation.navigate('Settings')}

/>

2. navigation.goBack(): 이전 화면으로 돌아갑니다. (스택에서 현재 화면을 제거)

// 뒤로 가기 버튼

<Button

  title="뒤로 가기"

  onPress={() => navigation.goBack()}

/>

3. navigation.setOptions({ ... }): 현재 화면의 옵션(예: 헤더 제목)을 동적으로 변경합니다.

// 화면 헤더 제목을 '상세 정보'로 변경

React.useEffect(() => {

  navigation.setOptions({ title: '상세 정보' });

}, [navigation]);

4. navigation.push('ScreenName'): Maps와 비슷하지만, 스택에 새 화면을 계속 쌓습니다. (예: 같은 상세 화면에서 또 다른 상세 화면을 열 때)

2. route prop (데이터 담당)

route 객체는 현재 화면에 대한 정보를 담고 있습니다. 특히, 이전 화면에서 전달받은 데이터(파라미터)에 접근할 때 필수적입니다. "배송된 소포"라고 생각할 수 있습니다.

주요 기능 및 예시:

1. route.params: 이전 화면에서 Maps 함수를 통해 전달받은 데이터 객체입니다.

2. route.name: 내비게이터에 설정된 현재 화면의 이름 (예: MealDetailScreen)입니다.

3. route.key: 현재 화면의 고유 키입니다.

3. 예시

두 개의 화면, MealListScreen (목록)과 MealDetailScreen (상세)이 있다고 가정해 보겠습니다.

예시 1: MealListScreen.js (데이터 전달하기)

여기서는 navigation을 사용해 MealDetailScreen으로 이동하면서, mealId라는 **파라미터(params)**를 함께 전달합니다.

// MealListScreen.js

import React from 'react';

import { View, Button } from 'react-native';

// 목록 화면은 navigation prop만 받아서 사용합니다.

const MealListScreen = ({ navigation }) => {

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Button

        title="피자 상세 정보 보기 (ID: 1)"

        onPress={() => {

          // 'MealDetail' 화면으로 이동

          // { mealId: 1, mealName: '피자' } 라는 데이터를 params로 전달

          navigation.navigate('MealDetail', {

            mealId: 1,

            mealName: '맛있는 피자'

          });

        }}

      />

      <Button

        title="치킨 상세 정보 보기 (ID: 2)"

        onPress={() => {

          navigation.navigate('MealDetail', {

            mealId: 2,

            mealName: '바삭한 치킨'

          });

        }}

      />

    </View>

  );

};

export default MealListScreen;

예시 2: MealDetailScreen.js (데이터 받고, 뒤로 가기)

여기서는 route를 사용해 MealListScreen에서 보낸 파라미터를 받고, navigation을 사용해 뒤로 돌아가는 버튼을 만듭니다.

// MealDetailScreen.js

import React from 'react';

import { View, Text, Button } from 'react-native';

// 상세 화면은 route와 navigation prop을 모두 받습니다.

const MealDetailScreen = ({ route, navigation }) => {

  // 1. route 사용: route.params에서 전달받은 데이터 추출

  const { mealId, mealName } = route.params;

  // 2. navigation 사용 (옵션 변경): 헤더 제목을 받은 데이터로 설정

  React.useEffect(() => {

    navigation.setOptions({ title: mealName }); // 헤더 제목을 '맛있는 피자' 또는 '바삭한 치킨'으로 변경

  }, [navigation, mealName]);

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Text>상세 정보 화면</Text>

      <Text>전달받은 음식 ID: {mealId}</Text>

      <Text>전달받은 음식 이름: {mealName}</Text>

      {/* 3. navigation 사용 (화면 이동): 뒤로 가기 */}

      <Button

        title="목록으로 돌아가기"

        onPress={() => navigation.goBack()}

      />

    </View>

  );

};

export default MealDetailScreen;