React Navigtion 라우트 파라미터, 뒤로가기

React Navigation 설치 및 사용법

이전 블로그 글에서는 React Navigtion을 소개하고 설치 후 사용해보았다.

이번 글에는 React Navigation을 더욱 활용하는 법을 알아보자.

 

라우트 파라미터

새로운 화면을 보며줄 때 의존해야 하는 어떤 값이 있으면 라우트 파라미터를 설정해야 한다.

예를 들어 회원 고유번호가 1인 데이터를 보여주는 화면이 있을때 {"id": 1}과 같은 방식으로 파라미터를 설정한다.

라우트 파라미터를 설정해 화면을 전환할 때는 navigate 또는 push 의 두 번째 인자로 넘겨줄 객체를 설정한다.

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

function HoemScreen({navigation}) {
  return (
    <View>
      <Button
        title="Detail1 열기"
        onPress={() => navigation.navigate('Detail', {id: 1})}
      />
      <Button
        title="Detail2 열기"
        onPress={() => navigation.navigate('Detail', {id: 2})}
      />
      <Button
        title="Detail3 열기"
        onPress={() => navigation.navigate('Detail', {id: 3})}
      />
    </View>
  );
}

export default HoemScreen;

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

function DetailScreen({route}) {
  return (
    <View>
      <Text>id: {route.params.id}</Text>
    </View>
  );
}

export default DetailScreen;

Detail2 클릭 시

위 코드처럼 받는 쪽 컴포넌트에선 route라는 Props로 받아오는데, 안에는 다음과 같은 정보가 들어있다.

{
  "key": "Detail-afgD3-4AFS23-14",
  "name": "Detail",
  "params": {"id": 1}
}

key는 화면의 고유 ID로 새로운 화면이 나타날 때 자동으로 생성된다. 

name은 화면의 이름으로 스택 내비게이터를 설정할 때 지정한 이름고, params가 위에서 넘겨준 라우트 파라미터다.

 

뒤로가기

뒤로가기를 할 때는 navigate.pop() 함수를 호출하면 되는데, 가장 청 번째 화면으로 이동하고 싶을 때는 navigation.popToTop() 함수를 호출한다.

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

function DetailScreen({navigation, route}) {
  return (
    <View>
      <Text>id: {route.params.id}</Text>
      <Button
        title="다음"
        onPress={() => navigation.push('Detail', {id: route.params.id + 1})}
      />
      <Button title="뒤로가기" onPress={() => navigation.pop()} />
      <Button title="처음으로" onPress={() => navigation.popToTop()} />
    </View>
  );
}

export default DetailScreen;

 

Detail id: 2 화면 / 뒤로가기 클릭 시 / 처음으로 클릭 시

 

navigate와 push의 다른점

navigation을 사용해 화면을 이동할때 navigate 또는 push 함수를 사용하면 된다고 했다.

navigate는 push와 달리 새로 이동할 화면이 현재 화면과 같으면 새로운 화면을 쌓지 않고 파라미터만 변경합니다.

위에 코드를 변경하여 다음 id Detail 컴포넌트로 이동하는 코드를 작성해 보겠다.

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

function HoemScreen({navigation}) {
  return (
    <View>
      <Button
        title="Detail1 열기"
        onPress={() => navigation.navigate('Detail', {id: 1})}
      />
    </View>
  );
}

export default HoemScreen;

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

function DetailScreen({navigation, route}) {
  return (
    <View>
      <Text>id: {route.params.id}</Text>
      <Button
        title="다음"
        onPress={() => navigation.push('Detail', {id: route.params.id + 1})}
      />
    </View>
  );
}

export default DetailScreen;

push를 사용 해 id: 2 Detail 화면을 이동했을때는 뒤로가기 버튼이 이전 컴포넌트(Detail)인 것을 확인할 수 있다.

반면에 navigate를 사용했을땐 뒤로가기 버튼이 id: 1를 호출한 Home 컴포넌트 이다.

좌측 push / 우측 navigate

navigate를 사용하면 같은 컴포넌트 일때는 새로운 화면을 쌓지 않고 파라미터만 변경하고, push를 사용하면 같은 컴포넌트 일때도 새로운 화면을 쌓아서 이동한다.