항해99 10주차 WIL / 메인페이지검색/무한스크롤

univBoard, freeBoard에 검색창이 있고
메인페이지에서 검색창이 있는데
메인페이지에 있는 검색창을 구현했다
무한스크롤까지!

무한스크롤까지 내가 구현을 한건 아니고...

백엔드가 univBoard / freeBoard검색 api구현해준거를 연결해서
내가 뷰 잡아준거에 꽂아넣기만하면 되는 그런 간단한..말로하면 간단한

감자대가리 김정후한테는 오래걸리는 작업

다른 api연결과는 다르게 무한스크롤을 위해 api연결을 검색하는 컴포넌트안에 한번에 다 구현을 했다

    //게시물 요청 정보
    const MainSearchQueryDB = {
        keyword: Keyword,
        pageSize: 10,
        pageNum: currentPage,
    };

    ///Main Search api 연결
    const MainSearchApi = async ({ keyword, pageSize, pageNum }) => {
        console.log(keyword, pageSize, pageNum);
        setIsLoading(true);
        await instance
            .get("util/search", {
                params: {
                    keyword,
                    pageSize,
                    pageNum,
                },
            })
            .then(res => {
                if (res.data.ok) {
                    console.log("main search response", res.data);
                    setSearchResult(prev => [...prev, ...res.data.result]);
                    setSearchResult(res.data.result);
                    setTotalPage(res.data.totalPage);
                    setNextPage(currentPage + 1);
                    setCurrentPage(prev => prev + 1);
                }
            });
        setIsLoading(false);
    };
    const nextCall = () => {
        MainSearchApi(MainSearchQueryDB);
    };
    const initialCall = async ({ keyword, pageSize, pageNum }) => {
        console.log(keyword, pageSize, pageNum);
        setIsLoading(true);
        await instance
            .get("util/search", {
                params: {
                    keyword,
                    pageSize,
                    pageNum,
                },
            })
            .then(res => {
                if (res.data.ok) {
                    console.log("main search response", res.data);
                    setSearchResult(res.data.result);
                    setTotalPage(res.data.totalPage);
                }
            });
        setIsLoading(false);
    };
    useEffect(() => {
        initialCall(MainSearchQueryDB);
    }, [Keyword]);

이렇게 api연결을!

인피니티 스크롤에 있어서는 내가 손댄게 없어서
코드를 좀 파봐야겠다

import React, { useCallback, useEffect } from "react";
import _ from "lodash";

const InfinityScroll = props => {
    const { nextCall, children, is_loading, is_next, size } = props;
    const throttle = _.throttle(() => {
        let scrollHeight = document.documentElement.scrollHeight;
        let innerHeight = window.innerHeight;
        let scrollTop =
            (document.documentElement && document.documentElement.scrollTop) ||
            document.body.scrollTop;
        let current_height = scrollHeight - innerHeight - scrollTop;

        if (current_height < size) {
            if (is_loading) {
                return;
            }

            nextCall();
        }
    }, size);
    const throttle_callback = useCallback(throttle, [is_loading]);

    useEffect(() => {
        if (is_loading) {
            return;
        }
        if (is_next) {
            window.addEventListener("scroll", throttle_callback);
        } else {
            window.removeEventListener("scroll", throttle_callback);
        }

        return () => window.removeEventListener("scroll", throttle_callback);
    }, [is_loading, is_next]);
    return <>{children}</>;
};

InfinityScroll.defaultProps = {
    children: null,
    nextCall: () => {},
    is_next: false,
    is_loading: false,
};

export default InfinityScroll;