react navigation 배우기 6부 - 네비게이션 라이프 사이클

https://reactnavigation.org/docs/navigation-lifecycle

https://reactnavigation.org/docs/navigation-lifecycle/

1. react navigation의 라이프 사이클

한줄 요약하면 리액트의 컴포넌트 라이프사이클 개념을 고대로 가져와서 react navigation에 적용할 수 있습니다.

 

 

 

예를 들어 봅시다.

 

스택네비게이터 안에 스크린 A와 B가 있습니다. 먼저 스크린 A를 호출하면 componentDidMount가 호출됩니다.

 

이후 B를 호출하면 역시 componentDidMount가 호출됩니다. 허나 A의 componentWillUnmout는 호출되지 않습니다.

왜냐하면 A는 여전히 스택에서 mount 되어있기 때문입니다.

 

이후 B에서 백버튼을 누르면 B의 componentWillUnmout가 호출됩니다. 허나 A의 componentDidMount는 호출되지 않습니다. 이미 마운트 되어 있으니깐요.

 

 

2. React Navigation의 lifecycle 이벤트

자 동작원리는 이해했습니다. 그럼 스크린이 focus 될때와 leaving 될 때는 어떻게 구분할까요?

 

리액트 네비게이션은 이에 focus와 blur라는 이벤트를 제공하고 이를 listen할 수 있습니다.

 

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

 

또는 useFocusEffect 라는 hook이 있으며 이를 사용하여 focus와 blur의 작업을 정해줄 수 있습니다.

다만 이 hook은 react navigation의 라이프사이클을 따릅니다.

(이 hook이 훨씬 좋아보이네요)

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

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused

      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}

 

 

 

또한 navigation에서는 useIsFocused라는 hook을 제공하는데 스크린이 포커스 되어있는지 아닌지를 나타내줍니다.

이를 이용하여 focus일때와 아닐때의 view를 다르게 구성할 수 있습니다

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

// ...

function Profile() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}