React Study

React - useCallback

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

๋ชฉ๋ก

  • Introduction
  • useCallback
  • Conclusion

๐Ÿ“Œ Introduction

์•ˆ๋…•ํ•˜์„ธ์š”. ์˜ค๋Š˜์€ react์—์„œ useCallback์„ ์‚ฌ์šฉํ•ด์„œ ์ƒˆ๋กœ์šด ํ•จ์ˆ˜๋ฅผ ์„ ์–ธ์„ ํ•˜๊ธฐ๋ณด๋‹ค ์žฌ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ๋ ค๋“œ๋ฆฌ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ useCallback

๋งŒ์•ฝ ์ด๋Ÿฐ ํ•จ์ˆ˜๊ฐ€ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์— ์žˆ๋‹ค๊ณ  ๊ฐ€์ •์„ ํ•ด๋ณผ๊ฒŒ์š”.

  const onToggle = (userId) => {
    setUsers(
      users.map((user) =>
        user.id === userId ? { ...user, active: !user.active } : user
      )
    );
  };

๊ทธ๋ ‡๋‹ค๋ฉด ์œ„์— ์žˆ๋Š” onToggle์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋žœ๋”๋ง์ด ๋ ๋•Œ๋งˆ๋‹ค ๋‹ค์‹œ ์„ ์–ธ์„ ํ•ด์ฃผ๊ฒŒ ๋ ๊ฑฐ ์˜ˆ์š”. ํ•˜์ง€๋งŒ ์•ž์„  ํฌ์ŠคํŒ…์— useMemo์™€ ๊ฐ™์ด ์ด๋ ‡๊ฒŒ ํ•ด์ค„์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  const onToggle = useCallback(
    (userId) => {
      setUsers(
        users.map((user) =>
          user.id === userId ? { ...user, active: !user.active } : user
        )
      );
    },
    [users]
  );

useMemo๋•Œ์™€ ๋™์ผํ•˜๊ฒŒ ์ด์ œ onToggle์€ users๊ฐ€ ๋ณ€ํ™”ํ• ๋•Œ๋งŒ ์„ ์–ธ์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋ฉด ์žฌ์‚ฌ์šฉํ•˜๊ฒŒ ๋ ๊ฑฐ ์˜ˆ์š”.

๐Ÿ“Œ Conclusion

์ด๋ ‡๊ฒŒ useCallback์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ์ด๋ ‡๊ฒŒ ํ•ด๋„ ํฐ ๋ณ€ํ™”๋Š” ์—†์„๊ฑฐ์˜ˆ์š”. ํ•˜์ง€๋งŒ ์ด์ œ ๋‹ค์Œ์— ๋‚˜์˜ฌ React.memo๋ฅผ ์•„์‹ ๋‹ค๋ฉด ์ข€๋” ์„ฑ๋Šฅ์— ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ ๋งŒ๋‚˜์š” ์•ˆ๋…•!

๋ฐ˜์‘ํ˜•

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

React - useReducer  (0) 2020.12.13
React - React.memo  (0) 2020.12.07
React - useMemo  (0) 2020.12.06
React - useEffect  (0) 2020.12.05
React - ๋ฐฐ์—ด ์กฐ์ž‘ํ•˜๊ธฐ  (0) 2020.12.05
  1. ๋ชฉ๋ก
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ useCallback
  4. ๐Ÿ“Œ Conclusion
'React Study' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • React - useReducer
  • React - React.memo
  • React - useMemo
  • React - useEffect
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

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

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

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

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

์ตœ๊ทผ ๊ธ€

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

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

๋‹จ์ถ•ํ‚ค

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

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

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

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

๋ชจ๋“  ์˜์—ญ

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

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