[리액트 네이티브] useFocusEffect 를 이용하여 화면 새로고침

리액트 네이티브에서 useFocusEffect는 리액트 네비게이션(Navigation) 라이브러리와 함께 사용되는 훅(Hook) 중 하나입니다. 이 훅은 화면의 포커스가 변경될 때 실행되는 효과를 만들어줍니다. 주로 화면 포커스가 변경되면 필요한 작업을 처리하는 데 사용됩니다. 예를 들어, 화면이 보여질 때 데이터를 새로고침하거나, 화면에서 벗어날 때 타이머를 정리하는 등의 작업에 유용합니다.

 

useFocusEffect 훅 사용하기:

import React, { useEffect, useCallback } from 'react';
import { View, Text } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

const MyScreen = () => {
  useFocusEffect(
    useCallback(() => {
      // 현재 컴포넌트로 포커스될 때 실행되는 작업들을 이 곳에 작성합니다.
      console.log('Screen is focused!');

      return () => {
        console.log('Screen is unfocused or unmounted!');
        // 현재 컴포넌트가 포커스를 잃을 때 정리(clean-up) 작업을 수행합니다.
      };
    }, [])
  );

  return (
    <View>
      <Text>My Screen</Text>
    </View>
  );
};

export default MyScreen;

위의 코드에서 useFocusEffect는 컴포넌트가 화면의 포커스를 얻거나 잃을 때 콜백 함수를 호출합니다. 콜백 함수의 반환 값으로 clean-up 작업을 정의할 수 있습니다. useCallback을 사용하는 이유는 효율적인 메모리 사용을 위해서입니다.