diff --git a/README.md b/README.md index 6524f29..25d5335 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,10 @@
-## ๐Ÿ“ƒ API Reference +## ๐Ÿ“ƒ ๊ธฐํƒ€ ์ฐธ๊ณ  ๋ฌธ์„œ 1. [QueryClient ์ฃผ์š” ๋‚ด์šฉ ์ •๋ฆฌ ๋ฌธ์„œ](https://github.com/ssi02014/react-query-tutorial/tree/master/document/queryClient.md) +2. [๊ธฐ๋ณธ์ ์ธ React Query ์•„ํ‚คํ…์ฒ˜ ์‚ดํŽด๋ณด๊ธฐ: inside React Query](https://github.com/ssi02014/react-query-tutorial/tree/master/document/insideReactQuery.md)
diff --git a/README.v4.md b/README.v4.md index 532d44e..eef183f 100644 --- a/README.v4.md +++ b/README.v4.md @@ -59,9 +59,10 @@
-## ๐Ÿ“ƒ API Reference +## ๐Ÿ“ƒ ๊ธฐํƒ€ ์ฐธ๊ณ  ๋ฌธ์„œ 1. [QueryClient ์ฃผ์š” ๋‚ด์šฉ ์ •๋ฆฌ ๋ฌธ์„œ](https://github.com/ssi02014/react-query-tutorial/tree/master/document/queryClient.md) +2. [๊ธฐ๋ณธ์ ์ธ React Query ์•„ํ‚คํ…์ฒ˜ ์‚ดํŽด๋ณด๊ธฐ: inside React Query](https://github.com/ssi02014/react-query-tutorial/tree/master/document/insideReactQuery.md)
diff --git a/document/insideReactQuery.md b/document/insideReactQuery.md new file mode 100644 index 0000000..bee580b --- /dev/null +++ b/document/insideReactQuery.md @@ -0,0 +1,159 @@ +# ๐Ÿ’ป Inside React Query + +- ํ•ด๋‹น ๋ฌธ์„œ๋Š” [tkdodo - inside-react-query](https://tkdodo.eu/blog/inside-react-query) ํฌ์ŠคํŒ…์„ ๋ฒˆ์—ญํ•˜๊ณ , ์ข€ ๋” ์ดํ•ด์— ํ•„์š”ํ•œ ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ•œ ๋ฌธ์„œ์ž…๋‹ˆ๋‹ค. + +
+ +## Intro + +- React Query๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ฆฌ๋ Œ๋”๋งํ•ด์•ผ ๋˜๋Š” ์‹œ์ ์„ ์•Œ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•๊ณผ ์–ด๋–ป๊ฒŒ ์ค‘๋ณต์„ ์ œ๊ฑฐํ•˜๋ฉฐ, ์–ด๋–ป๊ฒŒ ํ”„๋ ˆ์ž„์›Œํฌ์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š์„๊นŒ์š”? +- ์œ„ ์งˆ๋ฌธ๋“ค์„ ์ดํ•ดํ•˜๋ ค๋ฉด React Query์˜ ๋‚ด๋ถ€๋ฅผ ๋“ค์—ฌ๋‹ค๋ณด๊ณ  useQuery๋ฅผ ํ˜ธ์ถœ ํ•  ๋•Œ ์‹ค์ œ๋กœ ์–ด๋–ค ์ผ์ด ์ผ์–ด๋‚˜๋Š”์ง€ ๋ถ„์„ํ•ด๋ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. + +
+ +## QueryClient + +แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-02-27 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 1 41 04 + +
+ +- ๋ชจ๋“  ๊ฒƒ์€ `QueryClient`์—์„œ ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค. +- QueryClient๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‹œ์ž‘ํ•  ๋•Œ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•œ ๋‹ค์Œ `QueryClientProvider`๋ฅผ ํ†ตํ•ด ๋ชจ๋“  ๊ณณ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ํด๋ž˜์Šค์ž…๋‹ˆ๋‹ค. + +```tsx +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + +// โฌ‡๏ธ this creates the client +const queryClient = new QueryClient(); + +function App() { + return ( + // โฌ‡๏ธ this distributes the client + + + + ); +} +``` + +
+ +- QueryClientProvider๋Š” `React Context`๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์ฒด์— QueryClient๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. +- QueryClient๋ฅผ ํ†ตํ•ด ์ƒ์„ฑ๋œ queryClient ์ธ์Šคํ„ด์Šค๋Š” `์•ˆ์ •์ ์ธ ๊ฐ’`์ด๋ฉฐ, ํ•œ ๋ฒˆ๋งŒ ์ƒ์„ฑ๋˜๋ฏ€๋กœ React Context๋กœ ์‚ฌ์šฉํ•˜๊ธฐ์— ์ ์ ˆํ•ฉ๋‹ˆ๋‹ค. + - ์•ฑ์ด ๋‹ค์‹œ ๋ฆฌ๋ Œ๋”๋ง ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋‹จ์ง€ useQueryClient๋ฅผ ํ†ตํ•ด queryClient๋Œ€ํ•œ `์•ก์„ธ์Šค ๊ถŒํ•œ๋งŒ ๋ถ€์—ฌ`ํ•ฉ๋‹ˆ๋‹ค. + - queryClient ์ธ์Šคํ„ด์Šค๊ฐ€ ์‹ค์ˆ˜๋กœ ์ž์ฃผ ๋‹ค์‹œ ์ƒ์„ฑ๋˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•ด์•ผ๋ฉ๋‹ˆ๋‹ค. + +
+ +## A vessel that holds the cache(์บ์‹œ๋ฅผ ๋‹ด๋Š” ๊ทธ๋ฆ‡) + +- ์ž˜ ์•Œ๋ ค์ ธ ์žˆ์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ์ง€๋งŒ, QueryClient ์ž์ฒด๋Š” ์‹ค์ œ๋กœ ๋งŽ์€ ์ผ์„ ํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. +- QueryClient๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋˜๋Š” `QueryCache`์™€ `MutationCache`๋ฅผ ์œ„ํ•œ ์ปจํ…Œ์ด๋„ˆ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ, ๋ชจ๋“  `query`์™€ `mutation`์— ๋Œ€ํ•ด ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋ช‡ ๊ฐ€์ง€ ๊ธฐ๋ณธ๊ฐ’์„ ๋ณด์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, cache(์บ์‹œ)๋กœ ์ž‘์—…ํ•˜๊ธฐ ์œ„ํ•œ ํŽธ๋ฆฌํ•œ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. +- ๋Œ€๋ถ€๋ถ„์˜ ์ƒํ™ฉ์—์„œ๋Š” `cache์™€ ์ง์ ‘ ์ƒํ˜ธ ์ž‘์šฉํ•˜์ง€ ์•Š๊ณ  QueryClient๋ฅผ ํ†ตํ•ด cache์— ์•ก์„ธ์Šคํ•ฉ๋‹ˆ๋‹ค.` + +
+ +## QueryCache + +- queryClient๋Š” ์šฐ๋ฆฌ๊ฐ€ cache๋กœ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด cache(QueryCache)๊ฐ€ ๋ฌด์—‡์ผ๊นŒ์š”? + +แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-02-27 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 1 53 07 + +- ๊ฐ„๋‹จํ•˜๊ฒŒ, QueryCache๋Š” `in-memory` ๊ฐ์ฒด ์ž…๋‹ˆ๋‹ค. key๋Š” `์•ˆ์ •์ ์œผ๋กœ ์ง๋ ฌํ™”๋œ ๋ฒ„์ „์˜ queryKey`(queryKeyHash๋ผ๊ณ  ํ•จ)์ด๊ณ , value๋Š” `Query Class์˜ ์ธ์Šคํ„ด์Šค`์ž…๋‹ˆ๋‹ค. +- React Query๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ `in-memory`์—๋งŒ ์ €์žฅํ•˜๊ณ , ๋‹ค๋ฅธ ๊ณณ์—๋Š” ์ €์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด ์ ์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ๊ต‰์žฅํžˆ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. + +
+ +แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-02-27 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 2 05 50 + +> ํ•ด์„: ์ข€ ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ๋ง์”€๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ์บ์‹œ๋Š” ์ธ๋ฉ”๋ชจ๋ฆฌ์ด๋ฉฐ ํƒญ์— ๋Œ€ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ปจํ…์ŠคํŠธ์˜ ์ˆ˜๋ช… ๋‚ด์—๋งŒ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ ๊ณ ์นจ, ํ•˜๋“œ ํƒ์ƒ‰(pushState ๋˜๋Š” replaceState ํžˆ์Šคํ† ๋ฆฌ apis๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ) ๋˜๋Š” ํƒญ์„ ๋‹ซ๊ฑฐ๋‚˜ ์—ด๋ฉด ์บ์‹œ๊ฐ€ ์œ ์ง€๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. + +- https://github.com/TanStack/query/issues/1677#issuecomment-766137011 +- ์ข€ ๋” cache์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด ์œ„ ์ด์Šˆ์—์„œ React Query์˜ ์ฐฝ์‹œ์ž `tannerlinsley`๊ฐ€ ์–ธ๊ธ‰ํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•ด๋ด…์‹œ๋‹ค. +- `tannerlinsley`๋Š” React Query์˜ cache๋Š” in-memory ๊ฐ์ฒด์ด๋ฉฐ, ๋ธŒ๋ผ์šฐ์ € ํƒญ์— ๋Œ€ํ•œ `JavaScript Context(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ) ์ƒ๋ช… ์ฃผ๊ธฐ ๋‚ด์—์„œ๋งŒ ์กด์žฌ`ํ•œ๋‹ค๊ณ  ์–ธ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค. +- ์ฆ‰, React Query ์บ์‹œ๋Š” ๋ธŒ๋ผ์šฐ์ € ํƒญ ๊ฐ„์— ๊ณต์œ ๋˜์ง€๋„ ์•Š๊ณ , ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•˜๋ฉด ์บ์‹œ๊ฐ€ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค. ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์™€ ๊ฐ™์€ ์™ธ๋ถ€ ์ €์žฅ์†Œ์— ์บ์‹œ๋ฅผ ์“ฐ๊ณ  ์‹ถ๋‹ค๋ฉด [persisters](https://tanstack.com/query/v5/docs/framework/react/overview)๋ฅผ ์‚ดํŽด๋ณด๋Š”๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค. + +
+ +### in-memory? + +- ์œ„์—์„œ ๋งํ•˜๋Š” in-memory๋Š” `๋ธŒ๋ผ์šฐ์ € ๋ฉ”๋ชจ๋ฆฌ`๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ํƒญ์€ ๋ณ„๋„์˜ ํ”„๋กœ์„ธ์Šค๋กœ ๊ด€๋ฆฌํ•˜์—ฌ ๋…๋ฆฝ๋œ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ํ• ๋‹น๋ฐ›์Šต๋‹ˆ๋‹ค. +- ์ด๋ฅผ ํ†ตํ•ด ๊ฐ ๋ธŒ๋ผ์šฐ์ € ํƒญ์ด ์ž์‹ ๋งŒ์˜ ๋…๋ฆฝ๋œ JavaScript ์‹คํ–‰ ํ™˜๊ฒฝ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. + - ์ด๋Ÿฌํ•œ ํŠน์ง•๋•Œ๋ฌธ์— ํ•œ ํƒญ์—์„œ ์ƒ์„ฑ๋œ ๋ณ€์ˆ˜, ๊ฐ์ฒด ๋“ฑ์€ ๋‹ค๋ฅธ ํƒญ๊ณผ ๊ณต์œ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. + +
+ +## Query + +แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-02-27 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 2 28 43 + +- QueryCache์—๋Š” Query๋“ค์ด ์žˆ์œผ๋ฉฐ Query์—์„œ ๋Œ€๋ถ€๋ถ„์˜ ๋กœ์ง๋“ค์ด ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. +- Query๋Š” Query์— ๋Œ€ํ•œ `๋ชจ๋“  ์ •๋ณด(๋ฐ์ดํ„ฐ, ์ƒํƒœ ํ•„๋“œ ๋˜๋Š” ๋งˆ์ง€๋ง‰ fetching์ด ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ๊ฐ™์€ meta ์ •๋ณด)`๊ฐ€ ํฌํ•จ๋  ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ query ํ•จ์ˆ˜๋ฅผ `์‹คํ–‰`ํ•˜๊ณ  `์žฌ์‹œ๋„`, `์ทจ์†Œ`, `์ค‘๋ณต ์ œ๊ฑฐ` ๋กœ์ง์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. +- Query์—๋Š” ๋‚ด๋ถ€ ์ƒํƒœ ๋จธ์‹ ์ด ์กด์žฌํ•ด์„œ ๋ถˆ๊ฐ€๋Šฅํ•œ ์ƒํƒœ์— ๋น ์ง€์ง€ ์•Š๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. + - ์˜ˆ๋ฅผ ๋“ค์–ด, ์ด๋ฏธ fetching์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋™์•ˆ query ํ•จ์ˆ˜๊ฐ€ ํŠธ๋ฆฌ๊ฑฐ๋˜์–ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ํ•ด๋‹น fetching์—์„œ ์ค‘๋ณต์„ ์ œ๊ฑฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + - query๊ฐ€ ์ทจ์†Œ๋˜๋ฉด ์ด์ „ ์ƒํƒœ๋กœ ๋Œ์•„๊ฐ‘๋‹ˆ๋‹ค. +- ํ•ต์‹ฌ ํฌ์ธํŠธ๋Š” **query๊ฐ€ ๋ˆ„๊ฐ€ query data์— ๊ด€์‹ฌ์ด ์žˆ๋Š” ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๊ณ , ํ•ด๋‹น ๊ด€์ฐฐ์ž(Observers)๋“ค์—๊ฒŒ ๋ชจ๋“  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์•Œ๋ฆด ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด๋‹ค.** + +
+ +## QueryObserver + +แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-02-27 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 2 43 35 + +- Observer๋Š” query์™€ query๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋Š” ์ปดํฌ๋„ŒํŠธ ์‚ฌ์ด์— `์ ‘์ฐฉ์ œ ์—ญํ• `์„ ํ•ฉ๋‹ˆ๋‹ค. +- Observer๋Š” `useQuery๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ์ƒ์„ฑ`๋˜๋ฉฐ, `ํ•ญ์ƒ ์ •ํ™•ํžˆ ํ•˜๋‚˜์˜ query๋ฅผ ๊ตฌ๋…ํ•ฉ๋‹ˆ๋‹ค.` + - ์ด๋Ÿฌํ•œ ํŠน์ง•๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๋Š” useQuery์— queryKey๋ฅผ ์ „๋‹ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. +- Observer๋Š” ์กฐ๊ธˆ ๋” ๋งŽ์€ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋ฉฐ, ๋Œ€๋ถ€๋ถ„์˜ ์ตœ์ ํ™”๊ฐ€ ์ด๋ฃจ์–ด์ง€๋Š” ๊ณณ์ž…๋‹ˆ๋‹ค. +- Observer๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ˜„์žฌ ์‚ฌ์šฉ ์ค‘์ธ `query์˜ ์†์„ฑ`์„ ์•Œ๊ณ  ์žˆ์œผ๋ฏ€๋กœ ๊ด€๋ จ ์—†๋Š” ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์•Œ๋ฆด ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. + - ์˜ˆ๋ฅผ ๋“ค์–ด, `data ํ•„๋“œ`๋งŒ ์‚ฌ์šฉ ํ•  ๊ฒฝ์šฐ background refetch์—์„œ `isFetching`์ด ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒฝ์šฐ ์ด๋Š” ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ๊ด€๋ จ์—†๋Š” ์†์„ฑ์ด๋ฏ€๋กœ ๊ตณ์ด ๋ฆฌ๋ Œ๋”๋ง ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. +- ๋” ๋‚˜์•„๊ฐ€ ๊ฐ Observer๋Š” `select`์˜ต์…˜์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์—ฌ๊ธฐ์—์„œ data ํ•„๋“œ์˜ ์–ด๋–ค ๋ถ€๋ถ„์— ๊ด€์‹ฌ์žˆ๋Š”์ง€ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + - ๊ด€๋ จ๋œ ๋‚ด์šฉ์„ [tkdodo - #2: React Query Data Transformations](https://tkdodo.eu/blog/react-query-data-transformations#3-using-the-select-option) ์—์„œ ์ฐธ๊ณ ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +- staleTime ๋˜๋Š” interval fetching๊ณผ ๊ฐ™์€ ๋Œ€๋ถ€๋ถ„์˜ ํƒ€์ด๋จธ๋„ `Observe Level`์—์„œ ๋ฐœ์ƒ๋ฉ๋‹ˆ๋‹ค. + +
+ +## Active and inactive Queries (ํ™œ์„ฑ ๋ฐ ๋น„ํ™œ์„ฑ ์ฟผ๋ฆฌ) + +- Observer๊ฐ€ ์—†๋Š” query๋ฅผ ๋ฐ”๋กœ inactive(๋น„ํ™œ์„ฑ) query๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. +- ์•„์ง ์บ์‹œ์— ์žˆ์ง€๋งŒ ์–ด๋–ค ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. +- ์ด๋Ÿฌํ•œ inactive query๋Š” React Query Devtools๋ฅผ ์‚ดํŽด๋ณด๋ฉด ํšŒ์ƒ‰์œผ๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์™ผ์ชฝ์˜ ์ˆซ์ž๋Š” ํ•ด๋‹น query๋ฅผ ๊ตฌ๋…ํ•˜๊ณ  ์žˆ๋Š” Observer์˜ ์ˆ˜๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. + +แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-02-27 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 2 58 00 + +
+ +## The Complete Picture of React Query Architecture (๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ ์•„ํ‚คํ…์ฒ˜ ์ „์ฒด ๊ทธ๋ฆผ) + +แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-02-27 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 2 59 50 + +- ์œ„ ๊ทธ๋ฆผ์„ ์ข…ํ•ฉํ•ด๋ณด๋ฉด ๋Œ€๋ถ€๋ถ„์˜ ๋กœ์ง์ด ํ”„๋ ˆ์ž„์›Œํฌ์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š๋Š” `Query Core`์•ˆ์— ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. + - `QueryClient`, `QueryCache`, `Query`, `QueryObserver`๊ฐ€ ๋ชจ๋‘ Query Core์— ์žˆ๋‹ค. +- ๋”ฐ๋ผ์„œ, ์ƒˆ๋กœ์šด ํ”„๋ ˆ์ž„์›Œํฌ์šฉ `Adapter(์–ด๋Œ‘ํ„ฐ)`๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ๋งค์šฐ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. + - ๊ธฐ๋ณธ์ ์œผ๋กœ Observer๋ฅผ ๋งŒ๋“ค๊ณ , Observer๋ฅผ ๊ตฌ๋…ํ•˜๊ณ , Observer๊ฐ€ ์•Œ๋ฆผ์„ ๋ฐ›์œผ๋ฉด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. + - [react](https://github.com/TanStack/query/blob/9d9aea5fb12eb89dec54c619845b3d226b53cf2b/packages/react-query/src/useBaseQuery.ts#L33-L115)์™€ [solid](https://github.com/TanStack/query/blob/9579dd893656d0a4a7ac0207a204d4b3735c329d/packages/solid-query/src/createBaseQuery.ts#L33-L131)์šฉ useQuery Adapter์—๋Š” ๊ฐ๊ฐ ์•ฝ 100์ค„์˜ ์ฝ”๋“œ๋งŒ ์žˆ์Šต๋‹ˆ๋‹ค. + +
+ +### Adapter(์–ด๋Œ‘ํ„ฐ)? + +- Adapter๋Š” ๋‘ ๊ฐ€์ง€ ๋‹ค๋ฅธ ์‹œ์Šคํ…œ ๋˜๋Š” ์žฅ์น˜, ์†Œํ”„ํŠธ์›จ์–ด ์ปดํฌ๋„ŒํŠธ ์‚ฌ์ด์—์„œ ํ˜ธํ™˜์„ฑ์„ ์ œ๊ณตํ•˜๊ฑฐ๋‚˜ ํ†ต์‹ ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ์žฅ์น˜๋‚˜ ํ”„๋กœ๊ทธ๋žจ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. + +
+ +## From a component perspective (์ปดํฌ๋„ŒํŠธ ๊ด€์ ์—์„œ) + +แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-02-27 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 3 13 58 + +- ๋งˆ์ง€๋ง‰์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ๋‹ค๋ฅธ ๊ฐ๋„์—์„œ ํ๋ฆ„์„ ์‚ดํŽด๋ด…์‹œ๋‹ค. + - ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋˜๋ฉด `useQuery`๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ `Observer`๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. + - ์ƒ์„ฑ๋œ `Observer`๋Š” `QueryCache`์— ์žˆ๋Š” `Query`๋ฅผ ๊ตฌ๋…ํ•ฉ๋‹ˆ๋‹ค. + - ์ด ๊ตฌ๋…์€ `Query`๊ฐ€ ์•„์ง ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ `Query ์ƒ์„ฑ`์„ ํŠธ๋ฆฌ๊ฑฐํ•˜๊ฑฐ๋‚˜ ๋ฐ์ดํ„ฐ๊ฐ€ ์˜ค๋ž˜๋œ ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ๋˜๋Š” ๊ฒฝ์šฐ `background refetch`๋ฅผ ํŠธ๋ฆฌ๊ฑฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + - fetching์„ ์‹œ์ž‘ํ•˜๋ฉด `Query`์˜ ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋˜๊ธฐ ๋•Œ๋ฌธ์— `Observer`์—๊ฒŒ ์ด์— ๋Œ€ํ•œ ์ •๋ณด๊ฐ€ ์ „์†ก๋ฉ๋‹ˆ๋‹ค. + - ๊ทธ๋ ‡๋‹ค๋ฉด `Observer`๋Š” ๋ช‡ ๊ฐ€์ง€ ์ตœ์ ํ™”๋ฅผ ์‹คํ–‰ํ•˜๊ณ , ์ž ์žฌ์ ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ์—…๋ฐ์ดํŠธ์— ๋Œ€ํ•ด ์•Œ๋ฆฐ๋ฉด ์ƒˆ ์ƒํƒœ๋ฅผ ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + - `Query` ์‹คํ–‰์ด ๋๋‚˜๋ฉด `Observer`์—๊ฒŒ๋„ ์ด ์‚ฌ์‹ค์„ ์•Œ๋ฆฝ๋‹ˆ๋‹ค. +- ์œ„ ๋‚ด์šฉ์€ ๋งŽ์€ ์ž ์žฌ์  ํ๋ฆ„ ์ค‘ ํ•˜๋‚˜์— ๋ถˆ๊ณผํ•˜๋‹ค๋Š” ์ ์— ์œ ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. +- ๊ฐ€์žฅ ์ด์ƒ์ ์ธ ๊ฒƒ์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ ๋  ๋•Œ ๋ฐ์ดํ„ฐ๊ฐ€ ์ด๋ฏธ cache์— ์žˆ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. + - [tkdodo - #17: Seeding the Query Cache](https://tkdodo.eu/blog/seeding-the-query-cache) ํ•ด๋‹น ํฌ์ŠคํŒ…์—์„œ ๊ด€๋ จ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +- **๋ชจ๋“  ํ๋ฆ„์— ๋Œ€ํ•œ ๋™์ผํ•œ ์ ์€ ๋Œ€๋ถ€๋ถ„์˜ ๋กœ์ง์ด React(or Vue, or Solid) ์™ธ๋ถ€์—์„œ ๋ฐœ์ƒํ•˜๊ณ  ์ƒํƒœ ์‹œ์Šคํ…œ์˜ ๋ชจ๋“  ์—…๋ฐ์ดํŠธ๊ฐ€ Observer์—๊ฒŒ ์ „๋‹ฌ๋˜๋ฉฐ, Observer๋Š” ์ปดํฌ๋„ŒํŠธ์—๋„ ์•Œ๋ ค์•ผ ํ•˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.** + +