๋ฐ˜์‘ํ˜•

๊ฐœ๋ฐœ์ž๊ณต๋ถ€ 2

[๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive] 10์žฅ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด

* 07์žฅ ์—ฐ์‚ฐ์ž, 08์žฅ ์กฐ๊ฑด๋ฌธ, 09์žฅ ์ผ๋ถ€ ๋ถ€๋ถ„์€ ํŒจ์Šคํ•ฉ๋‹ˆ๋‹ค. * 9.1 ํƒ€์ž… ๋ณ€ํ™˜์ด๋ž€? ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜๋„์ ์œผ๋กœ ๊ฐ’์˜ ํƒ€์ž…์„ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ์„ ๋ช…์‹œ์  ํƒ€์ž… ๋ณ€ํ™˜ ๋˜๋Š” ํƒ€์ž… ์บ์ŠคํŒ…์ด๋ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž์™€ ์˜๋„์™€ ์ƒ๊ด€์—†์ด JS์—”์ง„์— ์˜ํ•ด ์•”๋ฌต์ ์œผ๋กœ ํƒ€์ž…์ด ๋ณ€ํ™˜๋˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ์•”๋ฌต์  ํƒ€์ž… ๋ณ€ํ™” ๋˜๋Š” ํƒ€์ž… ๊ฐ•์ œ ๋ณ€ํ™˜์ด๋ผ ํ•ฉ๋‹ˆ๋‹ค. 9.2 ์•”๋ฌต์  ํƒ€์ž… ๋ณ€ํ™˜ JS์—”์ง„์€ ํ‘œํ˜„์‹์„ ํ‰๊ฐ€ํ•  ๋•Œ ์ฝ”๋“œ์˜ ๋ฌธ๋งฅ์„ ๊ณ ๋ คํ•ด ์•”๋ฌต์ ์œผ๋กœ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ๊ฐ•์ œ ๋ณ€ํ™˜ ํ•  ๋•Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. '10' + 2 // '102' 7 * '10' // 70 9.4 ๋‹จ์ถ• ํ‰๊ฐ€ 9.4.4 ์˜ต์…”๋„ ์ฒด์ด๋‹ ์—ฐ์‚ฐ์ž ES11์— ๋„์ž…๋œ ์˜ต์…”๋„ ์ฒด์ด๋‹ ์—ฐ์‚ฐ์ž ?. ๋Š” ์ขŒํ•ญ์˜ ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ null ๋˜๋Š” undefined์ธ ๊ฒฝ์šฐ undefined๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ์•„๋‹ˆ๋ผ๋ฉด ..

[React] return ์‹œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•˜๋‚˜๋กœ ๊ฐ์‹ธ๋Š” ์ด์œ  (+JSX ๋ฌธ๋ฒ•)

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ์‹œ๊ฐ„์—๋Š” React ์—์„œ return ์‹œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•˜๋‚˜๋กœ ๊ฐ์‹ธ๋Š” ์ด์œ ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. Why? React์—์„œ JSX๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด HTML๊ณผ ์œ ์‚ฌํ•œ ๊ตฌ๋ฌธ์œผ๋กœ JavaScript๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. JSX๋Š” JavaScript ํ‘œํ˜„์‹์ด๋ฏ€๋กœ, ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ˜ํ™˜ ๊ฐ’์œผ๋กœ ์—ฌ๋Ÿฌ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ์ด๋Ÿฌํ•œ ์š”์†Œ๋“ค์„ ํ•˜๋‚˜์˜ ๋ฃจํŠธ ์š”์†Œ๋กœ ๋ฌถ์–ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. React์˜ ๊ฐ€์ƒ DOM(virtual DOM)์ด ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‹จ์ผ ๋ฃจํŠธ ๋…ธ๋“œ๋งŒ์„ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—ฌ๋Ÿฌ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด React๋Š” ์š”์†Œ๋“ค์„ ๋‹จ์ผ ๋ฃจํŠธ ๋…ธ๋“œ๋กœ ๊ผญ ๋ฌถ์–ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค. Method React์—์„œ ์ด๋Ÿฌํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•œ ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์€, ์—ฌ๋Ÿฌ ์š”์†Œ๋“ค์„ ๋˜๋Š” ์™€ ๊ฐ™์€ ๋…ธ๋“œ๋กœ ๋ฌถ์–ด์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค...

Framework/React 2023.05.09
๋ฐ˜์‘ํ˜•