hooks-useMemo
βWhat is useMemo
μ»΄ν¬λνΈ μ΅μ νμ μ¬μ©λλ λνμ μΈ ν μ΄λ©°, λΉμ·ν ν μΌλ‘λ useCallbackμ΄ μλ€.
memoλ? Memoization μ λ»νλ€.
λμΌν κ°μ 리ν΄νλ ν¨μλ₯Ό λ°λ³΅μ μΌλ‘ νΈμΆν΄μΌ ν λ, κ°μ₯ μ²μμ μ¬μ©νλ κ°μ λ©λͺ¨λ¦¬μ μ μ₯νλ€.
μ¦, μμ£Ό μ¬μ©λλ κ°μ νμν λ λ§λ€ μΊμμμ κ°μ Έμμ μ¬μ©νλ κ²μ΄λ€.
ν¨μν μ»΄ν¬λνΈλ μνκ° λ³κ²½λ λ λ§λ€ 리λ λλ§λκ³ , κ·Έ λ λ§λ€ λ΄λΆ λ³μκ° μ΄κΈ°νλλ€.
κΌ νμν λλ§ μ μ νκ² μ¬μ©νλ κ²μ΄ μ±λ₯μ μ’λ€.
μμ μ½λ
μ»΄ν¬λνΈκ° λ λλ§λμλ§μ loadSomeData ν¨μκ° μ€νλκ³ λλ μ΄κ° κ±Έλ¦°λ€.
2κ°μ μΈν κ° μ€μ μ΄λ€ κ²μ μ λ°μ΄νΈ νλλΌλ loadSomeData ν¨μκ° μ€νλμ΄ λλ μ΄κ° κ±Έλ¦°λ€.
μμ μ½λμμλ useMemo λ₯Ό μ¬μ©νμ¬ loadSomeData ν¨μμ λν κ°μ λ©λͺ¨μ΄μ μ΄μ νλλ‘ μμ νλ€.
κ·Έλ¬λ©΄ λλ²μ§Έ input κ°μ λλ μ΄ μμ΄ λ³κ²½μ΄ κ°λ₯νλ€.
μ¦, loadSomeData ν¨μμ λ¦¬ν΄ κ°μ΄ λ countA useMemoμ μμ‘΄μ±λ°°μ΄μ μ€μ νμ¬ κ°μ μ»΄ν¬λνΈ λ΄μμ λ€λ₯Έ μν κ°μ΄ λ³κ²½μ΄ λμ΄λ, countAμ κ°μ λ³κ²½λμ§ μμ λλ μ΄κ° λ°μνμ§ μλλ€.
κ°μ΄ μλλΌ κ°μ²΄λΌλ©΄?
μν κ°μ΄ 2κ°κ° μλ€. νλλ μμκ°μ κ°λ count, λ λ€λ₯Έ νλλ user λΌλ κ°μ²΄
user κ°μ²΄μ ν€ κ°μ μΆκ°νμ¬ λ¦¬ν΄νλλ‘ νκ³ , useEffectλ₯Ό μΆκ°νμ¬ μμ‘΄μ±λ°°μ΄μ nameAndAge μ€μ
μ΄λ κ² νμ λ κΈ°λνλ λμμ, user μ κ°μ΄ λ°λμμ λλ§ useEffectκ° νΈμΆλκ³ , count κ°μ΄ λ°λμμ λλ useEffectκ° νΈμΆλμ§ μμμΌ νλ€.
κ·Έλ¬λ useEffect λ count κ°μ΄ λ°λλμ§ user κ°μ²΄μ κ°μ΄ λ°λλμ§ μΈμ λ νΈμΆλλ€.
μ¦, nameAndAge λΌλ κ°μ²΄κ° λ§€λ² μλ‘κ² μμ±λκΈ° λλ¬Έμ΄λ€.
μλμ μ½λμ κ°μ΄ μμ νμ.
μ΄λ κ² νλ©΄ user μ name κ°μ΄ useMemoμ μμ‘΄μ±λ°°μ΄μ μ€μ λμ΄, useEffectλ userμ name κ°μ΄ λ³κ²½λ λμλ§ μ€νλκ² λλ€.
Last updated