We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.

Hello World

๊ฐ€์žฅ ๋‹จ์ˆœํ•œ React ์˜ˆ์‹œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

์œ„ ์ฝ”๋“œ๋Š” ํŽ˜์ด์ง€์— โ€œHello, world!โ€๋ผ๋Š” ์ œ๋ชฉ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

CodePen์—์„œ ์‹คํ–‰ํ•˜๊ธฐ

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

์ด ์•ˆ๋‚ด์„œ๋ฅผ ์ฝ๋Š” ๋ฐฉ๋ฒ•

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

ํŒ

์ด ์•ˆ๋‚ด์„œ๋Š” ๊ฐœ๋…๋“ค์„ ๋‹จ๊ณ„์ ์œผ๋กœ ๋ฐฐ์šฐ๊ธธ ์›ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค. ์‹ค์Šต์„ ํ†ตํ•ด ๋ฐฐ์šฐ๊ธธ ์›ํ•œ๋‹ค๋ฉด, ์‹ค์ „ ํŠœํ† ๋ฆฌ์–ผ์„ ํ™•์ธํ•˜์„ธ์š”. ์ด ์•ˆ๋‚ด์„œ์™€ ์‹ค์ „ ํŠœํ† ๋ฆฌ์–ผ์€ ์ƒํ˜ธ๋ณด์™„์ ์ธ ๋‚ด์šฉ์„ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๋Š” React ์ฃผ์š” ๊ฐœ๋…์— ๋Œ€ํ•œ ๋‹จ๊ณ„๋ณ„ ์•ˆ๋‚ด์„œ์˜ ์ฒซ ๋ฒˆ์งธ ์žฅ์ž…๋‹ˆ๋‹ค. ๋‚ด๋น„๊ฒŒ์ด์…˜ ์‚ฌ์ด๋“œ๋ฐ”์—์„œ ๋ชจ๋“  ์žฅ์˜ ๋ชฉ๋ก์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ์—์„œ ์ฝ๊ณ  ์žˆ๋‹ค๋ฉด, ํ™”๋ฉด ์˜ค๋ฅธ์ชฝ ํ•˜๋‹จ ๋์— ์žˆ๋Š” ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜์—ฌ ๋‚ด๋น„๊ฒŒ์ด์…˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ์•ˆ๋‚ด์„œ์˜ ๋ชจ๋“  ์žฅ๋“ค์€ ์ด์ „ ์žฅ์˜ ๋‚ด์šฉ์„ ํ† ๋Œ€๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์ด๋“œ๋ฐ”์— ๋ณด์ด๋Š” ์ˆœ์„œ๋Œ€๋กœ โ€œ์ฃผ์š” ๊ฐœ๋…โ€ ์•ˆ๋‚ด์„œ์˜ ์žฅ๋“ค์„ ์ฝ์œผ๋ฉด React์˜ ๊ฑฐ์˜ ๋ชจ๋“  ๋‚ด์šฉ์„ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. โ€œJSX ์†Œ๊ฐœโ€๊ฐ€ ๋ฐ”๋กœ ์ด ๋‹ค์Œ ์žฅ์ž…๋‹ˆ๋‹ค.

์ง€์‹์ˆ˜์ค€ ๊ฐ€์ •

React๋Š” JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋ฉฐ, ๋”ฐ๋ผ์„œ JavaScript ์–ธ์–ด์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์•„์ง ์ž์‹ ์ด ์—†๋‹ค๋ฉด, JavaScript ํŠœํ† ๋ฆฌ์–ผ ์‚ดํŽด๋ณด๊ธฐ๋ฅผ ํ†ตํ•ด ์ž์‹ ์˜ ์ง€์‹์ˆ˜์ค€์„ ํ™•์ธํ•ด๋ณด๊ธธ ๊ถŒ์žฅ๋“œ๋ฆฌ๋ฉฐ ์ด๋ฅผ ํ†ตํ•ด ๊ธธ์„ ์žƒ์ง€ ์•Š๊ณ  ์ด ์•ˆ๋‚ด์„œ๋ฅผ ์ž˜ ๋”ฐ๋ผ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. 30๋ถ„์—์„œ 1์‹œ๊ฐ„ ๊ฐ€๋Ÿ‰ ์†Œ์š”๋˜์ง€๋งŒ, ๊ฒฐ๊ณผ์ ์œผ๋กœ ๋” ์ด์ƒ React์™€ JavaScript๋ฅผ ๋™์‹œ์— ๋ฐฐ์šด๋‹ค๋Š” ๋Š๋‚Œ์„ ๋ฐ›์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์˜

์ด ๊ฐ€์ด๋“œ์—์„œ๋Š” ๊ฐ€๋” ์ตœ์‹  JavaScript ๋ฌธ๋ฒ•์„ ์˜ˆ์‹œ์— ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ง€๋‚œ ๋ช‡ ๋…„๊ฐ„ JavaScript๋กœ ์ž‘์—…ํ•˜์ง€ ์•Š์•˜๋‹ค๋ฉด, ์ด 3๊ฐ€์ง€ ์‚ฌํ•ญ์„ ํ†ตํ•ด ๋Œ€๋ถ€๋ถ„์˜ ๊ฒƒ์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‹œ์ž‘ํ•ด๋ด…์‹œ๋‹ค!

์•„๋ž˜๋กœ ๊ณ„์† ์Šคํฌ๋กคํ•˜๋ฉด, ํ‘ธํ„ฐ ๋ฐ”๋กœ ์•ž์—์„œ ๋‹ค์Œ ์žฅ์œผ๋กœ ์—ฐ๊ฒฐ๋œ ๋งํฌ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Is this page useful?Edit this page