๋ฐ˜์‘ํ˜•

๋ฆฌ์•กํŠธ jsx ๋ฌธ๋ฒ• 1
[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
1
๋”๋ณด๊ธฐ
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”