Refact: isFetching과 isReachedEnd를 state가 아닌 useRef로 관리

Author: mimizae

src/pages/Home/OOTD/index.tsx

@@ -14,31 +14,35 @@ const OOTD: React.FC = () => {
 	const [modalContent, setModalContent] = useState('알 수 없는 오류입니다.\n관리자에게 문의해 주세요.');
 	const [isStatusModalOpen, setIsStatusModalOpen] = useState(false);
 
-	const [reachedEnd, setReachedEnd] = useState(false);
-	const [isFetching, setIsFetching] = useState(false);
+	// API 요청 중인지 확인하는 변수 (렌더링 없이 상태 관리)
+	const isFetchingRef = useRef(false);
+	// 모든 데이터를 불러왔는지 확인하는 변수
+	const isReachedEndRef = useRef(false);
 
-	const feedPageRef = useRef(1); // 현재 페이지 번호를 참조하는 변수, 리렌더링 없이 값만 업데이트 하기 위해 상태가 아닌 useRef 사용
+	// 현재 페이지 번호를 참조하는 변수, 리렌더링 없이 값만 업데이트하기 위해 상태가 아닌 useRef 사용
+	const feedPageRef = useRef(1);
 
 	// 세션 스토리지에서 이전 스크롤 위치를 가져와 초기화
 	const savedScrollPosition = sessionStorage.getItem('scrollPosition');
 	const scrollPositionRef = useRef(Number(savedScrollPosition) || 0);
 
-	const observerRef = useRef<IntersectionObserver | null>(null); // IntersectionObserver 인스턴스를 참조하는 변수
-	const loadMoreRef = useRef<HTMLDivElement | null>(null); // 더 많은 데이터를 로드할 때 관찰할 마지막 요소의 DOM을 참조
+	// IntersectionObserver 인스턴스를 참조하는 변수
+	const observerRef = useRef<IntersectionObserver | null>(null);
+	// 더 많은 데이터를 로드할 때 관찰할 마지막 요소의 DOM을 참조
+	const loadMoreRef = useRef<HTMLDivElement | null>(null);
 
 	// 전체 게시글(피드) 조회 API
 	const getPostList = async () => {
-		if (reachedEnd || isFetching) return;
-		// 사용자가 스크롤을 빠르게 내리거나 ntersection Observer가 여러 번 트리거될 경우, 중복된 API 요청 발생 가능.
-		// 이를 막기 위해 isFetching 상태를 확인하고, 현재 요청 중인 상태라면 추가 요청을 막음
+		// 모든 데이터를 불러왔거나 요청 중이라면 함수 실행 중단
+		if (isReachedEndRef.current || isFetchingRef.current) return;
 
-		setIsFetching(true);
+		isFetchingRef.current = true; // 요청 중임을 표시
 		try {
 			const response = await getPostListApi(feedPageRef.current, 20);
 
 			if (response.isSuccess) {
 				if (response.data.post.length === 0) {
-					setReachedEnd(true);
+					isReachedEndRef.current = true; // 더 이상 불러올 데이터가 없음을 표시
 				} else {
 					setFeeds((prevFeeds) => [...prevFeeds, ...response.data.post]);
 					feedPageRef.current += 1;
@@ -49,28 +53,29 @@ const OOTD: React.FC = () => {
 			setModalContent(errorMessage);
 			setIsStatusModalOpen(true);
 		} finally {
-			setIsFetching(false);
+			isFetchingRef.current = false;
 		}
 	};
 
 	useEffect(() => {
-		if (reachedEnd && observerRef.current && loadMoreRef.current) {
-			observerRef.current.unobserve(loadMoreRef.current);
-			return; // 데이터의 끝에 다다르면 옵저버 해제. (더이상 피드가 없으면)
+		if (isReachedEndRef.current && observerRef.current && loadMoreRef.current) {
+			observerRef.current.unobserve(loadMoreRef.current); // 데이터의 끝에 다다르면 옵저버 해제 (더이상 피드가 없으면)
+			return;
 		}
 
-		observerRef.current = new IntersectionObserver( // Intersection Observer 생성
+		// Intersection Observer 생성
+		observerRef.current = new IntersectionObserver(
 			debounce((entries) => {
 				const target = entries[0];
 				console.log('Intersection Observer:', target.isIntersecting);
-				if (target.isIntersecting && !isFetching && !reachedEnd) {
-					// 요소가 화면에 보이고 있고, 요청 중이 아니며며 끝에 도달하지 않았다면 api 호출
+				if (target.isIntersecting && !isFetchingRef.current && !isReachedEndRef.current) {
+					// 요소가 화면에 보이고 있고, 요청 중이 아니며 끝에 도달하지 않았다면 API 호출
 					getPostList();
 				}
-			}, 300), // 디바운스 적용해 스크롤 이벤트 제어. 스크롤마다 이벤트 호출하는 것이 아닌 마지막 스크롤 이후 300ms동안 동작이 없으면 이벤트 호출
+			}, 300), // 디바운스 적용, 마지막 스크롤 이후 300ms 동안 동작이 없으면 이벤트 호출
 			{
 				root: null,
-				rootMargin: '100px', // // 요소가 보이기 100px 전에 미리 데이터 로드
+				rootMargin: '100px', // 요소가 보이기 100px 전에 미리 데이터 로드
 				threshold: 0, // 요소가 아주 조금이라도 보이면 트리거
 			},
 		);
@@ -80,12 +85,12 @@ const OOTD: React.FC = () => {
 			observerRef.current.observe(loadMoreRef.current);
 		}
 		return () => {
-			// 컴포넌트가 언마운트되거나 의존성이 변경될 때 옵저버 해제
+			// 컴포넌트 언마운트 시 옵저버 해제
 			if (observerRef.current && loadMoreRef.current) {
 				observerRef.current.unobserve(loadMoreRef.current);
 			}
 		};
-	}, [isFetching, reachedEnd]);
+	}, []);
 
 	useEffect(() => {
 		// 첫 로드 시 API 호출