[React-Native] 페이지 새로고침, goBack() 후 페이지 리렌더링, 새로고침(useIsFocused)

goBack() 이전 페이지 새로고침,리렌더링

React-navigation 을 사용할 때, stack, bottomtab 이동을 한다.

이때, goBack() 은 이전 페이지로 돌아가는 네비 함수이다.

Login 이나 navigate 로 이동한 페이지에서 상태 변화를 주고

goBack() 으로 이전 페이지로 돌아오면 아무런 변화가 없다.
리렌더, 새로고침이 일어나지 않기 때문이다.

useEffect 로 페이지가 새로고침이 일어나지 않았기 때문에 작동하지 않았다.

이때 useIsFocused 를 사용해 주면 된다.

useIsFocused 는 화면이 포커스 되었을때 작동되어
이전 페이지로 돌아왔을때 화면이 포커스 되어 작동한다.

// Login 후 goBack으로 이전 페이지의 변화된 리뷰상태를 받는 중.
import { useIsFocused } from "@react-navigation/native";

const isFocused = useIsFocused();

useEffect(() => {
  
  //리뷰 받아오는 query -> 본문과 상관 없음.
    const q = query(
      collection(dbService, "reviews"),
      orderBy("createdAt", "desc")
    );
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const newReviews = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setReviews(newReviews);
    });
    return unsubscribe;
  
  
  }, [isFocused]);  // 의존배열의 값으로 대입

ex) 로그인 상태에 따른 메뉴바 숨김/보임

로그인 후 메뉴바가 숨김상태.
다른페이지로 이동했다가 와야 메뉴바가 보임.

로그인 후 바로 메뉴바가 보임.