무한스크롤 request 호출문제

선생님 이번에 무한스크롤 구현하면서 지금 리퀘스트 요청이 여러번 발생하는걸 if문에 로딩시에만 if문이 발생하게 고쳐서 여러번 반복되게 하는걸 한번만 호출 할수있게 고치신걸로 아는데요 저도 분명히 고쳤는데 호출이 2번씩일어나는데 한번 봐주시면 감사하겠습니다. 코드 여러군데 봐도 왜 호출이 두번 일어나는지 모르겠네요 한번 봐주시면 감사하겠습니다.

//index.js

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import AppLayout from '../components/AppLayout'
import PostForm from '../components/PostForm'
import PostCard from '../components/PostCard'
import { LOAD_POST_REQUEST } from '../reducers/post'

const Home = () => {
  const dispatch = useDispatch();
  const { me } = useSelector((state) => state.user)
  const { mainPosts, hasMorePost, getPostLoadding } = useSelector((state) => state.post)

  useEffect(() => {
    dispatch({
      type: LOAD_POST_REQUEST,
    })
  }, [])

  useEffect(() => {
    function onScroll() {
      console.log(window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight)
      if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
        if(hasMorePost && !getPostLoadding){
          dispatch({
            type: LOAD_POST_REQUEST,
          })
        }
      }
    }
    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
    }
  }, [hasMorePost, getPostLoadding])

  return (
    <AppLayout>
      {me && <PostForm />}
      {mainPosts.map((item) => <PostCard key={item.id} post={item} />)}
    </AppLayout>
  )
}

export default Home

/reducers/post.js

import shortId from 'shortid';
import produce from 'immer';
import faker from 'faker';

export const initialState = {
    mainPosts: [{
        id: 1,
        User: {
            id: 1,
            nickname: '제로초',
        },
        content: '첫번째 게실글 #해시태그 #익스프레스',
        Images: [{
            id: shortId.generate(),
            src: 'https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?udate=20180726',
        }, {
            id: shortId.generate(),
            src: 'https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg',
        }, {
            id: shortId.generate(),
            src: 'https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg',
        }],
        Comments: [{
            id: shortId.generate(),
            User: {
                id: shortId.generate(),
                nickname: 'nero',
            },
            content: '우와우와'
        }, {
            id: shortId.generate(),
            User: {
                id: shortId.generate(),
                nickname: 'wi',
            },
            content: '힘내자'
        }],
    }],
    imagePath: [],
    hasMorePost : true,
    getPostLoadding: false,
    getPostDone: false,
    getPostErr: null,
    addPostLoadding: false,
    addPostDone: false,
    addPostErr: null,
    removePostLoadding: false,
    removePostDone: false,
    removePostErr: null,
    addCommentLoadding: false,
    addCommentDone: false,
    addCommentErr: null,
}


export const getDemmuyPost = (number) => Array(number).fill().map(() => ({
    id: shortId.generate(),
    User: {
        id: shortId.generate(),
        nickname: faker.name.findName(),
    },
    content: faker.lorem.paragraph(),
    Images: [{
        src: faker.image.image(),
    }],
    Comments: [{
        User: {
            id: shortId.generate(),
            nickname: faker.name.findName(),
        },
        content: faker.lorem.sentence(),
    }],
}))

export const LOAD_POST_REQUEST = 'LOAD_POST_REQUEST'
export const LOAD_POST_SUCCESS = 'LOAD_POST_SUCCESS'
export const LOAD_POST_FAILURE = 'LOAD_POST_FAILURE'

export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'
export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'
export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'

export const REMOVE_POST_REQUEST = 'REMOVE_POST_REQUEST'
export const REMOVE_POST_SUCCESS = 'REMOVE_POST_SUCCESS'
export const REMOVE_POST_FAILURE = 'REMOVE_POST_FAILURE'

export const ADD_COMMENT_REQUEST = 'ADD_COMMENT_REQUEST'
export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS'
export const ADD_COMMENT_FAILURE = 'ADD_COMMENT_FAILURE'



export const addPostAction = (data) => {
    console.log(data)
    return {
        type: ADD_POST_REQUEST,
        data
    }
}

export const addCommentAction = (data) => {
    console.log(data)
    return {
        type: ADD_COMMENT_REQUEST,
        data
    }
}

const dummyPost = (data) => (
    {
        id: data.id,
        content: data.content,
        User: {
            id: 1,
            nickname: '제로초',
        },
        Images: [],
        Comments: [],
    }
)

const dummyComment = (data) => (
    {
        id: shortId.generate(),
        content: data,
        User: {
            id: 1,
            nickname: '제로초',
        },
    }
)

const reducer = (state = initialState, action) => {
    return produce(state, (draft) => {
        switch (action.type) {
            case LOAD_POST_REQUEST:
                draft.getPostLoadding = true
                draft.getPostDone = false
                draft.getPostErr = null

                break;
            case LOAD_POST_SUCCESS:
                draft.getPostLoadding = false
                draft.getPostDone = true
                draft.mainPosts = action.data.concat(draft.mainPosts)
                draft.hasMorePost = draft.mainPosts.length < 50
                break;
            case LOAD_POST_FAILURE:
                draft.getPostLoadding = false
                draft.getPostErr = action.err

                break;

            case ADD_POST_REQUEST:
                draft.addPostLoadding = true
                draft.addPostDone = false
                draft.addPostErr = null

                break;
            case ADD_POST_SUCCESS:
                draft.addPostLoadding = false
                draft.addPostDone = true
                draft.mainPosts.unshift(dummyPost(action.data))

                break;
            case ADD_POST_FAILURE:
                draft.addPostLoadding = false
                draft.addPostErr = action.err

                break;
            case REMOVE_POST_REQUEST:
                draft.removePostLoadding = true
                draft.removePostDone = false
                draft.removePostErr = null
                break;

            case REMOVE_POST_SUCCESS:
                draft.removePostLoadding = false
                draft.removePostDone = true
                draft.mainPosts = state.mainPosts.filter((item) => item.id !== action.data)
                break;
            case REMOVE_POST_FAILURE:
                draft.removePostLoadding = false
                draft.removePostErr = action.err
                break;
            case ADD_COMMENT_REQUEST:
                draft.addCommentLoadding = true
                draft.addCommentDone = false
                draft.addCommentErr = null
                break;
            case ADD_COMMENT_SUCCESS:
                const post = draft.mainPosts.find((item) => item.id === action.data.postId)
                post.Comments.unshift((dummyComment(action.data.content)))

                draft.addCommentLoadding = false
                draft.addCommentDone = true
                break;
            case ADD_COMMENT_FAILURE:
                draft.addCommentLoadding = false
                draft.addCommentErr = action.error

            default:
                return state
        }
    })
}

export default reducer

import { delay, all, fork, takeLatest, put, throttle } from "redux-saga/effects";
import {
    ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE,
    REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, REMOVE_POST_FAILURE,
    ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE,
    LOAD_POST_REQUEST, LOAD_POST_SUCCESS, LOAD_POST_FAILURE, getDemmuyPost
} from '../reducers/post'

import { ADD_POST_TO_ME, REMOVE_POST_TO_ME } from "../reducers/user";

import shortId from 'shortid';

function addPostAPI(data) {
    return axios.post('/api/addPost', data)
}

function* addPost(action) {
    try {
        // const result = yield call(addPostAPI, action.data)
        yield delay(1000)
        const id = shortId.generate();
        yield put({
            type: ADD_POST_SUCCESS,
            data: { id, content: action.data }
        })
        yield put({
            type: ADD_POST_TO_ME,
            data: id
        })
    } catch (err) {
        yield put({
            type: ADD_POST_FAILURE,
            data: err.response.data
        });
    }
}

function removePostAPI(data) {
    return axios.post('/api/addPost', data)
}

function* removePost(action) {
    try {
        // const result = yield call(addPostAPI, action.data)
        yield delay(1000)
        yield put({
            type: REMOVE_POST_SUCCESS,
            data: action.data
        })
        yield put({
            type: REMOVE_POST_TO_ME,
            data: action.data
        })
    } catch (err) {
        yield put({
            type: REMOVE_POST_FAILURE,
            data: err.response.data
        });
    }
}

function addCommentAPI(data) {
    return axios.post('/api/addPost', data)
}

function* addComment(action) {
    try {
        // const result = yield call(addPostAPI, action.data)
        yield delay(1000)
        yield put({
            type: ADD_COMMENT_SUCCESS,
            data: action.data
        });
    } catch (err) {
        yield put({
            type: ADD_COMMENT_FAILURE,
            data: err.response.data
        });
    }
}

function loadPostAPI(data) {
    return axios.get('/api/posts', data)
}

function* loadPost(action) {
    try {
        // const result = yield call(addPostAPI, action.data)
        yield delay(1000)
        yield put({
            type: LOAD_POST_SUCCESS,
            data: getDemmuyPost(10)
        });
    } catch (err) {
        yield put({
            type: LOAD_POST_FAILURE,
            data: err.response.data
        });
    }
}

function* watchLoadPost() {
    yield throttle(5000, LOAD_POST_REQUEST, loadPost)
}

function* watchAddPost() {
    yield takeLatest(ADD_POST_REQUEST, addPost)
}

function* watchRemovePost() {
    yield takeLatest(REMOVE_POST_REQUEST, removePost)
}

function* watchCommentPost() {
    yield takeLatest(ADD_COMMENT_REQUEST, addComment)
}


export default function* postSaga() {
    yield all([
        fork(watchAddPost),
        fork(watchCommentPost),
        fork(watchRemovePost),
        fork(watchLoadPost),
    ]);
}