react-native에서 뒤로가기 구현하기 (BackHandler)

 

보통 앱 서비스를 사용할 때, 뒤로가기를 누르면 이전 페이지로 이동합니다. 처음 react native로 앱을 개발할 때, 디폴트로 제공하는 기능인 줄 알기도 했는데요. 사실 직접 설정해주셔야 합니다! 오늘은 한 번 리액트 네이티브에서 뒤로가기를 어떻게 처리할 수 있는지에 대해 다루어 보겠습니다.

 

 

기능: BackHandler 사용하기

사실 뒤로가기 기능 자체는 간단합니다. react-native에 내장되어 있는 BackHandler를 사용하면 되는데요. 뒤로가기를 구현하고 싶다면 스크린 컴포넌트에서 다음과 같이 작성하면 끝입니다!

import { BackHandler } from 'react-native';

const handlePressBack = () => {
  if (navigation?.canGoBack()) {
    navigation.goBack() // 스크린의 props으로 생성되는 navigation을 통해 이전 페이지로 이동합니다.
    return true
  }
  return false
}

useEffect(() => {
  BackHandler.addEventListener('hardwareBackPress', handlePressBack)
  return () => {
    BackHandler.removeEventListener('hardwareBackPress', handlePressBack)
  }
}, [handlePressBack])

 

추가적으로 말씀드리자면, hardwareBackPress의 이벤트 함수에는 boolean 리턴 값을 주어야 합니다. 만약 true를 리턴하면 바로 종료되고, false를 리턴하면 다른 상위 컴포넌트에서 설정한 hardwareBackPress 함수가 이어서 동작하는 로직입니다.

 

BackHandler의 기능에 대해 더 알고싶으신 분들은 공식 문서를 참고해주세요!

 

 

방법1: 컨테이너 컴포넌트 만들어 사용하기

그러나 모든 스크린마다 동일한 코드를 작성하기는 번거롭습니다.

 

그래서 저는 Container 컴포넌트를 만들어서 사용하는데요. 컨테이너 컴포넌트는 모든 스크린 컴포넌트의 최상단에 위치하는 것으로, 스크린의 최대 가로 길이나 배경화면 등, 스크린에 공통적으로 적용되어야 하는 속성을 위해 만들었습니다. 그리고 navigation 값을 상속받아서 뒤로가기를 수행하는 것이죠.

(이름이 꼭 Container일 필요는 없습니다)

 

 

방법2: 커스텀하게 사용하기

사실 뒤로가기가 페이지만 이동시켜야 하는 것은 아닙니다. 모달이 띄워져있을 때는 뒤로가기를 누르면 스크린 이동이 아니라 모달 닫기를 동작시키고 싶고, 백드롭이 켜져있을 때에는 백드롭 종료만 동작하게 만들고 싶을 수 있죠.

import React, { useState } from 'react';
import { BackHandler } from 'react-native';

const [isModalOpened, setIsModalOpened] = useState(false)

const handlePressBack = () => {
  if (isModalOpened) {
    setIsModalOpened(false)
    return true
  }
  return false
}

useEffect(() => {
  BackHandler.addEventListener('hardwareBackPress', handlePressBack)
  return () => {
    BackHandler.removeEventListener('hardwareBackPress', handlePressBack)
  }
}, [isModalOpened, handlePressBack])

 

이럴 때에는 위에서 언급한 hardwareBackPress의 이벤트 함수의 return 값을 활용하면 됩니다. 모달이 열려 있을 때에는 모달 닫기를 동작시키고 return true로 함수를 종료하는 방법이죠.

 

 

오늘은 한 번 뒤로가기 동작에 대해 살펴보았습니다. 콘텐츠가 도움이 되셨기를 바라며, 그럼 오늘도 모두들 해피코딩하세요 :)