UseFocusEffect 의 읽히는 순서

UseFocusEffect 의 읽히는 순서

import { useState, useCallback } from "react";
import { useColorScheme, FlatList, View } from "react-native";
 .....

export default function MyReview({

// 1.

  setIsOpenMenuModal,
  isOpenMenuModal,
  from,
}) {
  
  ...
  
  const openMenuHandler = (item) => {
    setReviewId(item.id);
    setReviewObj(item);
    setIsOpenMenuModal(true);
  };
// 1 끝

// 3.
  useFocusEffect(
    useCallback(() => {
      const q = query(
        collection(dbService, "reviews"),
        orderBy("createdAt", "desc"),
        where("userId", "==", authService.currentUser?.uid ?? "")
      );
       
       ...
  );
  
  // 3. 끝

  return (
  
  // 2. 
  
    <FlatList
      horizontal
      contentContainerStyle={{ paddingHorizontal: 20 }}
      showsHorizontalScrollIndicator={false}
      data={reviews}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => {
        if (item.itemId) {
          return (
            <MyReviewWrap>
              <ReviewItem>
                <Row>
                  <Vote vote_average={item.rating} />
                  <MenuBtn onPress={() => openMenuHandler(item)} title="︙">
                    <Fontisto name="more-v-a" size={14} color="gray" />
                  </MenuBtn>
                </Row>
                <ReviewTitle numberOfLines={1}>{item.title}</ReviewTitle>
                <ReviewText numberOfLines={1}>{item.contents}</ReviewText>
                <ReviewDate>
                  {new Date(item.createdAt).toLocaleDateString("kr")}
                </ReviewDate>
              </ReviewItem>
            </MyReviewWrap>
          );
        }
      }}
    />
  );
}

// 2. 끝

const Row = styled.View`
  flex-direction: row;
  justify-content: space-between;
`;


....

코드의 순서대로 1, 2, 3번 의 순서로 읽힌다.

지금까지 위에서 아래로 쭉 렌더링 되는줄 알았지만

useEffect 는 의존배열에 [] 아무것도 주지 않으면
화면이 렌더링 될때 실행된다고 생각했지만

return 이 모두 렌더링 된 후! 실행이 되는 것이었다.!

까먹지 말자!