μ»΄ν¬λ„ŒνŠΈ μ„±λŠ₯ μ΅œμ ν™”λ₯Ό μœ„ν•œ useMemo μ‚¬μš©λ²•

2024. 8. 13. 16:43· 개발/React
λͺ©μ°¨
  1. useMemo ? 
  2. useMemo ν˜•νƒœ
728x90
λ°˜μ‘ν˜•

ν˜„μž¬ μž‘μ—… 쀑인 ν”„λ‘œμ νŠΈμ—μ„œ 받은 μ½”λ“œ ν”Όλ“œλ°±μ„ μ •λ¦¬ν•˜λ‹€κ°€ 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]);
728x90

'개발 > React' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[λ¦¬μ•‘νŠΈ/TS] React-beautiful-dndλ₯Ό μ‚¬μš©ν•΄μ„œ drag & drop ν‘œν˜„ν•˜κΈ°  (1) 2023.11.21
[λ¦¬μ•‘νŠΈ/Axios] Http GET μš”μ²­ body에 데이터λ₯Ό λ‹΄μ•„ 보낼 수 μžˆλ‹€?  (0) 2023.11.14
[λ¦¬μ•‘νŠΈ] useNavigate둜 props 전달 & useLocation 으둜 λ°›κΈ°  (0) 2023.11.14
[Redux] Redux toolkit 기초 μ½”λ“œ 정리  (0) 2023.11.10
[React/Typescript] κ°€λ‘œμ„Έλ‘œ λͺ¨λ‘ λ“œλž˜κ·Έκ°€ κ°€λŠ₯ν•œ μŠ¬λΌμ΄λ“œ λ§Œλ“€κΈ°  (2) 2023.11.03
  1. useMemo ? 
  2. useMemo ν˜•νƒœ
'개발/React' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€
  • [λ¦¬μ•‘νŠΈ/TS] React-beautiful-dndλ₯Ό μ‚¬μš©ν•΄μ„œ drag & drop ν‘œν˜„ν•˜κΈ°
  • [λ¦¬μ•‘νŠΈ/Axios] Http GET μš”μ²­ body에 데이터λ₯Ό λ‹΄μ•„ 보낼 수 μžˆλ‹€?
  • [λ¦¬μ•‘νŠΈ] useNavigate둜 props 전달 & useLocation 으둜 λ°›κΈ°
  • [Redux] Redux toolkit 기초 μ½”λ“œ 정리
밍(Ming) πŸˆβ€β¬›
밍(Ming) πŸˆβ€β¬›
πŸ‘©πŸ»β€πŸ’» Frontend Developer
밍(Ming) πŸˆβ€β¬›
Ming devlog
밍(Ming) πŸˆβ€β¬›
전체
였늘
μ–΄μ œ

곡지사항

  • About Ming 🐰
  • λΆ„λ₯˜ 전체보기 (261)
    • 개발 (255)
      • πŸ“ TIL (58)
      • ❌ 였λ₯˜ λ…ΈνŠΈ (23)
      • React (23)
      • Next.js (11)
      • React-Native (6)
      • JavaScript (10)
      • Flutter (19)
      • Database (1)
      • πŸ’¬ μ½”λ”©ν…ŒμŠ€νŠΈ (21)
      • πŸ“š English (9)
      • Etc... (25)
      • β›΅ ν•­ν•΄99 (49)
    • πŸ’» Dev (6)
      • πŸ“ TIL (4)
      • πŸ’¬ Algorithm (1)
      • Etc... (1)

인기 κΈ€

νƒœκ·Έ

  • ReactNative
  • μžλ°”μŠ€ν¬λ¦½νŠΈ
  • TIL
  • λ¦¬μ•‘νŠΈλ„€μ΄ν‹°λΈŒ
  • react
  • 개발자회고
  • todaywhatidid
  • github
  • leetcode
  • Firebase
  • flutter
  • λΆ€νŠΈμΊ ν”„
  • 개발자일기
  • μ˜μ–΄κ³΅λΆ€
  • μ½”ν…Œκ³΅λΆ€
  • ν”ŒλŸ¬ν„°
  • twid
  • Git
  • μ•Œκ³ λ¦¬μ¦˜
  • 코딩곡뢀
  • μ½”λ”©ν…ŒμŠ€νŠΈ
  • 슀파λ₯΄νƒ€μ½”λ”©ν΄λŸ½
  • μ½”ν…Œ
  • ν•­ν•΄99
  • νƒ€μž…μŠ€ν¬λ¦½νŠΈ
  • λ¦¬μ•‘νŠΈ
  • μ΄μ½”λ…Έλ―ΈμŠ€νŠΈ
  • ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€
  • nextjs
  • react-native

졜근 λŒ“κΈ€

졜근 κΈ€

250x250
hELLO Β· Designed By μ •μƒμš°.v4.2.1
밍(Ming) πŸˆβ€β¬›
μ»΄ν¬λ„ŒνŠΈ μ„±λŠ₯ μ΅œμ ν™”λ₯Ό μœ„ν•œ useMemo μ‚¬μš©λ²•
μƒλ‹¨μœΌλ‘œ

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”

κ°œμΈμ •λ³΄

  • ν‹°μŠ€ν† λ¦¬ ν™ˆ
  • 포럼
  • 둜그인

단좕킀

λ‚΄ λΈ”λ‘œκ·Έ

λ‚΄ λΈ”λ‘œκ·Έ - κ΄€λ¦¬μž ν™ˆ μ „ν™˜
Q
Q
μƒˆ κΈ€ μ“°κΈ°
W
W

λΈ”λ‘œκ·Έ κ²Œμ‹œκΈ€

κΈ€ μˆ˜μ • (κΆŒν•œ μžˆλŠ” 경우)
E
E
λŒ“κΈ€ μ˜μ—­μœΌλ‘œ 이동
C
C

λͺ¨λ“  μ˜μ—­

이 νŽ˜μ΄μ§€μ˜ URL 볡사
S
S
맨 μœ„λ‘œ 이동
T
T
ν‹°μŠ€ν† λ¦¬ ν™ˆ 이동
H
H
단좕킀 μ•ˆλ‚΄
Shift + /
⇧ + /

* λ‹¨μΆ•ν‚€λŠ” ν•œκΈ€/영문 λŒ€μ†Œλ¬Έμžλ‘œ 이용 κ°€λŠ₯ν•˜λ©°, ν‹°μŠ€ν† λ¦¬ κΈ°λ³Έ λ„λ©”μΈμ—μ„œλ§Œ λ™μž‘ν•©λ‹ˆλ‹€.