react
-
react-query useInfiniteQuery 데이터 편하게 사용하기Tip 2022. 8. 31. 17:45
(이 글은 react-query@3.19.1을 바탕으로 작성되었습니다) react-query를 사용할 때 useQuery만큼이나 많이 사용하는 것이 useInfiniteQuery이다. 특정 웹 사이트의 경우 useQuery보다 많이 사용한다. 사용 방법 자체도 무척 간편하게 되어 있어서 문서를 확인하고 사용하는데 별다른 제약이 없다. 그런데 데이터가 오는 방식이 특이하다. 만약 데이터를 axios로 받아왔을 때의 형식은 아래와 같다. { data: { posts: [...] } } 이런 데이터 형태는 추가로 받아올 때 역시 동일하다. 나의 경우 react-query를 사용하기 전 redux-toolkit을 사용할 때는 아래와 같은 방법을 사용했다. // lodash 미사용 state.posts = [....
-
NextJS Data Fetching (feat. CSR, SSR, SSG, ISR)Next.js 2022. 8. 29. 16:43
1. Data Fetching이란 SPA가 Web 세상에서 새로운 시대를 열었다는 것에 의문을 제시할 사람은 없을 것이다. 기존에 페이지를 이동할 때마다 새로고침이 되며 빈 화면을 봐야 했던 이용자들은 이제 로딩이 없는 것과 비슷한 환경에서 사이트를 사용할 수 있게 되었기 때문이다. 이는 확실히 획기적이었고 대다수의 웹사이트가 이제는 SPA로 되어있고 변화하고 있다. 하지만 SPA에도 치명적인 문제가 있었다. 웹사이트의 운영자들은 어떻게든 네이버나 구글 등의 검색 결과에 자신의 웹사이트가 노출되기를 원하는데 SPA의 경우 페이지를 모두 그린 뒤 데이터를 가지고 오는 CSR방식이 기본이기에 검색 사이트들의 Bot이 웹사이트에 접속했을 때 아무것도 없는 빈 페이지로 판별해 버렸기 때문이다. (물론 최근 구글..
-
NextJS API 활용하기 (feat. Prisma, Planetscale)Next.js 2022. 8. 23. 16:35
(해당 글은 next@12.2.2, prisma@4.1.1, pscale@0.112.0을 기반으로 작성되었습니다.) 1. NextJS Api Router nextJS의 9 버전은 여러 의미로 큰 변화가 있던 버전이라고 생각한다. 단순히 React의 프레임워크를 뛰어넘어 내부에서 server를 사용할 수 있게 된 버전이기 때문이다. 그 방법 역시 무척 간단한데 pages 폴더 내부에 api폴더를 만들고 사용하려는 api의 이름으로 js(ts) 파일을 만들어 사용하기만 하면 되는 방식이었다. 이것으로 이제 간단한 Serverless 환경의 개발이 가능하게 변경되었다. 그리고 이제 nextJS가 12 버전까지 오르며 ISR이나 edge runtime 등의 기능이 추가되며 Next 역시 앞으로의 발전 방향에 A..
-
React 최신 상태관리 라이브러리 비교하기 (feat. zustand, redux-toolkit, jotai, recoil)React 2022. 8. 16. 17:28
1. redux-toolkit(rtk)을 그만 사용하려는 이유 나의 경우 react를 시작하고 redux-saga -> mobx -> redux-saga -> redux-toolkit 순으로 사용했을 정도로 redux의 사용을 좋아하고 즐겨 사용했다. 하지만 이제 api 통신을 react-query로 변경하고 프로젝트를 진행하는 요즘에는 rtk를 통한 글로벌 상태 관리를 하는 경우가 무척 줄어들거나 아예 사용하지 않는 프로젝트들이 생겨났다. 상황이 이렇게 되니 rtk의 단점들이 보이기 시작했고 두 가지 글로벌 상태 관리 라이브러리를 선택했다. 2. zustand와 jotai 두 라이브러리는 각각 독일어와 일본어로 상태를 뜻하는 단어로 이름에서 알 수 있듯이 모두 Poimandres의 카토 다이시가 주가 ..
-
NextJS에서 react-query 사용하기Next.js 2022. 8. 15. 17:00
(해당 글은 next@12.2 react-query@3.39.1을 바탕으로 작성되었습니다.) 1. 왜 react-query인가? 이제 개발을 할 때 react-query는 필수에 가까운 요소가 됐다. 물론 NextJS를 사용하고 문서를 읽어본 사람들이라면 이런 의문을 가질 수 있다. swr이 있는데? 물론 두 라이브러리 모두 좋은 라이브러리이다. 하지만 react-query를 사용해야 되는 이유를 간략하게 설명하겠다. 1. swr은 데이터 패칭(fetching)을 위한 리액트 훅이다. 이 말을 간단하게 이야기하자면 swr과 react-query는 get을 위한 useQuery는 존재한다. 그러나 post를 위한 useMutation은 react-query에만 존재한다. 물론 swr 역시 mutate가 있..
-
NextJS 사이트맵(Site Map) 만들기Next.js 2022. 7. 14. 16:47
(해당 글은 next@12.2 next-sitemap@3.1을 바탕으로 작성되었습니다.) 1. Site Map은 왜? 모든 게 다 좋아 보이는 NextJS를 사용할 때 문제가 되는 부분이 있다. 바로 사이트맵을 생성하는 일이다. 물론 사이트맵을 생성하지 않는 방법도 있다. 실제로 구글에서는 아래와 같이 사이트 맵의 필요성을 정의하고 있다. 매우 큰 사이트. 크기로 인해 Google 웹 크롤러가 신규 또는 최근에 업데이트된 페이지를 지나칠 수 있습니다. 서로 잘 연결되지 않거나 전혀 연결되지 않는 콘텐츠 페이지를 보관 처리하는 대규모 자료실이 있는 사이트. 사이트 페이지가 서로 자연스럽게 참조되지 않는 경우 페이지를 사이트맵에 표시하면 Google이 일부 페이지를 누락하는 일이 생기지 않습니다. 연결되는 ..
-
Lazy initialization로 useState 최적화하기Tip 2022. 6. 27. 17:43
react로 프로젝트를 만들 때면 생각보다 초기값을 넣어주고 해당 값이 앱을 재 실행하기 전까지 변하지 않는 경우가 많다. 평소라면 이런 초기값 할당은 큰 문제가 없다. 하지만 초기값으로 복잡한 값을 할당하거나 한 경우 reRender를 실행할 때마다 해당 함수가 계속 재 실행되게 되어 불필요한 낭비가 발생한다. 이를 해결하는 것은 무척 간단하다. const getLocalData = () => window.localStorage('cacheCount'); // 평소 [count, setCount] = useState(getLocalData()); // Lazy Initialization [count, setCount] useState(()=> getLocalData()); 위와 같이 useState의 ..
-
NextJS에서 react-query SSR 데이터 사용하기Next.js 2022. 6. 7. 15:18
react-query는 개인적으로 요즘 가장 핫한 라이브러리라고 생각한다. redux의 thunkAPI 등을 많이 사용했던 이전의 방식에서 react-query를 통해 get과 post방식의 query를 손쉽게 사용할 수 있으면서 데이터를 손쉽게 cache 할 수 있다는 점에서 무척이나 매력적인 라이브러리라고 할 수 있다. nextJS는 요즘에는 react개발자라면 모두 알 정도로 유명한 프레임워크이다. 그리고 nextJS를 유명하게 만든 가장 큰 요소 중 하나는 SSR이라고 생각하는데, 아쉽게도 react-query의 hook의 경우 SSR이 아닌 CSR방식으로 데이터를 가지고 온다. 이제 본격적으로 react-query의 데이터를 SSR로 사용할 수 있는 2가지 방법에 대해 설명하겠다. 1. Init..