React Study

React - useMemo

2020. 12. 6. 23:35
๋ชฉ์ฐจ
  1. ๋ชฉ๋ก
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ useMemo
  4. ๐Ÿ“Œ Conclusion
๋ฐ˜์‘ํ˜•

๋ชฉ๋ก

  • Introduction
  • useMemo
  • Conclusion

๐Ÿ“Œ Introduction

์•ˆ๋…•ํ•˜์„ธ์š” ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” useMemo๋ฅผ ์ด์šฉํ•˜์—ฌ ์ด์ „์— ์—ฐ์‚ฐ ๋˜์—ˆ๋˜ ๊ฐ’์„ ๊ธฐ์–ตํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. useMemo๋Š” ์ฃผ๋กœ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ• ๋•Œ ์‚ฌ์šฉ์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ useMemo

์ผ๋‹จ ๋จผ์ € countActiveUser๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ํ•œ๋ฒˆ ์ •์˜๋ฅผ ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

function countActiveUsers(users) {
  console.log("ํ™œ์„ฑ ์‚ฌ์šฉ์ž ์ˆ˜๋ฅผ ์„ธ๋Š”์ค‘...");
  return users.filter((user) => user.active).length;
}

๋‹จ์ˆœํ•˜๊ฒŒ user์—์„œ active์ธ ์ˆซ์ž๋งŒ ๊ฑธ๋Ÿฌ์ฃผ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

๋งŒ์•ฝ ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉ์„ count์˜ ์ˆซ์ž๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•ด์ค„ ๊ฒฝ์šฐ component๊ฐ€ re render๋ ๋•Œ ๋งˆ๋‹ค ๊ฐ’์„ ์žฌ๊ณ„์‚ฐํ•ด์ฃผ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ useMemo๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ด๋Ÿฌํ•œ ํ˜„์ƒ์„ ํ•ด๊ฒฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const count = useMemo(() => countActiveUsers(users), [users])

useMomo๋Š” useEffect์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ฒซ๋ฒˆ์งธ ์ธ์ž์—๋Š” ํ•จ์ˆ˜๊ฐ€ ๋“ค์–ด๊ฐ€๊ฒŒ ๋˜์–ด์žˆ๊ณ  ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ๋Š” ๋ฐฐ์—ด์„ ๋ฐ›๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋ฐฐ์—ด์•ˆ์— ๊ฐ’์ด ๋ณ€๊ฒฝ์ด ๋ ๋•Œ๋งŒ ์‹คํ–‰์„ ํ•˜๊ฒŒ ๋” ๋˜์–ด์žˆ์–ด์š”. ๊ทธ๋ž˜์„œ re render์‹œ์—๋Š” count์˜ ์—ฐ์‚ฐ์ค‘ users๊ฐ€ ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ํ•œ ์—ฐ์‚ฐ์„ ๋‹ค์‹œ ํ•ด์ฃผ์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ Conclusion

์ด๋ ‡๊ฒŒ react์—์„œ ์ตœ์ ํ™” ๋ฐฉ๋ฒ•์„ useMemo๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. vue์—์„œ๋Š” computed์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ react์ชฝ์ด ๋ญ”๊ฐ€ ์กฐ๊ธˆ๋” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šค๋Ÿฝ์ง€ ์•Š๋‚˜ ๋ผ๋Š” ์ƒ๊ฐ์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ ๋งŒ๋‚˜์š” ์•ˆ๋…•~!

๋ฐ˜์‘ํ˜•

'React Study' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

React - React.memo  (0) 2020.12.07
React - useCallback  (0) 2020.12.07
React - useEffect  (0) 2020.12.05
React - ๋ฐฐ์—ด ์กฐ์ž‘ํ•˜๊ธฐ  (0) 2020.12.05
React - useRef ๋ณ€์ˆ˜ ์„ ์–ธํ•˜๊ธฐ  (0) 2020.12.05
  1. ๋ชฉ๋ก
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ useMemo
  4. ๐Ÿ“Œ Conclusion
'React Study' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • React - React.memo
  • React - useCallback
  • React - useEffect
  • React - ๋ฐฐ์—ด ์กฐ์ž‘ํ•˜๊ธฐ
eddie0329
eddie0329
Front-end Developer
๋ฐ˜์‘ํ˜•
eddie0329
Eddie Sunny's Blog
eddie0329
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (100)
    • Summary of Book (0)
    • Vue Study (11)
    • Vue TDD (9)
    • Vue BDD (5)
    • Design Pattern (9)
    • Javascript Study (3)
    • React Study (15)
    • React TDD (1)
    • Vue Storybook (2)
    • Refactoring (0)
    • Graphql_Apollo (3)
    • Svelte (8)
    • Open Source (1)
    • D3 (4)
    • Typescript (1)
    • CSS (2)
    • Android (0)
    • Java (0)
    • Kotlin (0)
    • ์žก๋‹ด (0)
    • Swift (19)
    • Rust (2)
    • ํšŒ์‚ฌ์ด์•ผ๊ธฐ (2)
    • ReactNative Study (2)
    • Vitest (0)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • Home

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • swift5
  • vue tdd
  • Design Pattern
  • TDD
  • Vue test
  • apollo
  • CSS
  • Vue
  • TypeScript
  • svelte
  • client only
  • Javascript
  • storybook6
  • vue storybook
  • Cypress
  • Kotlin
  • vue cypress
  • react useRef
  • D3
  • React Native
  • slot ํŒจํ„ด
  • javascript pattern
  • react-component-slot
  • jest
  • swift
  • vue bdd
  • react
  • BDD
  • Nextjs
  • vue3

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
eddie0329
React - useMemo
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.