React Native : 다른 Screen 이동후 돌아왔을 때 새로고침 방법 (stack screen / tab screen)

React Navigation 사용 시 원래 화면으로 돌아왔을 때 새로고침

 

React Navigation의 Stack Navigator 이나 BottomTab Navigator을 통해 화면이동을 하고 난 뒤 원래 화면으로 돌아왔을 때 원래 Screen 의 화면을 새로고침해야 할 때가 있습니다. 

 

하지만 React Navigation의 Navigator를 통해 화면이동을 할때, 기존의 상태를 저장하기 때문에 다시 원래 화면으로 돌아온다고 해도 화면 컴포넌트의 라이프사이클이 다시 수행되지 않아서 새로고침이 되지 않는 문제가 있습니다.

 

저도 개발을 하던 도중에 원래 Screen으로 돌아올 때마다, AsyncStorage에서 데이터를 갱신해야 하는 상황이 생겼었는데요,  이러한 경우에 어떻게 해결하면 좋을지 한번 알아보도록 하겠습니다. 

 

 

Bottom Tab Navigatior 을 사용할 때 새로고침 방법

 

Tab.Navigator 은 React Navigation에서 하단의 Bottom Tab을 이용하여 화면을 이동할 수 있도록 하는 Navigator입니다.

 

const Tab = createBottomTabNavigator();

export default function TabStack() {
  ...

  return (
    <Tab.Navigator
      ...
      }}>
        ...
      <Tab.Screen
        name="MyPage"
        component={screens.MyPage}
        options={{
          ...
          unmountOnBlur: true,
          ...
        }}
      />
    </Tab.Navigator>
  );
}

 

Tab.Screen의 옵션을 조정하면 원래 화면으로 돌아왔을 때 새로고침이 되도록 동작하게 할 수 있습니다.

 

Tab.screen 의 unmountOnBlur 속성은 탭 내에서 화면을 전환할 때 화면 컴포넌트의 마운트와 언마운트를 제어하는 값인데요, true 로 설정되어 있으면 해당 탭 화면이 전환될 때마다 화면 컴포넌트가 unmount 되었다가 다시 탭으로 돌아오면 mount 되도록 설정할 수 있습니다. 이를 통해 새로고침이 되도록 구현할 수 있습니다.

 

 

 

 

Stack Navigatior 을 사용할 때 새로고침 방법 (+bottom tab navigator에도 적용 가능)

 

Stack Navigator를 통해 화면을 이동할 때에도 다른 Screen에서 원래 스크린으로 뒤로가기 버튼을 눌러서 이동할때 새로고침이 동작하지 않습니다. 하지만 Stack Navigator의 옵션에는 기본적으로 unmountOnBlur와 같은 속성이 없기 때문에 다른 방법을 이용해서 새로고침을 구현해야 합니다.

 

import { useIsFocused } from '@react-navigation/native';

const screenComponent = () => {
  const isFocused = useIsFocused();

  useEffect(() => {
    // 다른 화면을 갔다왔을때 갱신
    getData();
  }, [isFocused]);
}

 

위와 같이 @react-navigation/native 에서 제공하는 useIsFocus 훅을 이용하면 됩니다. useIsFocus는 화면이 포커스를 얻거나 잃을 때 값을 얻어올 수 있는데요, 이를 통해 원래 화면으로 뒤로가기를 통해 돌아왔을 때 수행할 동작을 useEffect를 통해 구현하면 됩니다.

 

 

 

 

 

마무리

 

오늘은 React Navigation에서 화면 이동 후 새로고침을 하는 방법에 대해서 알아보았습니다.

 

다음에도 알찬 내용들로 포스팅해 보겠습니다. 

 

감사합니다. 

 

 

 

출처

 

- https://velog.io/@760kry/React-Native-stack-or-tab-%EC%8A%A4%ED%81%AC%EB%A6%B0-%EC%9D%B4%EB%8F%99-%EC%8B%9C-%EC%83%88%EB%A1%9C-%EA%B3%A0%EC%B9%A8