๐Ÿชด React

[React] React-Query(aka. Tanstack-Query)

๋ จ๋”” 2024. 2. 23. 23:59
SMALL

2.23

 

TanStack | High Quality Open-Source Software for Web Developers

 

TanStack | High Quality Open-Source Software for Web Developers

 

tanstack.com

 

 

React-Query (aka. Tanstack-Query) 

๋ฆฌ์•กํŠธ์ฟผ๋ฆฌ๋Š” ์„œ๋ฒ„ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์‰ฝ๊ฒŒ ํ•˜๋„๋ก ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, 
์„œ๋ฒ„ DB ์—ฐ๊ฒฐ ๊ด€๋ฆฌ์™€ ์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•œ ๋ฒˆ์— ํ•ด์ค€๋‹ค !

(Redux ๋ฏธ๋“ค์›จ์–ด์ด์ž, Redux Toolkit์— ๋‚ด์žฅ๋˜์–ด์žˆ๋Š”, Thunk์˜ ๋Œ€์ฒด์žฌ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. Thunk๋Š” ์š”์ƒˆ ์•ˆ ์“ฐ๋Š” ์ถ”์„ธ๋ผ๊ณ ๋„ ํ•˜๊ณ , ๋˜ Thunk๋ณด๋‹ค React-Query ๊ฐ€ ๋” ์‰ฝ๋‹ค๊ณ  ํ•œ๋‹ค.)

 

 

* ๋ฆฌ์•กํŠธ์ฟผ๋ฆฌ์˜ ์„œ๋ฒ„์ƒํƒœ๊ด€๋ฆฌ ์šฉ์ด์„ฑ

- ๋‹ค์Œ์˜ 4๊ฐ€์ง€๋ฅผ ์‰ฝ๊ฒŒ ํ•ด์ค€๋‹ค.

 

1. fetching : ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ ๋ฐ›์•„์˜ค๊ธฐ

2. caching : ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๋”ฐ๋กœ ๋ณด๊ด€ํ•ด์„œ ๋™์ผํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋‹จ ์‹œ๊ฐ„ ๋‚ด์— ๋‹ค์‹œ ํ•„์š”ํ•  ์‹œ ์„œ๋ฒ„์š”์ฒญ์—†์ด ๋ณด๊ด€๋œ ๋ฐ์ดํ„ฐ์—์„œ ๊บผ๋‚ด์“ฐ๊ธฐ

3. synchronizing : ์„œ๋ฒ„์ƒ์˜ ๋ฐ์ดํ„ฐ์™€ ๋ณด๊ด€ ์ค‘์ธ ์บ์‹œ ๋ฐ์ดํ„ฐ(์„œ๋ฒ„์ƒํƒœ)๋ฅผ ๋™์ผํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ (๋™๊ธฐํ™”)

4. updating : ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ ์šฉ์ด (mutation & invalidateQueries)

SMALL