react usememo 1

[React] ์„ฑ๋Šฅ ์ตœ์ ํ™”ํ•˜๋Š” ํ›… useMemo

๋ฆฌ์•กํŠธ๋ฅผ ์“ฐ๋‹ค ๋ณด๋ฉด ๋ฆฌ๋ Œ๋”๋ง ๋  ๋•Œ๋งˆ๋‹ค ํ•จ์ˆ˜๋‚˜ ๊ณ„์‚ฐ์ด ๋‹ค์‹œ ์‹คํ–‰๋˜๋Š” ํ˜„์ƒ ๋•Œ๋ฌธ์— ์„ฑ๋Šฅ ์ด์Šˆ๊ฐ€ ์ƒ๊ธฐ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ .filter() ๋‚˜ .map(), .sort()์ฒ˜๋Ÿผ ๋ฐ˜๋ณต ๊ณ„์‚ฐ์ด ๋งŽ์€ ์—ฐ์‚ฐ์€ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ๋ฐ˜๋ณต๋˜๋ฉด ๋ฆฌ์•กํŠธ์˜ ํผํฌ๋จผ์Šค๋ฅผ ๊ฐ‰์•„๋จน์Šต๋‹ˆ๋‹ค.๊ทธ๋ž˜์„œ ๋“ฑ์žฅํ•˜๋Š” ๊ฒŒ ๋ฐ”๋กœ โญuseMemo ์ž…๋‹ˆ๋‹ค.์‹ค๋ฌด์—์„œ ์ž์ฃผ ์“ฐ์ด๋Š” useMemo์˜ ๊ฐœ๋…๊ณผ ์˜ˆ์ œ์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ์“ฐ์ด๋Š”์ง€ ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.๐Ÿ“‚ ๋ชฉ์ฐจ useMemo๋ž€?const memoizedValue = useMemo(() => { return ๊ณ„์‚ฐ์‹;}, [์˜์กด์„ฑ])๐Ÿ’ก ํ•œ๋งˆ๋””๋กœ ๋งํ•˜๋ฉด?"์˜์กด์„ฑ ๊ฐ’์ด ๋ฐ”๋€”๋•Œ๋งŒ ๋‹ค์‹œ ๊ณ„์‚ฐ๋˜๋Š” ๊ฐ’" ์„ ๋งŒ๋“ค์–ด์„œ, ๋ถˆํ•„์š”ํ•œ ๊ณ„์‚ฐ์„ ๋ง‰์•„์ฃผ๋Š” ํ›… ๐Ÿ” ์™œ์จ์•ผํ• ๊นŒ?๋ฆฌ์•กํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋  ๋•Œ๋งˆ๋‹ค ๋‚ด๋ถ€ ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•˜๋Š”๋ฐ,..

React 2025.04.09