์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ(React Compiler) ๊ณต์‹ ๋ฌธ์„œ ์™„๋ฒฝ ๊ฐ€์ด๋“œ

๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ํ•œ ๋ฒˆ์ฏค useMemo, useCallback๊ณผ ์”จ๋ฆ„ํ•˜๋ฉฐ "์ด๊ฑธ ๊ผญ ์ˆ˜๋™์œผ๋กœ ํ•ด์•ผ ํ•˜๋‚˜?"๋ผ๋Š” ์˜๋ฌธ์„ ๊ฐ€์ ธ๋ณด์…จ์„ ๊ฒ๋‹ˆ๋‹ค. ๋“œ๋””์–ด ๊ทธ ๊ณ ๋ฏผ์„ ํ•ด๊ฒฐํ•ด ์ค„ React Compiler๊ฐ€ ๋“ฑ์žฅํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์ด ๋‚˜์˜ฌ ๋•Œ๋งˆ๋‹ค ๋ฐฉ๋Œ€ํ•œ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์ •๋…ํ•˜๋Š” ๊ฒƒ์€ ๋ถ€๋‹ด์Šค๋Ÿฌ์šด ์ผ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ œ๊ฐ€ ๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๊ผผ๊ผผํ•˜๊ฒŒ ๋ถ„์„ํ•˜๊ณ , ํ•ต์‹ฌ๋งŒ ๋ฝ‘์•„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•์ขŒ๋ฅผ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•์ขŒ์—์„œ๋Š” ์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค: - Why: ๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์™œ ๋“ฑ์žฅํ–ˆ๋Š”์ง€, ๊ธฐ์กด ๋ฐฉ์‹๊ณผ ๋ฌด์—‡์ด ๋‹ค๋ฅธ์ง€ - How: ํ”„๋กœ์ ํŠธ์— ๋ฐ”๋กœ ์ ์šฉํ•˜๋Š” ์„ค์น˜ ๋ฐ ์„ค์ • ๋ฐฉ๋ฒ• - Troubleshooting: ๊ณต์‹ ๋ฌธ์„œ์—์„œ ๊ฐ•์กฐํ•˜๋Š” ์ฃผ์˜์‚ฌํ•ญ๊ณผ ์—๋Ÿฌ ํ•ด๊ฒฐ ํŒ ์ด์ œ ์ˆ˜๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์˜ ๊ณ ํ†ต์—์„œ ๋ฒ—์–ด๋‚˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์—๋งŒ ์ง‘์ค‘ํ•˜์„ธ์š”. ์ด ๊ฐ•์ขŒ๊ฐ€ ์—ฌ๋Ÿฌ๋ถ„์˜ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ํ•œ ๋‹จ๊ณ„ ์—…๊ทธ๋ ˆ์ด๋“œํ•ด ์ค„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

(5.0) ์ˆ˜๊ฐ•ํ‰ 2๊ฐœ

์ˆ˜๊ฐ•์ƒ 157๋ช…

๋‚œ์ด๋„ ์ž…๋ฌธ

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

๋ฆฌ์•กํŠธ
๋ฆฌ์•กํŠธ
react
react
frontend
frontend
ํ”„๋ก ํŠธ์—”๋“œ
ํ”„๋ก ํŠธ์—”๋“œ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
๋ฆฌ์•กํŠธ
๋ฆฌ์•กํŠธ
react
react
frontend
frontend
ํ”„๋ก ํŠธ์—”๋“œ
ํ”„๋ก ํŠธ์—”๋“œ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
Thumbnail
LG์ „์ž
๋ฐฐ๋‹ฌ์˜๋ฏผ์กฑ
CJ
ํ˜„๋Œ€๊ธ€๋กœ๋น„์Šค
๋ฐ์ด๋ธ”

๋ฐ์ด๋ธ”

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

LG์ „์ž
๋ฐฐ๋‹ฌ์˜๋ฏผ์กฑ
CJ
ํ˜„๋Œ€๊ธ€๋กœ๋น„์Šค
๋ฐ์ด๋ธ”

๋ฐ์ด๋ธ”

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • React Compiler ๊ฐ€ ์™œ ํ•„์š”ํ•œ์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • React Compiler ๋ฅผ ์‹ ๊ทœ ํ”„๋กœ์ ํŠธ ๋˜๋Š” ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— ๋„์ž…ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • React Compiler ๋ฅผ ์ ์ง„์ ์œผ๋กœ ๋„์ž…ํ•˜๋Š” ์ „๋žต์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ,
์ˆ˜๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์˜ ๋์€?

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๋นŒ๋“œ ํƒ€์ž„ ์ตœ์ ํ™”๋ฅผ ํ†ตํ•ด ๊ธฐ์กด useMemo, useCallback์˜ ๋ณต์žกํ•จ์„ ํ•ด๊ฒฐํ•˜๊ณ , ์ผ๋ฐ˜ JavaScript ์ฝ”๋“œ๋ฅผ React ๊ทœ์น™์— ๋”ฐ๋ผ ์ตœ์ ํ™”ํ•˜์—ฌ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ๋‹จ์ˆœํ™”ํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ ์ค‘ onClick์—์„œ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ–ˆ๋‹ค๊ฐ€ ์„ฑ๋Šฅ ์ด์Šˆ๋ฅผ ๊ฒช์—ˆ๋˜ ๊ฒฝํ—˜๐Ÿ˜…

๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์˜ ์ž‘์€ ์ƒํƒœ ๋ณ€๊ฒฝ์—๋„ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ๋ฆฌ๋ Œ๋”๋ง๋˜์–ด ๊ณจ์น˜ ์•„ํŒ ๋˜ ์ˆœ๊ฐ„๐Ÿง

React.memo, useMemo, useCallback์„ ์ผ์ผ์ด ์ ์šฉํ•˜๋ฉฐ ์ฝ”๋“œ ๋ณต์žก์„ฑ์ด ์ฆ๊ฐ€ํ–ˆ๋˜ ๊ธฐ์–ต๐Ÿฅต

์ง€๊ธˆ๊นŒ์ง€์˜ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ๊ณ ๋ฏผ์„ ๋๋‚ด๊ณ ,
๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋กœ ๋”์šฑ ๊น”๋”ํ•˜๊ณ  ํšจ์œจ์ ์ธ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค ์ค€๋น„๊ฐ€ ๋˜์…จ๋‚˜์š”?


๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ์ž‘๋™ ์›๋ฆฌ์™€
์ž๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ๊ธฐ๋ฒ•์„ ์ตํžˆ๊ณ 

์ˆ˜๋™ ์ตœ์ ํ™”์˜ ๋ฒˆ๊ฑฐ๋กœ์›€์—์„œ ๋ฒ—์–ด๋‚˜ ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•˜๋Š” ์ „๋ฌธ๊ฐ€๋กœ ๊ฑฐ๋“ญ๋‚˜์„ธ์š”.

์ด ๊ฐ•์˜๊ฐ€ ๋๋‚˜๋ฉด ๋‹น์‹ ์€


React Compiler์˜ ํ•„์š”์„ฑ์„ ๋ช…ํ™•ํžˆ ์ดํ•ดํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

  • useMemo, useCallback๊ณผ ๊ฐ™์€ ์ˆ˜๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์˜ ๋ณต์žก์„ฑ๊ณผ ์ž ์žฌ์  ์˜ค๋ฅ˜๋ฅผ ์ดํ•ดํ•˜๊ณ , React Compiler๊ฐ€ ์™œ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ํ•„์ˆ˜์ ์ธ ๋„๊ตฌ์ธ์ง€ ๋ช…ํ™•ํžˆ ์•Œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ธฐ์กด ์ฝ”๋“œ์™€์˜ ์ฐจ์ด์ ์„ ๋น„๊ตํ•˜๋ฉฐ ์ตœ์‹  React ์„ฑ๋Šฅ ์ตœ์ ํ™”์˜ ํ๋ฆ„์„ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ์— React Compiler๋ฅผ ์ฆ‰์‹œ ๋„์ž…ํ•˜๊ณ  ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ React Compiler๋ฅผ ํ”„๋กœ์ ํŠธ์— ์ง์ ‘ ์„ค์น˜ํ•˜๊ณ  ์„ค์ •ํ•˜๋Š” ๊ตฌ์ฒด์ ์ธ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค. ๋ณต์žกํ•œ ์„ค์ • ์—†์ด๋„ ๋ฐ”๋กœ ๊ฐœ๋ฐœ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์‹ค์งˆ์ ์ธ ๋…ธํ•˜์šฐ๋ฅผ ์Šต๋“ํ•˜์—ฌ, ๊ฐœ๋ฐœ ์ดˆ๊ธฐ ๋‹จ๊ณ„๋ถ€ํ„ฐ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ๊ณ ๋ คํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— React Compiler๋ฅผ ์ ์ง„์ ์œผ๋กœ ํ†ตํ•ฉํ•˜๋Š” ์ „๋žต์„ ๊ฐ–์ถฅ๋‹ˆ๋‹ค.

  • ๋‹จ์ˆœํžˆ ๊ธฐ๋Šฅ์„ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์„ ๋„˜์–ด, ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ๋‚˜ ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ์— React Compiler๋ฅผ ์–ด๋–ป๊ฒŒ ์•ˆ์ „ํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ๋‹จ๊ณ„๋ณ„ ์ „๋žต์„ ์ตํž™๋‹ˆ๋‹ค. ๊ณต์‹ ๋ฌธ์„œ์—์„œ ๊ฐ•์กฐํ•˜๋Š” ์ฃผ์˜์‚ฌํ•ญ๊ณผ ์—๋Ÿฌ ํ•ด๊ฒฐ ํŒ์„ ํ†ตํ•ด ์ž ์žฌ์ ์ธ ๋ฌธ์ œ๋ฅผ ์‚ฌ์ „์— ๋ฐฉ์ง€ํ•˜๊ณ  ์•ˆ์ •์ ์ธ ์ „ํ™˜์„ ์ด๋Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ˆ˜๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์˜ ๋ฒˆ๊ฑฐ๋กœ์›€์—์„œ ๋ฒ—์–ด๋‚˜ ํ•ต์‹ฌ ๋กœ์ง ๊ฐœ๋ฐœ์— ์ง‘์ค‘ํ•˜๋Š” ๊ฐœ๋ฐœ ์Šต๊ด€์„ ํ˜•์„ฑํ•ฉ๋‹ˆ๋‹ค.

  • React Compiler๊ฐ€ ์ œ๊ณตํ•˜๋Š” ์ž๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด React.memo, useMemo, useCallback ์‚ฌ์šฉ ๋นˆ๋„๋ฅผ ํš๊ธฐ์ ์œผ๋กœ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” ๋ฐ˜๋ณต์ ์ธ ์ตœ์ ํ™” ์ž‘์—… ๋Œ€์‹  ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง ๊ตฌํ˜„์— ๋” ๋งŽ์€ ์‹œ๊ฐ„์„ ํ• ์• ํ•˜๋ฉฐ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๋†’์ด๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.


โœ”๏ธ

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ, ๋” ์ด์ƒ ๊ณ ๋ฏผ์€ ๋!

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ ๊ณต์‹ ๋ฌธ์„œ ์™„๋ฒฝ ๊ฐ€์ด๋“œ
ํ•ต์‹ฌ๋งŒ ๋ฝ‘์•„ ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ์„ธ์š”

React ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ๊ฒช๋Š” useMemo, useCallback์˜ ์–ด๋ ค์›€์„ React Compiler๋กœ ํ•ด๊ฒฐํ•ด ๋ณด์„ธ์š”. ๊ณต์‹ ๋ฌธ์„œ์˜ ๋ฐฉ๋Œ€ํ•œ ๋‚ด์šฉ์„ ํ•ต์‹ฌ๋งŒ ๋ฝ‘์•„, ์„ค์น˜๋ถ€ํ„ฐ ์ฃผ์˜์‚ฌํ•ญ๊นŒ์ง€ ํ”„๋กœ์ ํŠธ์— ๋ฐ”๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ „! React Compiler ์ ์šฉํ•˜๊ธฐ

์ด ๊ฐ•์˜์—์„œ๋Š” Babel, Metro ๋“ฑ ๋‹ค์–‘ํ•œ ๋นŒ๋“œ ๋„๊ตฌ ์ง€์›๊ณผ ํ•จ๊ป˜ React Compiler๋ฅผ ์‹ ๊ทœ ๋˜๋Š” ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‹ค์Šตํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ, ์ ์ง„์  ๋„์ž… ์ „๋žต๊ณผ ํ•จ๊ป˜ ์ฃผ์˜ํ•ด์•ผ ํ•  ์‚ฌํ•ญ ๋ฐ ์—๋Ÿฌ ํ•ด๊ฒฐ ํŒ๊นŒ์ง€ ์ƒ์„ธํžˆ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

React Compiler ํ•ต์‹ฌ ๋‚ด์šฉ ์ œ๊ณต

๋ฒ„์ „ 1.0์œผ๋กœ ์ •์‹ ์ถœ์‹œ๋œ React Compiler์˜ ์ž๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ๊ธฐ๋Šฅ๊ณผ ์ปดํฌ๋„ŒํŠธ ์ตœ์ ํ™” ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜๊ณ , ๊ธฐ์กด useMemo, useCallback๊ณผ์˜ ์—ฐ๋™ ๋ฐฉ์•ˆ๊นŒ์ง€ ํ•™์Šต ์ž๋ฃŒ์™€ ํ•จ๊ป˜ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.


๐Ÿ“š

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ ํ•ต์‹ฌ๋งŒ ์™์™,
์‹ค์ „ ์ ์šฉ ๊ฐ€์ด๋“œ

Section 1

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ ์†Œ๊ฐœ ๋ฐ ํ•„์š”์„ฑ

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ๋“ฑ์žฅ ๋ฐฐ๊ฒฝ๊ณผ ๊ธฐ์กด useMemo, useCallback ๋ฐฉ์‹์˜ ๋ฌธ์ œ์ ์„ ๋ถ„์„ํ•ฉ๋‹ˆ๋‹ค. ์ž๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์„ ํ†ตํ•ด ์ฝ”๋“œ ๋‹จ์ˆœํ™” ๋ฐ ์ตœ์ ํ™”๋ฅผ ๋‹ฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

Section 2

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ ์„ค์น˜ ๋ฐ ์ ์šฉ

์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ ๋˜๋Š” ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— ๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ์„ค์น˜ํ•˜๊ณ  ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•ˆ๋‚ดํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ๋นŒ๋“œ ๋„๊ตฌ์™€์˜ ํ˜ธํ™˜์„ฑ๊ณผ ์ ์ง„์  ๋„์ž… ์ „๋žต์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

Section 3

์ปดํŒŒ์ผ๋Ÿฌ ์„ค์ • ์˜ต์…˜ ์ดํ•ด

compilationMode, gating, logger, panicThreshold, target ๋“ฑ ๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ์ฃผ์š” ์„ค์ • ์˜ต์…˜๋“ค์„ ์ƒ์„ธํžˆ ์„ค๋ช…ํ•˜๊ณ , ๊ฐ ์˜ต์…˜์˜ ์—ญํ• ๊ณผ ํ™œ์šฉ ๋ฐฉ์•ˆ์„ ์ œ์‹œํ•ฉ๋‹ˆ๋‹ค.

Section 4

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ์™€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—ฐ๋™

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ•จ๊ป˜ ๋ฐฐํฌํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๊ณ ๋ ค ์‚ฌํ•ญ๊ณผ ์ตœ์ ์˜ ํ†ตํ•ฉ ์ „๋žต์„ ํƒ๊ตฌํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค์˜ ๊ณ ๋ฏผ์„
ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์–ด์š”!

๐Ÿ“Œ

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

useMemo์™€ useCallback์„ ์ˆ˜๋™์œผ๋กœ ๊ด€๋ฆฌํ•˜๋ฉฐ ์„ฑ๋Šฅ ์ตœ์ ํ™”์— ์–ด๋ ค์›€์„ ๊ฒช๊ณ ,
์ฝ”๋“œ ๋ณต์žก์„ฑ ๋•Œ๋ฌธ์— ๋จธ๋ฆฌ๋ฅผ ์‹ธ๋งค๊ณ  ์žˆ๋Š” ๋ถ„

๐Ÿ“Œ

๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ ๋ฆฌ๋”

ํŒ€์›๋“ค์ด ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ์ตœ์ ํ™”์— ์‹œ๊ฐ„์„ ๋„ˆ๋ฌด ๋งŽ์ด ์“ฐ๊ณ ,
์ˆ˜๋™ ๊ด€๋ฆฌ์— ๋”ฐ๋ฅธ ๋ฒ„๊ทธ ๋ฐœ์ƒ์œผ๋กœ ํ”„๋กœ์ ํŠธ ์ผ์ •์ด ์ง€์—ฐ๋˜๋Š” ๊ฒƒ์„ ๊ฒฝํ—˜ํ•œ ๋ถ„

๐Ÿ“Œ

์‹ ๊ธฐ์ˆ  ๋„์ž…์„ ๋ง์„ค์ด๋Š” ๊ฐœ๋ฐœ์ž

React Compiler๊ฐ€ ๋ฌด์—‡์ธ์ง€, ๊ธฐ์กด ๋ฆฌ์•กํŠธ ๋ฐฉ์‹๊ณผ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅด๋ฉฐ,
์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์— ์–ด๋–ป๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ์„์ง€ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋น ๋ฅด๊ฒŒ ํŒŒ์•…ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ


์‹ค์Šต ํ™˜๊ฒฝ

  • ์šด์˜์ฒด์ œ: Windows, macOS, Linux ๋ชจ๋‘ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

  • ๊ฐœ๋ฐœ ๋„๊ตฌ: Node.js ์ตœ์‹  LTS ๋ฒ„์ „, npm ๋˜๋Š” yarn ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

  • PC ์‚ฌ์–‘: ์›ํ™œํ•œ ๋นŒ๋“œ ๋ฐ ๊ฐœ๋ฐœ์„ ์œ„ํ•ด ์ตœ์†Œ 8GB RAM ์ด์ƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • React ๊ธฐ๋ณธ ๊ฐœ๋…์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ, Props, State ๋“ฑ์„ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • JavaScript ES6+ ๋ฌธ๋ฒ•์— ์ต์ˆ™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜, ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น ๋“ฑ์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค.

  • ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— React Compiler๋ฅผ ๋„์ž…ํ•  ๊ฒฝ์šฐ, ํ˜„์žฌ์˜ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ์ „๋žต์„ ๋ฏธ๋ฆฌ ํŒŒ์•…ํ•ด๋‘๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.



์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • React Compiler ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•œ ์‚ฌ๋žŒ

  • React Compiler ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ถœ/ํ‡ด๊ทผ ์‹œ๊ฐ„์— ์•Œ๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  • React Compiler ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋น ๋ฅด๊ฒŒ ๋ชจ๋‘ ๋‚ด์šฉ์„ ์•Œ๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • React ๊ธฐ์ดˆ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”
์ฝ”๋”ฉ๋งฅ์Šค CodingMax์ž…๋‹ˆ๋‹ค.

510

๋ช…

์ˆ˜๊ฐ•์ƒ

45

๊ฐœ

์ˆ˜๊ฐ•ํ‰

17

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š”. ์œ ํŠœ๋ธŒ์—์„œ ์ฆ๊ฑฐ์šด ์ฝ”๋”ฉ ๊ฒฝํ—˜ - ์ฝ”๋”ฉ๋งฅ์Šค(CodingMax) ์ฑ„๋„์„ ์šด์˜ํ•˜๊ณ  ์žˆ๋Š” ์ฝ”๋”ฉ๋งฅ์Šค์ž…๋‹ˆ๋‹ค. yfeelib(์—ฐํ•„๋ฆฝ) ์—์„œ๋Š” ๋‹ค์–‘ํ•œ ๋‚ด์šฉ์„ ์ด์•ผ๊ธฐ๋กœ ํ’€์–ด ๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์‚ถ์„ ์‚ด์•„ ๊ฐ€๋ฉด์„œ ์ƒˆ๋กœ์šด ์ง€์‹์„ ๋ฐฐ์šฐ๊ณ  ๋‚˜๋ˆ„๋Š” ๊ฒƒ์„ ์ข‹์•„ ํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ˜Š

 

๐Ÿ“บ https://www.youtube.com/@coding-max
๐Ÿ“˜ https://yfeelib.com

 

ํ•ญ์ƒ ์œ ์ตํ•˜๊ณ  ์•Œ์ฐฌ ๋‚ด์šฉ์œผ๋กœ ์ฐพ์•„ ๋ต๊ฒŒ์š”!

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

13๊ฐœ โˆ™ (52๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

2๊ฐœ

5.0

2๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • Jang Jaehoon๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    Jang Jaehoon

    ์ˆ˜๊ฐ•ํ‰ 836

    โˆ™

    ํ‰๊ท  ํ‰์  4.9

    5

    31% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์ข‹์€ ๊ฐ•์˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

    • ์น˜ํ˜„๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      ์น˜ํ˜„

      ์ˆ˜๊ฐ•ํ‰ 11

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      31% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ๋น„์Šทํ•œ ๊ฐ•์˜

      ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

      ๋ฌด๋ฃŒ