πŸ’» React - λ©”λͺ¨μ΄μ œμ΄μ…˜(Memoization)

waterglassesΒ·2022λ…„ 5μ›” 27일
1

TIL

λͺ©λ‘ 보기
30/50
post-thumbnail

⚠️ μ •λ¦¬ν•œ λ‚΄μš©μ€ μ˜€νƒ€λ‚˜ 잘λͺ»λœ 정보가 μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€.

πŸ“ƒ 였늘 κ³΅λΆ€ν•œ 것

  1. useMemo
  2. React.memo
  3. useCallback

0. λ©”λͺ¨μ΄μ œμ΄μ…˜(Memoization)

λ©”λͺ¨μ΄μ œμ΄μ…˜μ€ 컴퓨터가 λ™μΌν•œ 계산을 λ°˜λ³΅ν•΄μ•Ό ν•  λ•Œ, 이전에 κ³„μ‚°ν•œ 값을 λ©”λͺ¨λ¦¬μ— μ €μž₯ν•¨μœΌλ‘œμ„œ λ™μΌν•œ 계싼을 ν•˜μ§€ μ•Šλ„λ‘ ν•˜μ—¬, 속도λ₯Ό λ†’μ΄λŠ” κΈ°μˆ μ΄λ‹€. 보톡 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ΅œμ ν™”λ₯Ό μœ„ν•΄ μ‚¬μš©λœλ‹€.

Reactμ—μ„œ λ©”λͺ¨μ΄μ œμ΄μ…˜μ„ ν•˜λŠ” 방법
1. useMemo
2. React.memo
3. useCallback

1. useMemo

useMemoλ₯Ό μ‚¬μš©ν•˜λ©΄ ν•¨μˆ˜ μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€μ—μ„œ λ°œμƒν•˜λŠ” 연산을 μ΅œμ ν™”ν•  수 μžˆλ‹€. 이전 값을 κΈ°μ–΅ν•΄λ‘μ—ˆλ‹€κ³  쑰건에 따라 μž¬ν™œμš©ν•˜μ—¬ μ„±λŠ₯을 μ΅œμ ν™” ν•˜λŠ” μš©λ„λ‘œ μ‚¬μš©λœλ‹€. λ©”λͺ¨μ΄μ¦ˆ 된 값을 returnν•˜λŠ” Hook이닀.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

2μ „μ¨° 인자둜 λ„˜μ–΄μ˜¨ 의쑴 인자 쀑에 ν•˜λ‚˜λΌλ„ 값이 λ³€κ²½λ˜λ©΄ 1번째 인자의 ν•¨μˆ˜λ₯Ό μž¬μ‹€ν–‰ν•œλ‹€. λ§Œμ•½ 인자λ₯Ό μ „λ‹¬ν•˜μ§€ μ•ŠλŠ”λ‹€λ©΄ 맀번 μƒˆλ‘­κ²Œ κ³„μ‚°ν•˜μ—¬ returnν•œλ‹€.

2. React.memo

ν•¨μˆ˜ μ»΄ν¬λ„ŒνŠΈμ—μ„œλŠ” 라이프 사이클을 μ‚¬μš©ν•  수 μ—†λ‹€. κ·Έλž˜μ„œ React.memoλΌλŠ” ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•œλ‹€. μ»΄ν¬λ„ŒνŠΈμ˜ propsκ°€ λ°”λ€Œμ§€ μ•Šμ•˜λ‹€λ©΄, λ¦¬λ Œλ”λ§ν•˜μ§€ μ•Šλ„λ‘ μ„€μ •ν•˜μ—¬ ν•¨μˆ˜ μ»΄ν¬λ„ŒνŠΈμ˜ λ¦¬λ Œλ”λ§ μ„±λŠ₯을 μ΅œμ ν™” ν•΄ 쀄 수 μžˆλ‹€.

const Component = React.memo((props) => {
	return (/*μ»΄ν¬λ„ŒνŠΈ λ Œλ”λ§ μ½”λ“œ*/)}
);

이전과 같은 propsκ°€ λ“€μ–΄μ˜¬ λ•ŒλŠ” λ Œλ”λ§ 과정을 μŠ€ν‚΅ν•˜κ³  κ°€μž₯ μ΅œκ·Όμ— λ Œλ”λ§λœ κ²°κ³Όλ₯Ό μž¬μ‚¬μš©ν•œλ‹€.
λ‹€λ§Œ, μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€μ—μ„œ useState같은 훅을 μ‚¬μš©ν•  λ•Œ μƒνƒœκ°€ λ³€κ²½ 되면 λ¦¬λ Œλ”λ§λœλ‹€.

3. useCallback

useCallback을 μ‚¬μš©ν•˜λ©΄ λ§Œλ“€μ–΄ λ†¨λ˜ ν•¨μˆ˜λ₯Ό μž¬μ‚¬μš©ν•  수 μžˆλ‹€. μ»΄ν¬λ„ŒνŠΈκ°€ λ Œλ”λ§ 될 λ•Œλ§ˆλ‹€ λ‚΄λΆ€μ μœΌλ‘œ μ‚¬μš©λœ ν•¨μˆ˜κ°€ μƒˆλ‘­κ²Œ μƒμ„±λ˜λŠ” 경우, μžμ‹ μ»΄ν¬λ„ŒνŠΈμ— Prop으둜 μƒˆλ‘œ μƒμ„±λœ ν•¨μˆ˜κ°€ λ„˜κ²¨μ§€κ²Œ 되면 λΆˆν•„μš”ν•œ λ¦¬λ Œλ”λ§μ΄ 일어날 수 μžˆλ‹€.

const [name, setName] = useState('');
const [age, setAge] = useState(0);
const onSave = useCallback(() => saveToServer(name, age), [name, age]);

μœ„μ˜ μ˜ˆμ‹œμ²˜λŸΌ nameκ³Ό age값이 λ³€ν•˜μ§€ μ•ŠμœΌλ©΄ 같은 ν•¨μˆ˜κ°€ μ „λ‹¬λ˜μ–΄ λ¦¬λ Œλ”λ§μ„ 방지할 수 μžˆλ‹€.

useMemoλŠ” ν•¨μˆ˜μ˜ μ—°μ‚°λŸ‰μ΄ λ§Žμ„ λ•Œ 이전 결과값을 μž¬μ‚¬μš©ν•˜λŠ” λͺ©μ μ΄κ³  useCallback은 ν•¨μˆ˜κ°€ μž¬μƒμ„± λ˜λŠ” 것을 λ°©μ§€ν•˜κΈ° μœ„ν•œ λͺ©μ μ΄λ‹€.

πŸ”₯ λŠλ‚€μ 

λ¦¬μ•‘νŠΈ 훅을 μ‚¬μš©ν•  λ•Œ useState, useEffect 만 많이 μ‚¬μš©ν•΄λ³΄κ³  λ‚˜λ¨Έμ§€λŠ” μ‚¬μš©ν•΄λ³Έ 적이 μ—†μ—ˆλŠ”λ° μƒˆλ‘­κ²Œ λ©”λͺ¨μ΄μ œμ΄μ…˜μ— λŒ€ν•΄μ„œ μ•Œκ²Œ λ˜μ–΄ λ‹€μŒ ν”„λ‘œμ νŠΈλ₯Ό ν•  λ•Œμ—λŠ” μ΅œμ ν™”μ— 쑰금 더 μ‹ κ²½μ“Έ 수 μžˆμ„ 것 κ°™λ‹€.

λ§ν•˜λ©΄μ„œ λ°°μ›Œμš” μŠ€ν„°λ””μ—μ„œ λ¦¬μ•‘νŠΈλ₯Ό λ‹€λ£¨κΈ°λ‘œ ν•˜μ˜€λŠ”λ° 쑰금 더 깊게 κ³΅λΆ€ν•˜μ—¬ λ‹€μ‹œ 정리해보도둝 ν•˜κ² λ‹€. μ˜€λŠ˜λ„ μˆ˜κ³ ν–ˆλ‹€~

Refer

profile
맀 μˆœκ°„ μ„±μž₯ν•˜λŠ” κ°œλ°œμžκ°€ 되렀고 λ…Έλ ₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

0개의 λŒ“κΈ€