{"id":678,"date":"2025-02-25T11:19:00","date_gmt":"2025-02-25T02:19:00","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=678"},"modified":"2025-02-25T19:48:58","modified_gmt":"2025-02-25T10:48:58","slug":"react-library-tanstack-query","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=678","title":{"rendered":"React Library &#8211; Tanstack Query"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"577\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/tanstackquery-1024x577.png\" alt=\"\" class=\"wp-image-679\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/tanstackquery-1024x577.png 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/tanstackquery-300x169.png 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/tanstackquery-768x433.png 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/tanstackquery.png 1278w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>FrontEnd \uac1c\ubc1c\uc5d0\uc11c \ub370\uc774\ud130 fetching\uacfc \uc0c1\ud0dc \uad00\ub9ac\ub294 \ud544\uc218\uc801\uc778 \uc791\uc5c5\uc785\ub2c8\ub2e4. \ud2b9\ud788, \uc11c\ubc84\uc640\uc758 \ud1b5\uc2e0\uc774 \ube48\ubc88\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ub370\uc774\ud130\uc758&nbsp;\uce90\uc2f1,&nbsp;\ub3d9\uae30\ud654,&nbsp;\uc5d0\ub7ec \ucc98\ub9ac\uc640 \uac19\uc740 \uc791\uc5c5\uc774 \ubcf5\uc7a1\ud574\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7f0 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \ub4f1\uc7a5\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \ubc14\ub85c&nbsp;TanStack Query\uc785\ub2c8\ub2e4. \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294&nbsp;TanStack Query\uac00 \ubb34\uc5c7\uc778\uc9c0, \uc65c \uc0ac\uc6a9\ud558\ub294\uc9c0, \uadf8\ub9ac\uace0 \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud558\ub294\uc9c0\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2><strong>TanStack Query\ub780 \ubb34\uc5c7\uc778\uac00\uc694?<\/strong><\/h2>\n\n\n\n<p><strong>TanStack Query<\/strong>\ub294 React, Vue, Solid \ub4f1 \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 <strong>\uc11c\ubc84 \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac<\/strong>\uc785\ub2c8\ub2e4. \uc8fc\ub85c \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uace0, \uc774\ub97c \uce90\uc2f1\ud558\uba70, UI\uc640 \ub3d9\uae30\ud654\ud558\ub294 \uc791\uc5c5\uc744 \uac04\uc18c\ud654\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h3><strong>TanStack Query\uc758 \uc8fc\uc694 \ud2b9\uc9d5<\/strong><\/h3>\n\n\n\n<ol><li><strong>\ub370\uc774\ud130 \uce90\uc2f1<\/strong>: \uc11c\ubc84\uc5d0\uc11c \uac00\uc838\uc628 \ub370\uc774\ud130\ub97c \uce90\uc2f1\ud558\uc5ec \ubd88\ud544\uc694\ud55c \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uc904\uc785\ub2c8\ub2e4.<\/li><li><strong>\uc790\ub3d9 \ub9ac\ud328\uce6d<\/strong>: \ub370\uc774\ud130\uac00 \uc624\ub798\ub418\uc5c8\uac70\ub098 \ubcc0\uacbd\ub418\uc5c8\uc744 \ub54c \uc790\ub3d9\uc73c\ub85c \ub2e4\uc2dc \uac00\uc838\uc635\ub2c8\ub2e4.<\/li><li><strong>\ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8<\/strong>: \uc11c\ubc84 \uc751\ub2f5\uc744 \uae30\ub2e4\ub9ac\uc9c0 \uc54a\uace0 UI\ub97c \uc989\uc2dc \uc5c5\ub370\uc774\ud2b8\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uac1c\uc120\ud569\ub2c8\ub2e4.<\/li><li><strong>\uc5d0\ub7ec \ubc0f \ub85c\ub529 \uc0c1\ud0dc \uad00\ub9ac<\/strong>: \ub370\uc774\ud130 \uc694\uccad \uc911 \ubc1c\uc0dd\ud558\ub294 \ub85c\ub529 \ubc0f \uc5d0\ub7ec \uc0c1\ud0dc\ub97c \uac04\ub2e8\ud788 \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\ud504\ub9ac\ud328\uce6d(PreFetching)<\/strong>: \uc0ac\uc6a9\uc790\uac00 \ubc29\ubb38\ud560 \uac00\ub2a5\uc131\uc774 \ub192\uc740 \ub370\uc774\ud130\ub97c \ubbf8\ub9ac \uac00\uc838\uc640 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud569\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2><strong>TanStack Query\uc758 \uc8fc\uc694 \uac1c\ub150<\/strong><\/h2>\n\n\n\n<h4><strong>1. \uce90\uc2f1 \ub77c\uc774\ud504\uc0ac\uc774\ud074<\/strong><\/h4>\n\n\n\n<p>TanStack Query\ub294 \ub370\uc774\ud130\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uae30 \uc704\ud574 <strong>\uce90\uc2f1 \ub77c\uc774\ud504\uc0ac\uc774\ud074<\/strong>\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \ub77c\uc774\ud504\uc0ac\uc774\ud074\uc740 \ub370\uc774\ud130\uc758 \uc0c1\ud0dc\ub97c \uc815\uc758\ud558\uace0, \ub370\uc774\ud130\uac00 \uc5b8\uc81c \ub2e4\uc2dc \ud328\uce6d\ub418\uc5b4\uc57c \ud558\ub294\uc9c0 \uacb0\uc815\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>\uce90\uc2f1 \ub77c\uc774\ud504\uc0ac\uc774\ud074\uc758 \uc8fc\uc694 \ub2e8\uacc4<\/strong><\/h5>\n\n\n\n<ol><li><strong>Fresh (\uc2e0\uc120\ud55c \uc0c1\ud0dc)<\/strong>:<ul><li>\ub370\uc774\ud130\ub97c \uac00\uc838\uc628 \uc9c1\ud6c4, \ub370\uc774\ud130\ub294 &#8220;Fresh&#8221; \uc0c1\ud0dc\ub85c \uac04\uc8fc\ub429\ub2c8\ub2e4.<\/li><li>\uc774 \uc0c1\ud0dc\uc5d0\uc11c\ub294 \ucd94\uac00\uc801\uc778 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \uc5c6\uc774 \uce90\uc2dc\ub41c \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li><li><code>staleTime<\/code> \uc635\uc158\uc744 \ud1b5\ud574 \uc774 \uc0c1\ud0dc\uc758 \uc9c0\uc18d \uc2dc\uac04\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Stale (\uc624\ub798\ub41c \uc0c1\ud0dc)<\/strong>:<ul><li><code>staleTime<\/code>\uc774 \uc9c0\ub098\uba74 \ub370\uc774\ud130\ub294 &#8220;Stale&#8221; \uc0c1\ud0dc\ub85c \uac04\uc8fc\ub429\ub2c8\ub2e4.<\/li><li>\uc774 \uc0c1\ud0dc\uc5d0\uc11c\ub294 \uc5ec\uc804\ud788 \uce90\uc2dc\ub41c \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\uc9c0\ub9cc, \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ub2e4\uc2dc \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Inactive (\ube44\ud65c\uc131 \uc0c1\ud0dc)<\/strong>:<ul><li>\ucffc\ub9ac\uac00 \ub354 \uc774\uc0c1 \ud65c\uc131\ud654\ub418\uc9c0 \uc54a\uc73c\uba74, \ub370\uc774\ud130\ub294 &#8220;Inactive&#8221; \uc0c1\ud0dc\ub85c \uc804\ud658\ub429\ub2c8\ub2e4.<\/li><li>\uc774 \uc0c1\ud0dc\uc5d0\uc11c\ub294 \uce90\uc2dc\ub41c \ub370\uc774\ud130\uac00 \uc720\uc9c0\ub418\uc9c0\ub9cc, UI\uc5d0\uc11c \uc0ac\uc6a9\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Garbage Collected (\uc0ad\uc81c \uc0c1\ud0dc)<\/strong>:<ul><li><code>cacheTime<\/code>\uc774 \uc9c0\ub098\uba74 \uce90\uc2dc\ub41c \ub370\uc774\ud130\ub294 \uba54\ubaa8\ub9ac\uc5d0\uc11c \uc0ad\uc81c\ub429\ub2c8\ub2e4.<\/li><li>\uc774 \uc0c1\ud0dc\uc5d0\uc11c\ub294 \ub370\uc774\ud130\ub97c \ub2e4\uc2dc \uc0ac\uc6a9\ud558\ub824\uba74 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \ud1b5\ud574 \uc0c8\ub85c \uac00\uc838\uc640\uc57c \ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>2. useQuery<\/strong><\/h4>\n\n\n\n<p><code>useQuery<\/code>\ub294 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uace0 \uce90\uc2f1\ud558\uba70, \ub85c\ub529 \ubc0f \uc5d0\ub7ec \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc8fc\ub85c&nbsp;<strong>\uc77d\uae30 \uc791\uc5c5<\/strong>(GET \uc694\uccad)\uc5d0 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>\uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>const { data, isLoading, error } = useQuery({\n  queryKey: &#91;'todos'], \/\/ \ucffc\ub9ac \uc2dd\ubcc4\uc790\n  queryFn: fetchTodos, \/\/ \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ud568\uc218\n});<span style=\"background-color: inherit;font-size: inherit;color: var(--wp--preset--color--foreground)\"> <\/span><\/code><\/pre>\n\n\n\n<h5><strong>\uc8fc\uc694 \uc635\uc158<\/strong><\/h5>\n\n\n\n<ol><li><strong><code>queryKey<\/code><\/strong><ul><li>\ucffc\ub9ac\ub97c \uc2dd\ubcc4\ud558\ub294 \uace0\uc720 \ud0a4\uc785\ub2c8\ub2e4. \ubc30\uc5f4 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uad8c\uc7a5\ub429\ub2c8\ub2e4.<\/li><li>\uc608:&nbsp;<code>['todos']<\/code>,&nbsp;<code>['todo', todoId]<\/code><\/li><\/ul><\/li><li><strong><code>queryFn<\/code><\/strong><ul><li>\ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ube44\ub3d9\uae30 \ud568\uc218\uc785\ub2c8\ub2e4.<\/li><li>\uc608:&nbsp;<code>() =&gt; fetch('\/api\/todos').then(res =&gt; res.json())<\/code><\/li><\/ul><\/li><li><strong><code>enabled<\/code><\/strong><ul><li>\ucffc\ub9ac \uc2e4\ud589 \uc5ec\ubd80\ub97c \uc81c\uc5b4\ud569\ub2c8\ub2e4.&nbsp;<code>false<\/code>\ub85c \uc124\uc815\ud558\uba74 \ucffc\ub9ac\uac00 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><li>\uc608:&nbsp;<code>enabled: !!todoId<\/code>&nbsp;(\uc870\uac74\ubd80 \uc2e4\ud589)<\/li><\/ul><\/li><li><strong><code>staleTime<\/code><\/strong><ul><li>\ub370\uc774\ud130\uac00 fresh \uc0c1\ud0dc\ub85c \uc720\uc9c0\ub418\ub294 \uc2dc\uac04(ms)\uc785\ub2c8\ub2e4. fresh \uc0c1\ud0dc\uc5d0\uc11c\ub294 \ub9ac\ud398\uce6d\uc774 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><li>\uae30\ubcf8\uac12\uc740&nbsp;<code>0<\/code>\uc774\uba70, \uc608\ub97c \ub4e4\uc5b4&nbsp;<code>staleTime: 1000 * 60 * 5<\/code>\ub294 5\ubd84 \ub3d9\uc548 \ub370\uc774\ud130\ub97c fresh \uc0c1\ud0dc\ub85c \uc720\uc9c0\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong><code>gcTime<\/code><\/strong><ul><li>\ub370\uc774\ud130\uac00&nbsp;inactive&nbsp;\uc0c1\ud0dc\uac00 \ub41c \ud6c4 \uac00\ube44\uc9c0 \uceec\ub809\uc158(Garbage Collection)\uc744 \ud1b5\ud574 \uba54\ubaa8\ub9ac\uc5d0\uc11c \uc0ad\uc81c\ub418\uae30\uae4c\uc9c0 \ub300\uae30\ud558\ub294 \uc2dc\uac04\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/li><li>\uae30\ubcf8\uac12\uc740&nbsp;<code>5\ubd84<\/code>\uc774\uba70, \uc608\ub97c \ub4e4\uc5b4&nbsp;<code>cacheTime: 1000 * 60 * 10<\/code>\uc740 10\ubd84 \ub3d9\uc548 \ub370\uc774\ud130\ub97c \uce90\uc2dc\uc5d0 \uc720\uc9c0\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong><code>retry<\/code><\/strong><ul><li>\uc694\uccad \uc2e4\ud328 \uc2dc \uc7ac\uc2dc\ub3c4 \ud69f\uc218\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.&nbsp;<code>false<\/code>\ub85c \uc124\uc815\ud558\uba74 \uc7ac\uc2dc\ub3c4\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><li>\uae30\ubcf8\uac12\uc740&nbsp;<code>3<\/code>\uc774\uba70, \uc608\ub97c \ub4e4\uc5b4&nbsp;<code>retry: 2<\/code>\ub294 \ucd5c\ub300 2\ubc88 \uc7ac\uc2dc\ub3c4\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong><code>retryDelay<\/code><\/strong><ul><li>\uc7ac\uc2dc\ub3c4 \uac04\uaca9(ms \ub610\ub294 \ud568\uc218)\uc785\ub2c8\ub2e4.<\/li><li>\uae30\ubcf8\uac12\uc740&nbsp;<code>1000ms<\/code>\uc774\uba70, \uc608\ub97c \ub4e4\uc5b4&nbsp;<code>retryDelay: attempt =&gt; Math.min(1000 * 2 ** attempt, 30000)<\/code>\uc740 \uc9c0\uc218\uc801\uc73c\ub85c \uc99d\uac00\ud558\ub294 \uc7ac\uc2dc\ub3c4 \uac04\uaca9\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong><code>refetchOnWindowFocus<\/code><\/strong><ul><li>\uc708\ub3c4\uc6b0\uac00 \ud3ec\ucee4\uc2a4\ub420 \ub54c \ub370\uc774\ud130\ub97c \ub2e4\uc2dc \uac00\uc838\uc62c\uc9c0 \uc5ec\ubd80\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.<\/li><li>\uae30\ubcf8\uac12\uc740&nbsp;<code>true<\/code>\uc774\uba70, \uc608\ub97c \ub4e4\uc5b4&nbsp;<code>refetchOnWindowFocus: false<\/code>\ub294 \ud3ec\ucee4\uc2a4 \uc2dc \ub9ac\ud398\uce6d\uc744 \ube44\ud65c\uc131\ud654\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>3. useMutation<\/strong><\/h4>\n\n\n\n<p><code>useMutation<\/code>\uc740 \ub370\uc774\ud130\ub97c \uc0dd\uc131, \uc218\uc815, \uc0ad\uc81c\ud558\ub294&nbsp;<strong>\uc4f0\uae30 \uc791\uc5c5<\/strong>(POST, PUT, DELETE \uc694\uccad)\uc5d0 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.&nbsp;<code>useQuery<\/code>\uc640 \ub2ec\ub9ac \uce90\uc2f1\ub41c \ub370\uc774\ud130\ub97c \uc790\ub3d9\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\uc9c0 \uc54a\uc73c\ubbc0\ub85c, \uc218\ub3d9\uc73c\ub85c \uce90\uc2dc\ub97c \ubb34\ud6a8\ud654\ud558\uac70\ub098 \uc5c5\ub370\uc774\ud2b8\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h5>\uc608\uc81c<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>const { mutate } = useMutation({\n    mutationFn: AuthControllerService.logout,\n    onSuccess: () =&gt; {\n      useUserState().logout();\n      navigate('\/login');\n    },\n    onError: (error: ApiError) =&gt; {\n      console.error(error.data.detail);\n    },\n  });<\/code><\/pre>\n\n\n\n<h5><strong>\uc8fc\uc694 \uc635\uc158<\/strong><\/h5>\n\n\n\n<ol><li><strong><code>mutationFn<\/code><\/strong><ul><li>\ub370\uc774\ud130\ub97c \uc0dd\uc131, \uc218\uc815, \uc0ad\uc81c\ud558\ub294 \ube44\ub3d9\uae30 \ud568\uc218\uc785\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong><code>onMutate<\/code><\/strong><ul><li>\ubba4\ud14c\uc774\uc158 \uc2e4\ud589 \uc9c1\uc804\uc5d0 \ud638\ucd9c\ub418\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8\ub97c \uad6c\ud604\ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong><code>onSuccess<\/code><\/strong><ul><li>\ubba4\ud14c\uc774\uc158\uc774 \uc131\uacf5\ud588\uc744 \ub54c \uc2e4\ud589\ub418\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong><code>onError<\/code><\/strong><ul><li>\ubba4\ud14c\uc774\uc158\uc774 \uc2e4\ud328\ud588\uc744 \ub54c \uc2e4\ud589\ub418\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>4. <code>staleTime<\/code>\uacfc <code>gcTime<\/code><\/strong><\/h4>\n\n\n\n<p>TanStack Query\ub294 \ub370\uc774\ud130\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uae30 \uc704\ud574 <code>staleTime<\/code>\uacfc <code>gcTime<\/code>\uc774\ub77c\ub294 \ub450 \uac00\uc9c0 \uc911\uc694\ud55c \uc635\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p><strong>staleTime<\/strong><\/p>\n\n\n\n<ul><li><strong>\uc815\uc758<\/strong>: \ub370\uc774\ud130\uac00 &#8220;Fresh&#8221; \uc0c1\ud0dc\ub85c \uac04\uc8fc\ub418\ub294 \uc2dc\uac04\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/li><li><strong>\uae30\ubcf8\uac12<\/strong>: 0ms (\ub370\uc774\ud130\ub294 \uc989\uc2dc &#8220;Stale&#8221; \uc0c1\ud0dc\ub85c \uac04\uc8fc\ub428).<\/li><li><strong>\uc0ac\uc6a9 \uc608\uc2dc<\/strong>: <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const { data } = useQuery({\n  queryKey: &#91;'todos'],\n  queryFn: fetchTodos,\n  staleTime: 1000 * 60 * 5, \/\/ 5\ubd84 \ub3d9\uc548 \ub370\uc774\ud130\ub97c Fresh \uc0c1\ud0dc\ub85c \uc720\uc9c0\n});\n<\/code><\/pre>\n\n\n\n<ul><li><strong style=\"background-color: var(--wp--preset--color--background);color: var(--wp--preset--color--foreground);font-size: var(--wp--preset--font-size--medium)\">\ud65c\uc6a9<\/strong><span style=\"background-color: var(--wp--preset--color--background);color: var(--wp--preset--color--foreground);font-size: var(--wp--preset--font-size--medium)\">:<\/span><\/li><li><ul><li>\uc790\uc8fc \ubcc0\uacbd\ub418\uc9c0 \uc54a\ub294 \ub370\uc774\ud130\ub97c \ub2e4\ub8f0 \ub54c <code>staleTime<\/code>\uc744 \ub298\ub824 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li>\uc608: \uc81c\ud488 \ubaa9\ub85d, \uc0ac\uc6a9\uc790 \ud504\ub85c\ud544 \ub4f1.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>gcTime (Garbage Collection Time)<\/strong><\/p>\n\n\n\n<ul><li><strong>\uc815\uc758<\/strong>: \ub370\uc774\ud130\uac00 &#8220;Inactive&#8221; \uc0c1\ud0dc\ub85c \uc804\ud658\ub41c \ud6c4, \uce90\uc2dc\uc5d0\uc11c \uc0ad\uc81c\ub418\uae30\uae4c\uc9c0\uc758 \uc2dc\uac04\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/li><li><strong>\uae30\ubcf8\uac12<\/strong>: 5\ubd84.<\/li><li><strong>\uc0ac\uc6a9 \uc608\uc2dc<\/strong>:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const { data } = useQuery({\n  queryKey: &#91;'todos'],\n  queryFn: fetchTodos,\n  cacheTime: 1000 * 60 * 10, \/\/ 10\ubd84 \ub3d9\uc548 \uce90\uc2dc \uc720\uc9c0\n});<\/code><\/pre>\n\n\n\n<ul><li><strong>\ud65c\uc6a9<\/strong>:<ul><li>\uba54\ubaa8\ub9ac \uc0ac\uc6a9\ub7c9\uc744 \uc904\uc774\uae30 \uc704\ud574 <code>gcTime<\/code>\uc744 \uc9e7\uac8c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li>\ubc18\ub300\ub85c, \uc790\uc8fc \uc7ac\uc0ac\uc6a9\ub418\ub294 \ub370\uc774\ud130\ub97c \uc704\ud574 <code>gcTime<\/code>\uc744 \ub298\ub824 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ul>\n\n\n\n<div style=\"height:43px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>5. \ub370\uc774\ud130\ub97c \ubbf8\ub9ac \ubd88\ub7ec\uc624\ub294 PreFetching<\/strong><\/h4>\n\n\n\n<p><strong>PreFetching<\/strong>\uc740 \uc0ac\uc6a9\uc790\uac00 \ubc29\ubb38\ud560 \uac00\ub2a5\uc131\uc774 \ub192\uc740 \ub370\uc774\ud130\ub97c \ubbf8\ub9ac \uac00\uc838\uc640 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\ub294 \uae30\ubc95\uc785\ub2c8\ub2e4. TanStack Query\ub294 <code>queryClient.prefetchQuery<\/code>\ub97c \ud1b5\ud574 PreFetching\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>PreFetching\uc758 \uc7a5\uc810<\/strong><\/h5>\n\n\n\n<ul><li>\uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \ud398\uc774\uc9c0\ub97c \ubc29\ubb38\ud558\uae30 \uc804\uc5d0 \ub370\uc774\ud130\ub97c \ubbf8\ub9ac \uac00\uc838\uc640 \ub85c\ub529 \uc2dc\uac04\uc744 \uc904\uc785\ub2c8\ub2e4.<\/li><li>\uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX)\uc744 \ud06c\uac8c \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<h5><strong>\uc0ac\uc6a9 \uc608\uc2dc<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>import { QueryClient } from '@tanstack\/react-query';\n\nconst queryClient = new QueryClient();\n\nqueryClient.prefetchQuery({\n  queryKey: &#91;'todos'],\n  queryFn: fetchTodos,\n});<\/code><\/pre>\n\n\n\n<h5><strong>\ud65c\uc6a9 \uc0ac\ub840<\/strong><\/h5>\n\n\n\n<ul><li><strong>\ud398\uc774\uc9c0 \uc804\ud658<\/strong>: \uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud558\uae30 \uc804\uc5d0 \ub370\uc774\ud130\ub97c \ubbf8\ub9ac \uac00\uc838\uc635\ub2c8\ub2e4.<\/li><li><strong>\ud638\ubc84 \uc774\ubca4\ud2b8<\/strong>: \uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \ubc84\ud2bc\uc774\ub098 \ub9c1\ud06c \uc704\uc5d0 \ub9c8\uc6b0\uc2a4\ub97c \uc62c\ub838\uc744 \ub54c \ub370\uc774\ud130\ub97c \ubbf8\ub9ac \uac00\uc838\uc635\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:43px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>6. <code>invalidateQueries<\/code><\/strong><\/h4>\n\n\n\n<p><code>invalidateQueries<\/code>\ub294 \ud2b9\uc815 \ucffc\ub9ac\ub97c \ubb34\ud6a8\ud654\ud558\uc5ec \ub370\uc774\ud130\ub97c \ub2e4\uc2dc \uac00\uc838\uc624\ub3c4\ub85d \uac15\uc81c\ud558\ub294 \uae30\ub2a5\uc785\ub2c8\ub2e4. \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub418\uc5c8\uac70\ub098 \uc624\ub798\ub41c \uacbd\uc6b0, \uc774\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucd5c\uc2e0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>\uc0ac\uc6a9 \uc608\uc2dc<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useQueryClient } from '@tanstack\/react-query';\n\nconst queryClient = useQueryClient();\n\nfunction updateTodo() {\n  \/\/ \ub370\uc774\ud130 \uc5c5\ub370\uc774\ud2b8 \ud6c4 \ucffc\ub9ac \ubb34\ud6a8\ud654\n  queryClient.invalidateQueries(&#91;'todos']);\n}<\/code><\/pre>\n\n\n\n<h5><strong>\ud65c\uc6a9<\/strong><\/h5>\n\n\n\n<ul><li><strong>\ub370\uc774\ud130 \ubcc0\uacbd \ud6c4 \ub3d9\uae30\ud654<\/strong>:<ul><li>\uc608: \uc0c8\ub85c\uc6b4 \ub370\uc774\ud130\ub97c \ucd94\uac00\ud558\uac70\ub098 \uae30\uc874 \ub370\uc774\ud130\ub97c \uc218\uc815\ud55c \ud6c4, \uad00\ub828 \ucffc\ub9ac\ub97c \ubb34\ud6a8\ud654\ud558\uc5ec \ucd5c\uc2e0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>\uc870\uac74\ubd80 \ubb34\ud6a8\ud654<\/strong>:<ul><li>\ud2b9\uc815 \uc870\uac74\uc5d0 \ub530\ub77c \ucffc\ub9ac\ub97c \ubb34\ud6a8\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>queryClient.invalidateQueries({\n  predicate: query =&gt; query.queryKey&#91;0] === 'todos',\n});<\/code><\/pre>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3><strong>TanStack Query\uc758 \uc7a5\uc810<\/strong><\/h3>\n\n\n\n<ol><li><strong>\uac04\ub2e8\ud55c API<\/strong>: \ub370\uc774\ud130 \ud328\uce6d, \uce90\uc2f1, \ub3d9\uae30\ud654, \uc5d0\ub7ec \ucc98\ub9ac\ub97c \uac04\ub2e8\ud55c API\ub85c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\uc790\ub3d9\ud654\ub41c \uc791\uc5c5<\/strong>: \ub370\uc774\ud130\uc758 \uc720\ud6a8\uc131 \uac80\uc0ac, \uce90\uc2f1, \ub9ac\ud328\uce6d \ub4f1\uc774 \uc790\ub3d9\uc73c\ub85c \ucc98\ub9ac\ub429\ub2c8\ub2e4.<\/li><li><strong>\ud655\uc7a5\uc131<\/strong>: React\ubfd0\ub9cc \uc544\ub2c8\ub77c Vue, Solid \ub4f1 \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8<\/strong>: \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uac1c\uc120\ud558\ub294 \ub370 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/li><li><strong>\ucee4\ubba4\ub2c8\ud2f0 \uc9c0\uc6d0<\/strong>: \ud65c\ubc1c\ud55c \ucee4\ubba4\ub2c8\ud2f0\uc640 \ud48d\ubd80\ud55c \ud559\uc2b5 \uc790\ub8cc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3><strong>\ub9c8\ubb34\ub9ac<\/strong><\/h3>\n\n\n\n<p>TanStack Query\ub294 \uc11c\ubc84 \uc0c1\ud0dc \uad00\ub9ac\ub97c \uac04\uc18c\ud654\ud558\uace0, \ub370\uc774\ud130 \ud328\uce6d\uacfc \uad00\ub828\ub41c \ubcf5\uc7a1\ud55c \uc791\uc5c5\uc744 \uc790\ub3d9\ud654\ud558\uc5ec \uac1c\ubc1c\uc790 \uacbd\ud5d8\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4. \ud2b9\ud788, \ub370\uc774\ud130 \uc911\uc2ec\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c \ub9e4\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc774 \uae00\uc5d0\uc11c \uc18c\uac1c\ud55c \ub0b4\uc6a9\uc740 TanStack Query\uc758 \uae30\ubcf8\uc801\uc778 \uac1c\ub150\uacfc \uc0ac\uc6a9\ubc95\uc5d0 \ubd88\uacfc\ud569\ub2c8\ub2e4. \ub354 \ub9ce\uc740 \uae30\ub2a5\uacfc \uace0\uae09 \uc0ac\uc6a9\ubc95\uc740 <a href=\"https:\/\/tanstack.com\/query\/latest\">\uacf5\uc2dd \ubb38\uc11c<\/a>\ub97c \ucc38\uace0\ud558\uc138\uc694. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" width=\"210\" height=\"210\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work.png\" alt=\"\" class=\"wp-image-607\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work.png 210w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-150x150.png 150w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>FrontEnd \uac1c\ubc1c\uc5d0\uc11c \ub370\uc774\ud130 fetching\uacfc \uc0c1\ud0dc \uad00\ub9ac\ub294 \ud544\uc218\uc801\uc778 \uc791\uc5c5\uc785\ub2c8\ub2e4. \ud2b9\ud788, \uc11c\ubc84\uc640\uc758 \ud1b5\uc2e0\uc774 \ube48\ubc88\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ub370\uc774\ud130\uc758&nbsp;\uce90\uc2f1,&nbsp;\ub3d9\uae30\ud654,&nbsp;\uc5d0\ub7ec \ucc98\ub9ac\uc640 \uac19\uc740 \uc791\uc5c5\uc774 \ubcf5\uc7a1\ud574\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7f0 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \ub4f1\uc7a5\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \ubc14\ub85c&nbsp;TanStack Query\uc785\ub2c8\ub2e4. \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294&nbsp;TanStack Query\uac00 \ubb34\uc5c7\uc778\uc9c0, \uc65c \uc0ac\uc6a9\ud558\ub294\uc9c0, \uadf8\ub9ac\uace0 \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud558\ub294\uc9c0\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. TanStack Query\ub780 \ubb34\uc5c7\uc778\uac00\uc694? TanStack Query\ub294 React, Vue, Solid \ub4f1 \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc11c\ubc84 \uc0c1\ud0dc [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[3],"tags":[60,59,69,68,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/678"}],"collection":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=678"}],"version-history":[{"count":4,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/678\/revisions"}],"predecessor-version":[{"id":705,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/678\/revisions\/705"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}