728x90
๋ฐ˜์‘ํ˜•

๋ฉ”๋ชจ์ด์ œ์ด์…˜ 1

React] Hook : useCallback & useMemo ์–ธ์ œ ์‚ฌ์šฉํ•ด์•ผ ๋ ๊นŒ?

useCallback & useMemo ์–ธ์ œ ์‚ฌ์šฉํ•ด์•ผ ๋ ๊นŒ? ๋‘ ๊ฐœ์˜ hook์— ๋Œ€ํ•ด์„œ ๋‹ค์‹œ ํ•œ๋ฒˆ ๋‹ค๋ค„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋‘ hook์€ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ๋˜๋‹ˆ๊น ํ•จ์ˆ˜๋‚˜ ๊ฒฐ๊ณผ๊ฐ’์ด ์žˆ๋Š” ๊ฑฐ์— ์ „๋ถ€ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์ง€ ์•Š์„๊นŒ??๋ผ๋Š” ์ƒ๊ฐ์„ ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ์ƒ๊ฐ์— ์„ฑ๋Šฅ ์ข‹์•„์ง€๊ฒ ์ง€ ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋‹ค ๋ณด๋ฉด ๋˜๋ ค ์„ฑ๋Šฅ์ €ํ•˜๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์™œ๋ƒ๋ฉด ๊ฒฐ๊ตญ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ํ•˜๋Š”๋ฐ์—๋„ ๊ทธ๋งŒํ•œ ๋น„์šฉ์ด ๋“ค๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— ์–ธ์ œ ์“ฐ๊ณ , ์–ธ์ œ ์“ฐ๋ฉด์•ˆ์ข‹์€์ง€์— ๋Œ€ํ•ด ์ž‘์„ฑํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. โŒ์‚ฌ์šฉํ•˜์ง€ ๋ง์•„์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ๋ณต์žกํ•˜์ง€ ์•Š์€ ์—ฐ์‚ฐ์— ์‚ฌ์šฉํ•˜๋Š”๊ฒƒ์€ ์˜คํžˆ๋ ค ๋ฉ”๋ชจ๋ฆฌ ๋‚ญ๋น„์ž…๋‹ˆ๋‹ค. onClick์ด๋ฒคํŠธ๋กœ setStateํ•ด์ฃผ๋Š” ๊ฒฝ์šฐ ๊ฐ™์ด ๋‹จ์ˆœํ•œ ์ƒํ™ฉ์ด๋ผ๋ฉด, ๋ฆฌ๋ Œ๋”๋ง ๋œ๋‹ค๊ณ  ํ•˜๋”๋ผ๊ณ  ๋‹ค์‹œ ๊ทธ๋ ค์ฃผ๋Š” ํŽธํžˆ ํ›จ์”ฌ ๋‚ซ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. React์—์„œ๋„ ..

Front-End/React 2023.06.29
728x90
๋ฐ˜์‘ํ˜•