[react-native] useFocusEffect

react-native에서 useFocusEffect는 React Navigation의 기능 중 하나이다.

 

이 훅은 스크린이 포커스 될 때 특정 작업을 수행하도록 설정하는 데 사용된다.

 

useEffect도 해당 페이지가 렌더링 될 때, 수행하는 작업을 지정할 수 있지만 React Navigation에서 화면을 넘기는 행동 자체는 해당 컴포넌트를 원마운트시키지 않기 때문에 페이지의 변경 "때마다" 지정한 함수가 호출되도록 할 수는 없다.

 

useFocusEffect는 반드시 useCallback과 같이 사용해야 하는데, 그렇지 않으면 페이지 안의 컴포넌트가 리렌더링될 때마다(useState 같은 친구가 업데이트될 때마다) 등록한 함수가 실행되어 버린다.

 

바로 한번 직전에 만든 MaterialBottomTabNavigator에서 어떻게 이 Hook이 동작하는지 알아보자.

---

◎MainScreen.js

import React, {useCallback} from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {Text, View, Button} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {useFocusEffect} from '@react-navigation/native';

const Tab = createMaterialTopTabNavigator();

function HomeScreen({navigation}) {
  useFocusEffect(
    useCallback(() => {
      console.log('이 화면을 보고 있어요.');
      return () => {
        console.log('다른 화면으로 넘어갔어요.');
      };
    }, []),
  );
  return (
    <View>
      <Text>Home</Text>
      <Button
        title="Detail 1 열기"
        onPress={() =>
          navigation.push('Detail', {
            id: 1,
          })
        }
      />
    </View>
  );
}

(...)

 

뭐, 사실 특별할 건 없다.

 

useCallback이 내부의 함수를 해당 페이지가 포커스됐을 때 실행하고, 해당 페이지에서 다른 페이지로 넘어갔을 때 return 해줄 동작을 한번 호출한다.

 

이는 어떤 어플을 만들던 필수적으로 아주 자주 사용하게 될 Hook 같으니, 반드시 알아두자.