React: useCallback์€ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์„œ๋ฒ„ ์ธก์—์„œ ๋ Œ๋”๋ง ๋  ๋•Œ undefined๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2018๋…„ 11์›” 15์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react

๊ธฐ๋Šฅ ์„ ์š”์ฒญํ•˜๊ฑฐ๋‚˜ ๋ฒ„๊ทธ๋ฅผ๋ณด๊ณ  ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

๊ณค์ถฉ.

ํ˜„์žฌ ํ–‰๋™์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

React.useCallback ๋Š” ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์„œ๋ฒ„ ์ธก์—์„œ ๋ Œ๋”๋ง ๋  ๋•Œ undefined React.useCallback ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

ํ˜„์žฌ ๋™์ž‘์ด ๋ฒ„๊ทธ ์ธ ๊ฒฝ์šฐ ์žฌํ˜„ ๋‹จ๊ณ„๋ฅผ ์ œ๊ณตํ•˜๊ณ  ๊ฐ€๋Šฅํ•˜๋ฉด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ตœ์†Œํ•œ์˜ ๋ฐ๋ชจ๋ฅผ ์ œ๊ณตํ•˜์‹ญ์‹œ์˜ค. ์•„๋ž˜์— JSFiddle (https://jsfiddle.net/Luktwrdm/) ๋˜๋Š” CodeSandbox (https://codesandbox.io/s/new) ์˜ˆ์ œ์— ๋Œ€ํ•œ ๋งํฌ๋ฅผ ๋ถ™์—ฌ ๋„ฃ์œผ์‹ญ์‹œ์˜ค.

์ด ๋ฒ„๊ทธ๋Š” useCallback ์‚ฌ์šฉํ•˜์—ฌ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์žฌํ˜„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ˜ํ™˜ ๊ฐ’์„ ์„œ๋ฒ„์— ๊ธฐ๋กํ•˜๋ฉด undefined ๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•จ์ˆ˜๊ฐ€ ์ œ๋Œ€๋กœ ๋ฐ˜ํ™˜๋ฉ๋‹ˆ๋‹ค.

๋‹น์‹ ์ด CodeSandbox์—์„œ์ด ๋ฒ„๊ทธ๋ฅผ ๊ด€์ฐฐ ํ•  ์ˆ˜์žˆ๋‹ค : https://codesandbox.io/s/r557kww6wn ์˜ ๋ฐ˜ํ™˜ ๊ฐ’ ๊ฒƒ์„ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด ์ œ๋Œ€๋กœ ์ฝ˜์†”์—์„œ ์ฐพ๊ณ  ๋ฌธ์ž์—ด์˜ ๋ฒ„๊ทธ๊ฐ€ ๋ Œ๋”๋ง๋˜๋Š”, ๋‹น์‹ ์€ ๋ณผ ์ˆ˜ useCallback ์žˆ๋‹ค undefined

๋‹ค์Œ์€ ๋˜‘๊ฐ™์€ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด์ง€๋งŒ ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ Œ๋”๋ง๋˜์—ˆ์Šต๋‹ˆ๋‹ค. https://codesandbox.io/s/xvwv797pxz ํ•จ์ˆ˜๊ฐ€ ์ฝ˜์†”์— ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ธฐ๋ก๋ฉ๋‹ˆ๋‹ค.

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

React.useCallback ๋Š” undefined ์•„๋‹ˆ๋ผ ๋ฉ”๋ชจ ๋œ ์ฝœ๋ฐฑ์„ ๋ฐ˜ํ™˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ๋ฒ„์ „์˜ React์™€ ์–ด๋–ค ๋ธŒ๋ผ์šฐ์ € / OS๊ฐ€์ด ๋ฌธ์ œ์˜ ์˜ํ–ฅ์„ ๋ฐ›์Šต๋‹ˆ๊นŒ?

  • ๋ฐ˜์‘ : 16.7.0-alpha.2
  • react-dom : 16.7.0-alpha.2
Hooks Bug

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” ์ด๊ฒƒ์ด ๋ฒ„๊ทธ๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ฝ”๋“œ ์ฃผ์„์ด ์ž˜๋ชป๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ์ดํ•ด๋Š” ๋ Œ๋”๋ง ๋‹จ๊ณ„ ์ฝœ๋ฐฑ์— useCallback์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์˜ณ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ชจ๋“  4 ๋Œ“๊ธ€

์ด๊ฒƒ์€ ์˜๋„์  ์ธ ํ–‰๋™์ž…๋‹ˆ๋‹ค.

์ฝœ๋ฐฑ์€ ์„œ๋ฒ„ ํ™˜๊ฒฝ์—์„œ ์‹คํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด์œ ๋Š” ์ฝœ๋ฐฑ์ด SSR ์ค‘์— ์˜๋ฏธ๊ฐ€์—†๋Š” onClick ์™€ ๊ฐ™์€ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— React๊ฐ€ ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•  ๋ฆฌ์†Œ์Šค๋ฅผ ํ™•๋ณด ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ถˆํ•„์š”ํ•˜๊ฒŒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ํ›„ํฌ๋ฅผ ์ถ”์ ํ•ฉ๋‹ˆ๋‹ค.

์ˆ˜๋ถ„์„ ๋ณด์ถฉ ํ•  ๋•Œ ์ฝœ๋ฐฑ์ด์žˆ์„ ๊ฒƒ์ด๋ฏ€๋กœ ๊ฑฑ์ •ํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค.

ํ•˜์ง€๋งŒ ์ •ํ™•ํžˆ ๋ฌด์—‡์„ ํ•˜๋ ค๋Š”์ง€ ๋ฌผ์–ด๋ด๋„ ๋ ๊นŒ์š”?

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @arianon ๐Ÿ‘Œ ๋‚˜๋Š” useCallback ๋ฅผ ์‚ฌ์šฉํ•˜๋ผ๋Š” redux-react-hook ์˜ ์ œ์•ˆ์„ ๋”ฐ๋ฅด๊ณ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค . ๊ฐœ๋…์ ์œผ๋กœ ๋‚ด๊ฐ€ ๋ฉ”๋ชจํ•˜๋Š” ํ•จ์ˆ˜๋Š” ์‹ค์ œ๋กœ ์ฝœ๋ฐฑ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์šฉ์–ด๊ฐ€ ๋‹ค์–‘ํ•œ ๋งฅ๋ฝ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฒ˜์Œ์—๋Š” ๊ทธ๊ฒƒ์—์ฃผ์˜๋ฅผ ๊ธฐ์šธ์ด์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ฌธ์„œ์—๋Š” ๋‹ค์Œ ๋‚ด์šฉ์ด ์–ธ๊ธ‰๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

useCallback(fn, inputs) ๋Š” useMemo(() => fn, inputs) .

์—…๋ฐ์ดํŠธ๋ฅผ ์ œ์•ˆํ•˜๊ธฐ ์œ„ํ•ด ๋ฌธ์„œ ์ €์žฅ์†Œ์— ๋ฌธ์ œ๋ฅผ ์—ด๊ฒ ์Šต๋‹ˆ๋‹ค ๐Ÿ˜‰ ๋‹ค์‹œ ํ•œ ๋ฒˆ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

๋‚˜๋Š” ์ด๊ฒƒ์ด ๋ฒ„๊ทธ๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ฝ”๋“œ ์ฃผ์„์ด ์ž˜๋ชป๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ์ดํ•ด๋Š” ๋ Œ๋”๋ง ๋‹จ๊ณ„ ์ฝœ๋ฐฑ์— useCallback์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์˜ณ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

AFAICT๋Š” ์„œ๋ฒ„ ์ธก์—์„œ ์‹คํ–‰ํ•ด์„œ๋Š” ์•ˆ๋˜๋Š” ์œ ์ผํ•œ ๊ฒƒ์€ Effects ๋ฐ ref ์†์„ฑ ์ดˆ๊ธฐํ™”์ž…๋‹ˆ๋‹ค. ์ž‘๋™ํ•˜๋Š” useCallback์€ ์˜ˆ๋ฅผ ๋“ค์–ด ๋ Œ๋” ์†Œํ’ˆ HOC ํŒจํ„ด์— ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰