Coding/Redux11 Redux - Pagnigation(with redux-toolkit and nextjs) 많은 양의 데이터가 있으면 페이지를 나누어서 데이터를 보여주면 된다. 이런 페이지 이동을 할 수 있도록 page list를 page + navigation이 합쳐서 Pagnigation 이라고 부른다. # object - 페이지 리스트 만들기 - 뒤로가기 했을때, 이전 페이지 상태유지 페이지를 이동할 때 마다 backend로 query를 같이 보내서 어떤 페이지인지 몇개의 데이터를 원하는지 보내야한다. 이렇게 query로 보내고 난 후 Url도 같이 이동해주면 이전에 어떤 페이지 항목을 보고 있었지알 수 있다. ex) * page_no는 현재 몇페이지를 보여줄지 * offset은 몇개의 데이터를 받기를 원하는지 http://localhost:3000/api/node/page_no=1&offset=10 #.. 2023. 2. 9. Redux - Redux toolkit(with next js) react 상태를 한곳에서 관리를 하기 위해서 redux, mobx, recoil과 같은 라이브러리를 사용하면 한곳에서 상태를 관리 할 수 있다. 하지만 redux 라이브러리를 사용하기 위해서는 store, reducer, action을 셋팅을 해서 사용을 해야한다. 그래서 오리려 작은 어플리케이션 같은 경우는 셋팅하는 공수가 더 큰 번거로움이 있다. 이를 보완하기 위해 redux-toolkit이 나왔고, 이전에 했던 redux 셋팅에 비해 간소해졌다. 최근 회사에서 redux를 사용하게 되면서 redux를 설치했더니, redux 에서 redux-toolkit을 권유하게 되었고 기존 셋팅에 비해 간소화 된 걸 확인 할 수 있었다. redux를 사용하면 redux-thunk, redux-sage 아니면 r.. 2022. 12. 17. Redux - next.js store에 접근 redux와 next.js를 같이 사용하고 있다면.... SSR이 되면서 초기 data를 받아온 것을 redux에 넣어 뿌려줘야 하지만 next js에 나와있는 getServerSideProps만으로는 redux store에 접근할 수 없다. #object * next getServerSideProps 에서 store 접근 ## next-redux-wrapper 7.0 이하 버전 이와 더불어 추가로 설정을 더 해줘야 store 접근 할 수 있다. redux store를 setting 하면서 wrapper를 export를 해줄텐데 여기서 wrapper를 가져와서 사용하면 store에 접근을 할 수 있다. export const getServerSideProps = wrapper.getServerSidePr.. 2021. 10. 16. Redux- search page Scroll 제어하기(무한 scroll down) Redux를 활용하여 Scroll을 일정 위치를 도달 했을 때, api call을 하면서 data를 받아와 render 시켜주는 기능을 구현했다. scroll이 최종하단에 도달했을 때, api call을 요청 하도록 했다. (search api는 github api docs를 활용 link: docs.github.com/en/rest/reference/search) search를 하는 곳에 useEffect를 걸어서 window.innerHeight + documen.documentElement.scrollTo 값이 document.documentElement.offsetHeight 값이 같을 때, dispatch를 이용하여 addPage() 함수가 실행이 된다. *innerHeight은 화면의 크기를 .. 2021. 4. 4. 이전 1 2 3 다음 반응형
