๊ธฐ๋ฅ ์ ์์ฒญํ๊ฑฐ๋ ๋ฒ๊ทธ๋ฅผ๋ณด๊ณ ํ์๊ฒ ์ต๋๊น?
๊ณค์ถฉ.
ํ์ฌ ํ๋์ ๋ฌด์์ ๋๊น?
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๊ฐ์ด ๋ฌธ์ ์ ์ํฅ์ ๋ฐ์ต๋๊น?
์ด๊ฒ์ ์๋์ ์ธ ํ๋์ ๋๋ค.
์ฝ๋ฐฑ์ ์๋ฒ ํ๊ฒฝ์์ ์คํ๋์ง ์์ต๋๋ค.
์ด์ ๋ ์ฝ๋ฐฑ์ด SSR ์ค์ ์๋ฏธ๊ฐ์๋ onClick
์ ๊ฐ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ํจ๊ป ์ฌ์ฉํ๊ธฐ์ํ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ React๊ฐ ์ค์ ๋ก ์ฌ์ฉํ ๋ฆฌ์์ค๋ฅผ ํ๋ณด ํ ํ์๊ฐ ์๋ค๋ ๊ฒ์
๋๋ค. ๋ถํ์ํ๊ฒ ์ฌ์ฉ๋์ง ์๋ ํํฌ๋ฅผ ์ถ์ ํฉ๋๋ค.
์๋ถ์ ๋ณด์ถฉ ํ ๋ ์ฝ๋ฐฑ์ด์์ ๊ฒ์ด๋ฏ๋ก ๊ฑฑ์ ํ์ง ๋ง์ญ์์ค.
ํ์ง๋ง ์ ํํ ๋ฌด์์ ํ๋ ค๋์ง ๋ฌผ์ด๋ด๋ ๋ ๊น์?
๊ฐ์ฌํฉ๋๋ค @arianon ๐ ๋๋ useCallback
๋ฅผ ์ฌ์ฉํ๋ผ๋ redux-react-hook ์ ์ ์์ ๋ฐ๋ฅด๊ณ ์์์ต๋๋ค . ๊ฐ๋
์ ์ผ๋ก ๋ด๊ฐ ๋ฉ๋ชจํ๋ ํจ์๋ ์ค์ ๋ก ์ฝ๋ฐฑ์ด ์๋๋๋ค. ์ฉ์ด๊ฐ ๋ค์ํ ๋งฅ๋ฝ์์ ์ฌ์ฉ๋๋ ๊ฒฝํฅ์ด ์๊ธฐ ๋๋ฌธ์ ์ฒ์์๋ ๊ทธ๊ฒ์์ฃผ์๋ฅผ ๊ธฐ์ธ์ด์ง ์์์ต๋๋ค. ๋ํ ๋ฌธ์์๋ ๋ค์ ๋ด์ฉ์ด ์ธ๊ธ๋์ด ์์ต๋๋ค.
useCallback(fn, inputs)
๋useMemo(() => fn, inputs)
.
์ ๋ฐ์ดํธ๋ฅผ ์ ์ํ๊ธฐ ์ํด ๋ฌธ์ ์ ์ฅ์์ ๋ฌธ์ ๋ฅผ ์ด๊ฒ ์ต๋๋ค ๐ ๋ค์ ํ ๋ฒ ๊ฐ์ฌํฉ๋๋ค!
๋๋ ์ด๊ฒ์ด ๋ฒ๊ทธ๋ผ๊ณ ๋ฏฟ์ต๋๋ค. ๊ทธ ์ฝ๋ ์ฃผ์์ด ์๋ชป๋์์ต๋๋ค. ๋ด ์ดํด๋ ๋ ๋๋ง ๋จ๊ณ ์ฝ๋ฐฑ์ useCallback์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ณ๋ค๋ ๊ฒ์ ๋๋ค.
AFAICT๋ ์๋ฒ ์ธก์์ ์คํํด์๋ ์๋๋ ์ ์ผํ ๊ฒ์ Effects ๋ฐ ref ์์ฑ ์ด๊ธฐํ์ ๋๋ค. ์๋ํ๋ useCallback์ ์๋ฅผ ๋ค์ด ๋ ๋ ์ํ HOC ํจํด์ ์ค์ํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๋ ์ด๊ฒ์ด ๋ฒ๊ทธ๋ผ๊ณ ๋ฏฟ์ต๋๋ค. ๊ทธ ์ฝ๋ ์ฃผ์์ด ์๋ชป๋์์ต๋๋ค. ๋ด ์ดํด๋ ๋ ๋๋ง ๋จ๊ณ ์ฝ๋ฐฑ์ useCallback์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ณ๋ค๋ ๊ฒ์ ๋๋ค.