diff --git a/client/src/composition/Feed/index.tsx b/client/src/composition/Feed/index.tsx index 0a2691ec..4528411d 100644 --- a/client/src/composition/Feed/index.tsx +++ b/client/src/composition/Feed/index.tsx @@ -31,7 +31,7 @@ const OFFSET = 3; const FeedContainer = () => { const [feeds, setFeeds] = useState([]); const [cursor, setCursor] = useState('9999-12-31T09:29:26.050Z'); - const [isLoading, setIsLoading] = useState(false); + const checkEnd = useScrollEnd(); // hooks 에서 useQuery 1 부터 시작 const { loading, data, fetchMore } = useQuery(GET_FEEDS, { @@ -42,8 +42,6 @@ const FeedContainer = () => { checkEndFeed(); }, [checkEnd]); - const target = useRef(null); - const fetchMoreFeed = async () => { const { data: value } = await fetchMore({ variables: { @@ -67,9 +65,8 @@ const FeedContainer = () => { setFeeds([...feeds, ...value.feeds]); }; - const checkEndFeed = () => { + const checkEndFeed = (): void => { fetchMoreFeed(); - return null; }; return ( diff --git a/client/src/hooks/useScrollEnd.tsx b/client/src/hooks/useScrollEnd.tsx index 46651560..859f96b1 100644 --- a/client/src/hooks/useScrollEnd.tsx +++ b/client/src/hooks/useScrollEnd.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect } from 'react'; const useScrollEnd = () => { // state를 생성합니다. const [state, setState] = useState(false); @@ -9,16 +9,14 @@ const useScrollEnd = () => { document.documentElement.clientHeight === document.documentElement.scrollHeight ) { - console.log("scroll Y : ", window.scrollY); setState(true); } else { - console.log("scroll Y! : ", window.scrollY); setState(false); } }; useEffect(() => { - window.addEventListener("scroll", onScroll); - return () => window.removeEventListener("scroll", onScroll); // <---- 집중 !!! + window.addEventListener('scroll', onScroll); + return () => window.removeEventListener('scroll', onScroll); }, []); return state; };