1. ExternalStore
useState λ₯Ό μ κ±°νμ¬ μνλ₯Ό κ΄λ¦¬ν΄λ³΄μ
Reactμμλ μΌλ°μ μΌλ‘ μ΄λ€ λ³μμ κ°μ΄ λ³ννμμ λ(λ³΄ν΅ μ μ μ μ‘°μμΌλ‘ μΈν), UIμ ν΄λΉ κ°μ λ°μνκΈ° μν΄μλ useStore λΌλ Reactμμ μ 곡νλ hookμ μ¬μ©ν΄μΌ νλ€.
κ·Έλ μ§ μκ³ , μΌλ°μ μΌλ‘ λ³μλ₯Ό μ μν νμ μ΄λ€ μ΄λ²€νΈμ λ°λΌμ κ°μ λ³νμμΌ°μ λλ UIμ ν΄λΉ κ°μ λ°μν μ μλ€. λ³κ²½λ κ°μ μΈμνμ§ λͺ»νκΈ° λλ¬Έμ, 리λ λλ§λμ§ μκΈ° λλ¬Έμ΄λ€.
Reactμμλ λ‘컬 state, κ·Έλ¬λκΉ λ³μμ μνλ₯Ό λ³κ²½ν΄μλ μλλ©°, useStateλ₯Ό μ¬μ©νκΈ°λ₯Ό κΆμ₯νλ€.
λ³κ²½λ μνμ κ°μ λ°μνμ¬, 리λ λλ§ λλλ‘ νκΈ° μν΄μλ useState λ₯Ό μ¬μ©νλ€.
κ·Έλ¬λ©΄ useStateλ₯Ό μ¬μ©νμ§ μκ³ λ¦¬λ λλ§μ κ°μ νμ¬ UIμ λ°μν μ μλ λ°©λ²μ΄ μμκΉ? useReducerλ₯Ό μ¬μ©νλ©΄ κ°λ₯νλ€.
λ²νΌμ ν΄λ¦νμ λ μ¦κ°ν count μ νλ©΄μ μ λ°μμ΄ λλ€. ν₯λ―Έλ‘μ΄ κ²μ useReducer μ 첫λ²μ§Έ μΈμλ‘ μ λ¬λ ν¨μμμ νκ³ μλ μν μ μλ―Έκ° μλ€λ κ²μ΄λ€. +1μ ν΄λ λκ³ , λΉλ¬Έμμ΄μ λν΄λ λλ€. μ¦, μ¬κΈ°μ useReducer λ μνλ₯Ό λ³κ²½νλ ν μΌλ‘μ¨λ§ μ¬μ©λλ€λ μ μ΄λ€.
μ°Έκ³ λ‘ useState λ λ΄λΆμ μΌλ‘ useReducerλ₯Ό μ¬μ©νλ€.
κ·Έλ¬λ©΄ λ€μ ν λ² μ½λλ₯Ό κ³ μ³λ³΄μ.
useReducerλ₯Ό μ¬μ©νμ§ μκ³ , forceUpdateλΌλ ν¨μ μμμ setState λ₯Ό μ¬μ©νμ¬ μνλ₯Ό λ³κ²½νμ¬, κ°μ λ‘ μ»΄ν¬λνΈλ₯Ό 리λ λλ§ μν¬μλ μλ€. νλ©΄μ 보μ΄λ κ°μ increase ν¨μμμ μ²λ¦¬ν μ¦κ°λ λ³μμ κ°μ΄λ€. forceUpdateλΌλ ν¨μλ₯Ό Hook μΌλ‘ λ§λ€λ©΄ μλμ κ°μ λͺ¨μμ΄ λλ€.
μ΄λ κ² νλ©΄ Counter μ»΄ν¬λνΈμμλ λμ΄μ useState κ° νμμμ΄μ§κ³ μ»΄ν¬λνΈ λ΄λΆμμ κ°μ§κ³ μλ λ‘컬 λ³μλ₯Ό μ λ°μ΄νΈνμ¬ UIμ λ°μν μ μλ€.
κ·Έλ°λ° μ¬κΈ°μ λ¬Έμ λ ν μΌλ‘ λΆλ¦¬ν useReducer μ ν¨μ μΈμμμ κ³μ setState ν¨μλ₯Ό ν΅ν΄μ, μλ―Έμλ κ°μ μ λ°μ΄νΈκ° λλ€λ κ²μ΄λ€. μ¬κΈ°μ useReducer μ μν μ λ¨μν μ»΄ν¬λνΈλ₯Ό κ°μ 리λ λλ§ νλ κ²μ΄κ³ , useReducer μ ν¨μ μΈμ κ°μμ λ³κ²½νκ³ μλ μνλ νΉλ³ν μΌμ νλ κ²μ΄ μλλ€.
useForceUpdate λ₯Ό 리νν λ§ν΄λ³΄μ.
useCallback μ μ¬μ©νμ¬, useCallback μ 첫λ²μ§Έ μΈμλ‘ μ λ¬λ ν¨μκ° λ§€λ² μλ‘μ΄ ν¨μκ° μλλλ‘ λ§λ€μ΄μ£Όμλ€.
κ²°κ³Όμ μΌλ‘, μμ μ½λμμλ λΉμ§λμ€ λ‘μ§κ³Ό UIμ λν κ΄μ¬μ¬μ λΆλ¦¬κ° μ΄λ£¨μ΄μ‘λ€.
Last updated