React Navigation5. 네비게이션 생명주기

 

1. addListenr()

function Profile({ navigation }){
	React.useEffect(() => {
    	const unsubscribe = navigation.addListener('focus', () => {
        	//스크린이 focus 되었을 때 실행될 코드
        });
        return unsubscribe;
    },[navigation]);
    return <ProfileContent />;
}

 

사이드 이펙를 수행하기 위한 방법으로는

이벤트를 수동으로 설정하는 대신 useFocusEffect 훅을 사용할 수 있다.

useFocusEffect는 리액트의 useEffect 훅과 같지만 네비게이션 생명주기에 따라 실행된다.

 

 

2. useFocusEffect() 훅

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

function Profile(){
	useFocusEffect(
    	React.useCallback(() => {
        	// 화면이 focus 될 때 실행될 영역
            return () => {
            	// 화면이 focus에서 벗어났을 때 실행될 영역
                // 정리 함수
            };
        },[])
    );
    return <ProfileContent />;
}

 

 

3. useIsFocused() 훅

• 화면이 focus 되었는 지 아닌지에 따라 다르게 렌더링하기를 원할 떄 사용
• 화면이 focus 되었는 지 여부를 boolean으로 반환함