인프런 커뮤니티 질문&답변

작성자 없음

작성자 정보가 삭제된 글입니다.

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

LoadMore : 게시글 일부만 불러오기, 더 불러오기

더보기 안없어짐

작성

299

안녕하세요. 드디어 마지막 강의까지 듣게 되었습니다. 근데 마지막 문제가 생겼습니다.ㅠㅠ 게시물을 끝까지 다 보고나서 더보기 버튼이 안사라지는데 코드를 비교해보면 변수명 제외하고는 일치하는 것 같은데 이유를 잘 모르겠습니다.. 다른 기능은 잘 작동해요!

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import List from './Post/List'

function MainPage() {
    const [sort, setSort] = useState("최신순")
    const [postList, setPostList] = useState([])
    const [searchTerm, setSearchTerm] = useState("")
    const [skip, setSkip] = useState(0)
    const [loadMore, setLoadMore] = useState(true)

    const getLoadMore = ()=>{
        let body = {
            sort : sort,
            searchTerm : searchTerm,
            skip : skip
        }

        axios.post('/api/post/list', body)
        .then(res=>{
            if(res.data.success){
                setPostList([...postList, ...res.data.postList])
                setSkip(skip + res.data.postList.length)
                if (res.data.postList.lengh < 3){
                    setLoadMore(false)
                }
            }
        }).catch(err=>{
            console.log(err)
        })
    }
   
    const getPostList = ()=>{

        setSkip(0)

        let body = {
            sort : sort,
            searchTerm : searchTerm,
            skip : 0
        }

        axios.post('/api/post/list', body)
        .then(res=>{
                setPostList([...res.data.postList])
                setSkip(res.data.postList.length)
                if (res.data.postList.lengh < 3){
                    setLoadMore(false)
                }
                if (res.data.postList.length == 0) {
                    setLoadMore(false);
                  }
        }).catch(err=>{
            console.log(err)
        })
    }

    useEffect(()=>{
        getPostList()
    }, [sort])

    const Search = (e)=>{
        getPostList()
    }

  return (
    <div>
        <button onClick={()=>setSort("최신순")}>최신순</button>
        <button onClick={()=>setSort("인기순")}>인기순</button>
        <input type="text" value={searchTerm} onChange={e=>setSearchTerm(e.target.value)}/>
        <button onClick={(e)=>Search(e)}>검색</button>
        <List postList={postList}/>
        {loadMore && <button onClick={()=>getLoadMore()}>더 보기</button>}
    </div>
  )
}

export default MainPage