SSR, react-intersection-observer 적용 시 문제

Question

안녕하십니까 좋은 강의 및 질문 답변에 항상 감사드립니다. 다름이 아니라 공지사항에 있는 글을 읽고 posts의 scrolling 을 react-intersection-observer를 적용해 보았습니다. 문제는 SSR 적용시 첫 로딩화면에서 scrolling 시 LOAD_POSTS_REQUEST가 dispatch되지 않는 것입니다. console을 찍어보니 useEffect 조건 중 hasMorePosts와 loadPostsLoading은 각각 true, false로 만족하는데 lastId가 undefined가 나옵니다. redux를 확인해봤을 때는 mainPosts의 글들이 보이는데 lastId는 왜 undefined인지 모르겠습니다.. 혹시 ref나 inView 때문인가요? 처음 로딩시 redux 입니다. (context.store.dispatch에 LOAD_POSTS_REQUEST를 넣어봐도 scrolling이 적용되지 않습니다.) 아래는 index.js의 코드입니다. const Home = () => { const dispatch = useDispatch (); const { me } = useSelector (( state ) => state . user ); const { mainPosts , hasMorePosts , loadPostsLoading , retweetError } = useSelector (( state ) => state . post ); useEffect (() => { if ( retweetError ) { alert ( retweetError ); } }, [ retweetError ]); const [ ref , inView ] = useInView (); useEffect ( () => { // 사용자가 마지막 요소를 보고 있고, 로딩 중이 아니라면.. if ( inView && hasMorePosts && ! loadPostsLoading ) { console . log ( 'hasMorePosts' , hasMorePosts ); console . log ( 'loadPostsLoading' , loadPostsLoading ); const lastId = mainPosts [ mainPosts . length - 1 ]?. id ; console . log ( 'lastId' , lastId ); console . log ( 'mainPosts' , mainPosts ); console . log ( 'mainPosts[mainPosts.length - 1]' , mainPosts ); console . log ( 'lastId' , lastId ); dispatch ({ type : LOAD_POSTS_REQUEST , lastId , }); } }, [ inView , hasMorePosts , loadPostsLoading , mainPosts ], ); return ( < AppLayout > { me && < PostForm /> } { mainPosts . map (( post ) => < PostCard key = { post . id } post = { post } /> ) } < div ref = { hasMorePosts && ! loadPostsLoading ? ref : undefined} /> ); }; export const getServerSideProps = wrapper . getServerSideProps ( async ( context ) => { // backend server에 쿠키 전달 const cookie = context . req ? context . req . headers . cookie : '' ; axios . defaults . headers . Cookie = '' ; if ( context . req && cookie ) { axios . defaults . headers . Cookie = cookie ; } context . store . dispatch ({ type : LOAD_MY_INFO_REQUEST , }); // 위 코드까지 진행하면 Request만 진행하고 다시 client 페이지로 돌아온다. // 따라서 Success 까지 진행시키고 데이터를 받아오는 소스가 필요 context . store . dispatch ( END ); // sagaTask는 configureStore.js 에서 정의 await context . store . sagaTask . toPromise (); }); export default Home ;

제로초(조현영) · Answer

저렇게 콘솔 쭈르륵 찍었을 때 콘솔 로그 어떻게 남나요?