const{Fragment:e,jsx:n,jsxs:r}=arguments[0];function _createMdxContent(t){const c={a:"a",code:"code",img:"img",p:"p",pre:"pre",strong:"strong",...t.components},{Blockquote:i,Heading:o}=c;return i||_missingMdxReference("Blockquote",!0),o||_missingMdxReference("Heading",!0),r(e,{children:[n(o,{type:"h2",children:"App dir에서 Tanstack query 사용하기"}),"\n",n(i,{type:"info",children:r(c.p,{children:["Find the docs at ",n(c.a,{href:"https://tanstack.com/query/latest",children:"https://tanstack.com/query/latest"})]})}),"\n",n(c.p,{children:"현재 진행중인 플젝에 페이지네이션 기능을 react-query로 구현하기로 마음먹었다. 왜냐하면 react-query가 가독성이나 유지보수에 있어서도 useEffect보다 훨씬 나았기 때문이다."}),"\n",n(c.p,{children:"react-query를 사용할려면 QueryClientProvider로 감싸야하는데 서버 컴포넌트에서 context, provider 등을 import 하면 Hydration 에러가 발생한다."}),"\n",n(c.p,{children:'client 측에서 제공하는 API 이기 때문에 "use client"를 써줘야한다.'}),"\n",n(c.p,{children:n(c.img,{src:"/posts/dev/202305-next-react-query/1.png",alt:"폴더 구조"})}),"\n",n(c.p,{children:"그래서 app 디랙토리에 따로 뺴주었다. MUI 셋업도 비슷한 이유에서 빼놨다."}),"\n",n(i,{type:"warn",children:r(c.p,{children:[n(c.strong,{children:"[2024]"})," - 나중에 클라이언트 providers 들은 따로 폴더로 빼서 관리했다."]})}),"\n",n(c.pre,{children:n(c.code,{className:"language-tsx",children:'// app/ReactQuerySetup.tsx\n\n"use client";\n\nimport { useRef } from "react";\nimport { QueryClient, QueryClientProvider } from "react-query";\n\ninterface Props {\n children: React.ReactNode;\n}\n\nexport default function ReactQuerySetup({ children }: Props) {\n const queryClientRef = useRef();\n if (!queryClientRef.current) {\n queryClientRef.current = new QueryClient();\n }\n return (\n \n {children}\n \n );\n}\n'})}),"\n",n(c.p,{children:"client 컴포넌트에서 client 인스턴스를 만들어줬다.\n아니면 이렇게 해도 된다"}),"\n",n(c.pre,{children:n(c.code,{className:"language-tsx",children:'"use client";\n\nimport { QueryClient, QueryClientProvider } from "@tanstack/react-query";\nimport { ReactNode } from "react";\n\ntype Props = {\n children: ReactNode;\n};\n\nconst queryClient = new QueryClient();\n\nexport default function ReactQuerySetup({ children }: Props) {\n return (\n {children}\n );\n}\n'})}),"\n",n(c.pre,{children:n(c.code,{className:"language-tsx",children:'// app/layout.tsx\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n \n

\n {children}\n

Loading...

Posts

Next13에서 react-query 사용