230505(κΈ)
π μ±μ₯μΌμ§ 4.0
μ±
ν볡ν μ΄κΈ°μ£Όμμ(μ¨μΈ λ€μ΄μ΄)
μ λ΄μ©μ μκ·Ήλ°μ μμνλ μλ°ν μ±μ₯κΈ°λ‘
μ΄μμλ κ½κ³Ό μ£½μ κ½μ μ΄λ»κ² ꡬλ³νλκ°?
μ±μ₯νκ³ μλ κ²μ΄ μ΄μ μλ κ²μ΄λ€.
μλͺ μ μ μΌν μ¦κ±°λ μ±μ₯μ΄λ€!
π³ (1.0)ν€μλ
μ΅λν κ°λ¨νκ² μ 리, μΆνμ 보면μ μ€μ€λ‘ μ€λͺ
π (2.0)κ²½ν μμ£Όλ‘
λ¨μ μ 보λ₯Ό μ λ¬νκΈ°λ³΄λ€ λ¬΄μμ λ°°μ κ³ μ΄λ»κ² ν΄κ²°νλμ§ μ§§κ³ κ°λ¨νκ² μμ±
βοΈ (3.0)μ ν΄μ§ ν νλ¦Ώμ λ§μΆ°μ
ν€μλ, κ²½ν λͺ¨λ μ’λ€. λ€λ§ λ§€μΌ μμ±νκΈ°λ‘ λ§μ λ¨Ήμλ§νΌ ν΅μ¬λ§ κ°κ²°νκ² μ 리ν μ μκ² ν νλ¦Ώμ μμ±
(3.1)230102λΆν° μμλλ νμ΅μ κ΄ν λ΄μ© μΆκ°
(3.2)230313λΆν° μ’λ κ²½ν, κ°μ μμ£Όμ λ΄μ©λ λ΄κΈ°!
πΎ (4.0)νμ΅ ν€μλμμ μ΅λν κ°λ¨ν μ 보 μ 곡, κ³ λ―Όμμ λ΄ κ²½νμ μμΈν μ μ!
π μ€λμ νμ΅ ν€μλ
리μ‘νΈ μΏΌλ¦¬
리μ‘νΈ μΏΌλ¦¬λ₯Ό μμ§ μ§§κ² κ³΅λΆνμ§λ§β¦ λ무 λ무 λ§μμ λ λ€. γ γ γ γ γ 곡μλ¬Έμ λ΄μ©μ μμ£Ό μ‘°κΈ μ΄ν΄λ³΄μλ©΄
Toss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences.
(λ΄ μκ°) 곡μλ¬Έμλ₯Ό μ½λ€λ³΄λ©΄
mutation(λμ°λ³μ΄)
λΌλ λ¨μ΄κ° μμ£Ό λ±μ₯νλλ°, κ·Έλ₯ κ°λ¨νκ² μ΄λ€ κΈ°λ₯μ μ¬μ©νκΈ° νΈνκ² μ 곡ν΄μ£Όλ apiλΌκ³ μκ°νλ©΄ λ κ² κ°λ€. μ¬μ©νκΈ° νΈνκ² κ°κ³΅ν΄λμ λ³νλ ννλ₯Ό λ§νλ λ―!
DECLARATIVE & AUTOMATIC Writing your data fetching logic by hand is over. Tell TanStack Query where to get your data and how fresh you need it to be and the rest is automatic. It handles caching, background updates and stale data out of the box with zero-configuration
data fetchingνλ λ‘μ§μ μμ±νλ κ±Έ μ½κ² ν΄μ€λ€. μΊμ±, λ°±κ·ΈλΌμ΄λ μ λ°μ΄νΈ, μΌμΌλ¬΅μ λ°μ΄ν° λ±μ λͺ¨λ νΈλ€λ§ν΄μ€λ€. λ±ν μ΄λ€ μ€μ μμ΄!
SIMPLE & FAMILIAR If you know how to work with promises or async/await, then you already know how to use TanStack Query. Thereβs no global state to manage, reducers, normalization systems or heavy configurations to understand. Simply pass a function that resolves your data (or throws an error) and the rest is history.
μ μ μν κ΄λ¦¬, 리λμ, μμ€ν λ Έλ§λ¦¬μ μ΄μ , κ±°λν μ€μ λ± λͺ¨λ μλ€.
EXTENSIBLE TanStack Query is configurable down to each observer instance of a query with knobs and options to fit every use-case. It comes wired up with dedicated devtools, infinite-loading APIs, and first class mutation tools that make updating your data a breeze. Donβt worry though, everything is pre-configured for success!
νΉμν κ°λ°λꡬ, 무ν λ‘λ© api, λΉμ μ λ°μ΄ν°λ₯Ό μ λ°μ΄νΈνκΈ° μν λ³νλ λꡬλ₯Ό μ 곡νλ€.
λ²μμ΄λΌκΈ°μ μ 맀νκ³ κ·Έλ₯ ν΅μ¬μ μΈ λΆλΆλ€λ§ μ μ΄λμλ€. 리μ‘νΈ μΏΌλ¦¬μμ μ 곡νλ μ λ§ λ€μν κΈ°λ₯λ€(νΉνλ μλ²μν κ΄λ ¨λ μΊμ±, λ°μ΄ν° stale κ΄λ¦¬ λ±) κ·Έλ¦¬κ³ μ체μ μΈ devtoolκΉμ§β¦ λͺ¨λ λ€ κ°λμ΄μλ€. μ΄λ° λΌμ΄λΈλ¬λ¦¬λ₯Ό κ°λ°νλ μ¬λλ€μ μΌλ§λ μ¬λ―ΈμμκΉ..? λλ λ°λμ λμ€μ μ΄λ° μ€νμμ€μ κΈ°μ¬νκ±°λ κ°λ°ν μ μλ μ¬λμ΄ λκ³ μΆλ€..!(λ¬κΈ κ³ λ°±)
ν¬μ€νΈλ§¨
ν¬μ€νΈλ§¨μ κ°λ¨νκ² rest api μμ²μ λ³΄λΌ λλ§ μ¬μ©νμλλ°, μ΄λ² νλ‘μ νΈμμλ μ’ μ λλ‘ λ€λ€λ³΄λ € νλ€. μ°μ μ¬μ©νλ apiλ₯Ό μμ½κ² κ΄λ¦¬ν μ μλ μ μ΄ μ°Έ 맀λ ₯μ μΈ κ±° κ°λ€. μ΄μΈμλ λ€μν κΈ°λ₯λ€μ΄ μλ κ² κ°μλ°, λΉμ₯μ νλ‘μ νΈμμ μ¬μ©νλ apiλ€μ κ΄λ¦¬νκ³ mock data μ»μ΄μ€λ μ λλ‘ μ¬μ©ν΄λ³΄λ € νλ€.
π μμ½ λ° ν루 κ°λ¨ νκ³
곡μλ¬Έμ..! 곡μλ¬Έμλ₯Ό 보μ! λͺ¨λ κ² λ€ μλ€! μ λ§ λ§€λ ₯μ μ΄κ³ ν₯λ―Έλ‘μ΄ κΈ°μ λ€μ΄ λ§μ κ² κ°λ€. μ¬λμ μ·¨ν₯μ΄κ² μ§λ§, λ΄κ° λ§μμ λλ κΈ°μ λ€μ λ± μ»¨μ
μ 보μλ§μ
μ μ΄κ±° λ§μ λ λ€.
λλμ΄ μ¨λ€. γ
γ
γ
γ
γ
κ·Έλ¦¬κ³ κ·Έλ° κΈ°μ λ€μ λ°°μΈ λ λκ° λ μ μ°©μ΄ κ°λ€.
μ€λμ νκ³λ₯Ό λμλ©΄ μ΄λ¦°μ΄λ , νλ£¨μ’ μΌ νλ¦¬κ³ λΉ, κΈμμΌ, λ°©ν μ΄λΌμ κ·Έλ°κ°~ 곡λΆλ₯Ό μμ£Ό ν¨μ¨μ μΌλ‘ μνλλ§νΌ νμ§ λͺ»νλ€. κ·Έλλ μ΄λ° λ μΉκ³ λ λ§μ μ μ‘κ³ μ§μ€ν΄μ 곡λΆνμΌλ λ무 λ΄ μμ μ λ무λΌμ§ λ§μ~
μ€λμ μν μ
- λ§μμ λλ κΈ°μ μ λ°κ²¬ν μ
- μ¬λ¬κ°μ§ κ³΅λΆ μ§μ€μ λͺ»ν μν©λ€μλ 곡λΆν μ
μ€λμ μμ¬μ΄ μ
- μμ£Ό μͺΌκΈλ§ λ 곡λΆνμλλΌλ μ’μμλ―..?!