Babel

    [ReactJS] JSX์™€ ์ปดํฌ๋„ŒํŠธ (Component)

    JSX JSX๋Š” JavaScript์˜ ๋ฌธ๋ฒ•์„ ํ™•์žฅํ•œ React๋งŒ์˜ ๋ฌธ๋ฒ•์œผ๋กœ, JavaScript ๋‚ด์—์„œ HTML ๋งˆํฌ์—…์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ ๊ฒƒ์ด๋‹ค. ๋งˆํฌ์—…๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋กœ์ง์ด ์„œ๋กœ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๋‹ค๊ณ  ํŒ๋‹จํ•˜์—ฌ ์ด๋ฅผ ํ•œ ๋ฒˆ์— ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ๊ณ ๋ฏผํ•œ ๊ฒฐ๊ณผ ์ƒ๊ฒจ๋‚œ ๋ฌธ๋ฒ•์ด๋‹ค. JavaScript ๋‚ด์—์„œ ๋งˆํฌ์—…์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ณ , JS ๋กœ์ง๋„ ํ•จ๊ป˜ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. JavaScript ์ •์‹ ๋ฌธ๋ฒ•์€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ด๋ฅผ ํ•ด์„ํ•  ์ˆ˜ ์—†๋‹ค. ๋”ฐ๋ผ์„œ Babel ๋ณ€์—ญ๊ธฐ๋กœ ์ด๋ฅผ React.createElement() ํ•จ์ˆ˜๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •์ด ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•˜๋‹ค. JSX์˜ ํŠน์ง• JSX๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ’์ด๋‹ค. ํŠน์ •ํ•œ ๋ณ€์ˆ˜์— ์ด ๊ฐ’์„ ๋‹ด์„ ์ˆ˜ ์žˆ๊ณ , ํ•จ์ˆ˜์˜ ์ธ์ž๋กœ ์ „๋‹ฌํ•˜๊ฑฐ๋‚˜ ํ•จ์ˆ˜์˜ ๋ฆฌํ„ด๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. f..