νμ¬ μμ μ€μΈ νλ‘μ νΈμμ λ°μ μ½λ νΌλλ°±μ μ 리νλ€κ° useMemoλ₯Ό μ²μμΌλ‘ μ¬μ©ν΄λ΄€λ€.
리μ‘νΈλ₯Ό μ£Όλ‘ μ¬μ©νλ νλ‘ νΈμλλ‘ μΌνλ©΄μ λ©΄μ λλ λ§μ£Όνλ useMemoλΌλ 리μ‘νΈ ν .
useMemo ?
리μ‘νΈμμ μ»΄ν¬λνΈμ μ±λ₯μ μ΅μ ν νλλ° μ¬μ©λλ 리μ‘νΈ ν μ΄λ€.
μ΄λ»κ² μ»΄ν¬λνΈμ μ±λ₯μ μ΅μ νν΄μ£Όλλνλ©΄μ λ³΄ν΅ μμλ‘ μ°μ°μμ
μ λ§μ΄ λ λ€. κ³μν΄μ λμΌν μ°μ°μ΄ μΌμ΄λλ μμ
μλ μλ‘ μ²μλΆν° μ°μ°ν νμμμ΄ λνλμκ° μμΌλ©΄ λ¨Όμ νμ¬ μμ‘΄κ°κ³Ό μ΄μ μ μΈμ‘΄κ°μ λΉκ΅νμ¬ λ³κ²½λμλμ§ νμΈν©λλ€. μλ‘μ΄ λμμ΄ μΌμ΄λ¬μ λ κΈ°μ‘΄μ κ°μ κΈ°μ΅νκ³ μλ€κ° κ±°κΈ°μ λΆν° μ°μ°μ μμνλ€. λ©λͺ¨λ κ°μ μ μ₯νκΈ° μν΄ λ©λͺ¨μ΄μ μ΄μ
μΊμλ₯Ό μ¬μ©ν©λλ€.
μΊμλ λ©λͺ¨λ κ°μ λνλ΄λ ν€μ μ’
μμ±μ λνλ΄λ κ°μ΄ μλ JavaScript κ°μ²΄λ‘ ꡬνλλ€.
κ΅¬μ± μμκ° λ λλ§ λ λ μΊμλ₯Ό νμΈνμ¬ λ©λͺ¨λ κ°μ΄ μ£Όμ΄μ§ μ’
μμ±μ λν΄ μ΄λ―Έ μ‘΄μ¬νλμ§ νμΈν©λλ€. λ©λͺ¨λ κ°μ΄ μμΌλ©΄ Reactλ ν¨μλ₯Ό λ€μ κ³μ°νμ§ μκ³ λ°νν©λλ€.
μ‘°κΈ λ μ½κ² μ΄ν΄λ₯Ό νμλ©΄ 리μ‘νΈ ν¨μν μ»΄ν¬λνΈκ° μ΄λ»κ² λμνλμ§ μλ©΄ μ’μ κ² κ°λ€. 리μ‘νΈμ ν¨μν μ»΄ν¬λνΈλ λ λλ§μ΄ λκ³ ν¨μλ₯Ό νΈμΆνκ³ λͺ¨λ λ΄λΆμ λ³μλ₯Ό μ΄κΈ°ννλ μμλ‘ μμ μ΄ μΌμ΄λλ€. λλ datepickerλ₯Ό μν΄μ λ μ§λ₯Ό μ§μ ν΄μ€μΌνλλ°. μ΄λΆλΆμ΄ κ³μν΄μ μ΄κΈ°νλλ€λ κ²μ΄λ€. μ¬μ€ μ΄ μ λλ ν¬κ² λΆλ΄μ€λ½μ§λ μμ§λ§ 볡μ‘ν μ°μ°μ΄ λ€μ΄κ°μΌνλ κ±°λΌλ©΄ κ΅μ₯ν λΆλ΄μ΄ λ κ²μ΄λ€.
κ·Έλμ useMemoλ₯Ό μ°λ©΄ κ΅³μ΄ μ΄ λΆλΆμ λ€μ νΈμΆνμ§ μμλ μ΄μ μ κ°μ κΈ°μ΅ν΄λλ€ λ€μ μ΄λ€λ μ΄μΌκΈ°λ€.
μ¦, useMemoλ₯Ό μ¬μ©νλ©΄ λ°μ΄ν°κ° λ³κ²½λμ§ μμμ λ μ λ°μ΄νΈλ₯Ό νμ§ μκΈ° λλ¬Έμ, 리λ λλ§μ λ§μμ μΈλ°μλ μ±λ₯ μ νλ₯Ό λ§μ μ μλ€.
useMemo νν
const cachedValue = useMemo(calculateValue, dependencies)
μλΆλΆμ ν¨μκ° λ€μ΄κ°κ³ , λ€μ ν¨μμμ μ°Έμ‘°νλ κ°μ΄ μμ‘΄κ°μΌλ‘ λ€μ΄κ°λ€.
useMemoλ ν¨μμ κ²°κ³Όκ°μ λ©λͺ¨νκΈ° λλ¬Έμ κ°μ returnν΄μΌνλ€λ μ μ μμ§λ§μ
μλλ μ€μ§μ μΈ μ μ© μμ΄λ€.
μ°μ°μ΄ ν¬κ² λ€μ΄κ°λ λΆλΆμ μλμ§λ§ useMemoλ₯Ό μ¬μ©νλκ² μ’μ κ² κ°λ€λ νΌλλ°±μ λ°μμ μλμ²λΌ μμ νλ€.
// date pickerμ μΈ date μ μνλ λΆλΆ
// datepicker date μ μν λΆλΆμ΄λ€. λ³μλ‘ λ°λ‘ μ μν¨.
const endDate = new Date(dateRange?.to || new Date());
endDate.setUTCHours(0, 0, 0, 0);
// useMemo μ μ©νκΈ°
const endDate = useMemo(() => {
const date = new Date(dateRange?.to || new Date());
date.setUTCHours(0, 0, 0, 0);
return date;
}, [dateRange?.to]);
'κ°λ° > React' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
νμ¬ μμ μ€μΈ νλ‘μ νΈμμ λ°μ μ½λ νΌλλ°±μ μ 리νλ€κ° useMemoλ₯Ό μ²μμΌλ‘ μ¬μ©ν΄λ΄€λ€.
리μ‘νΈλ₯Ό μ£Όλ‘ μ¬μ©νλ νλ‘ νΈμλλ‘ μΌνλ©΄μ λ©΄μ λλ λ§μ£Όνλ useMemoλΌλ 리μ‘νΈ ν .
useMemo ?
리μ‘νΈμμ μ»΄ν¬λνΈμ μ±λ₯μ μ΅μ ν νλλ° μ¬μ©λλ 리μ‘νΈ ν μ΄λ€.
μ΄λ»κ² μ»΄ν¬λνΈμ μ±λ₯μ μ΅μ νν΄μ£Όλλνλ©΄μ λ³΄ν΅ μμλ‘ μ°μ°μμ
μ λ§μ΄ λ λ€. κ³μν΄μ λμΌν μ°μ°μ΄ μΌμ΄λλ μμ
μλ μλ‘ μ²μλΆν° μ°μ°ν νμμμ΄ λνλμκ° μμΌλ©΄ λ¨Όμ νμ¬ μμ‘΄κ°κ³Ό μ΄μ μ μΈμ‘΄κ°μ λΉκ΅νμ¬ λ³κ²½λμλμ§ νμΈν©λλ€. μλ‘μ΄ λμμ΄ μΌμ΄λ¬μ λ κΈ°μ‘΄μ κ°μ κΈ°μ΅νκ³ μλ€κ° κ±°κΈ°μ λΆν° μ°μ°μ μμνλ€. λ©λͺ¨λ κ°μ μ μ₯νκΈ° μν΄ λ©λͺ¨μ΄μ μ΄μ
μΊμλ₯Ό μ¬μ©ν©λλ€.
μΊμλ λ©λͺ¨λ κ°μ λνλ΄λ ν€μ μ’
μμ±μ λνλ΄λ κ°μ΄ μλ JavaScript κ°μ²΄λ‘ ꡬνλλ€.
κ΅¬μ± μμκ° λ λλ§ λ λ μΊμλ₯Ό νμΈνμ¬ λ©λͺ¨λ κ°μ΄ μ£Όμ΄μ§ μ’
μμ±μ λν΄ μ΄λ―Έ μ‘΄μ¬νλμ§ νμΈν©λλ€. λ©λͺ¨λ κ°μ΄ μμΌλ©΄ Reactλ ν¨μλ₯Ό λ€μ κ³μ°νμ§ μκ³ λ°νν©λλ€.
μ‘°κΈ λ μ½κ² μ΄ν΄λ₯Ό νμλ©΄ 리μ‘νΈ ν¨μν μ»΄ν¬λνΈκ° μ΄λ»κ² λμνλμ§ μλ©΄ μ’μ κ² κ°λ€. 리μ‘νΈμ ν¨μν μ»΄ν¬λνΈλ λ λλ§μ΄ λκ³ ν¨μλ₯Ό νΈμΆνκ³ λͺ¨λ λ΄λΆμ λ³μλ₯Ό μ΄κΈ°ννλ μμλ‘ μμ μ΄ μΌμ΄λλ€. λλ datepickerλ₯Ό μν΄μ λ μ§λ₯Ό μ§μ ν΄μ€μΌνλλ°. μ΄λΆλΆμ΄ κ³μν΄μ μ΄κΈ°νλλ€λ κ²μ΄λ€. μ¬μ€ μ΄ μ λλ ν¬κ² λΆλ΄μ€λ½μ§λ μμ§λ§ 볡μ‘ν μ°μ°μ΄ λ€μ΄κ°μΌνλ κ±°λΌλ©΄ κ΅μ₯ν λΆλ΄μ΄ λ κ²μ΄λ€.
κ·Έλμ useMemoλ₯Ό μ°λ©΄ κ΅³μ΄ μ΄ λΆλΆμ λ€μ νΈμΆνμ§ μμλ μ΄μ μ κ°μ κΈ°μ΅ν΄λλ€ λ€μ μ΄λ€λ μ΄μΌκΈ°λ€.
μ¦, useMemoλ₯Ό μ¬μ©νλ©΄ λ°μ΄ν°κ° λ³κ²½λμ§ μμμ λ μ λ°μ΄νΈλ₯Ό νμ§ μκΈ° λλ¬Έμ, 리λ λλ§μ λ§μμ μΈλ°μλ μ±λ₯ μ νλ₯Ό λ§μ μ μλ€.
useMemo νν
const cachedValue = useMemo(calculateValue, dependencies)
μλΆλΆμ ν¨μκ° λ€μ΄κ°κ³ , λ€μ ν¨μμμ μ°Έμ‘°νλ κ°μ΄ μμ‘΄κ°μΌλ‘ λ€μ΄κ°λ€.
useMemoλ ν¨μμ κ²°κ³Όκ°μ λ©λͺ¨νκΈ° λλ¬Έμ κ°μ returnν΄μΌνλ€λ μ μ μμ§λ§μ
μλλ μ€μ§μ μΈ μ μ© μμ΄λ€.
μ°μ°μ΄ ν¬κ² λ€μ΄κ°λ λΆλΆμ μλμ§λ§ useMemoλ₯Ό μ¬μ©νλκ² μ’μ κ² κ°λ€λ νΌλλ°±μ λ°μμ μλμ²λΌ μμ νλ€.
// date pickerμ μΈ date μ μνλ λΆλΆ
// datepicker date μ μν λΆλΆμ΄λ€. λ³μλ‘ λ°λ‘ μ μν¨.
const endDate = new Date(dateRange?.to || new Date());
endDate.setUTCHours(0, 0, 0, 0);
// useMemo μ μ©νκΈ°
const endDate = useMemo(() => {
const date = new Date(dateRange?.to || new Date());
date.setUTCHours(0, 0, 0, 0);
return date;
}, [dateRange?.to]);