[React] Hello world! feat. ๐Ÿง๋ฆฌ์•กํŠธ๋ฅผ ์™œ์จ์•ผํ• ๊นŒ?

์„œ๋ก ๐Ÿง

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

๐Ÿ’๐ŸปWhat is React?

React๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

๋ฆฌ์•กํŠธ๋Š” ํŽ˜์ด์Šค๋ถ์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” ํ”„๋ก ํŠธ์•ค๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
์–ด๋– ํ•œ ์œ ์ €์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋™์ ์œผ๋กœ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋งŽ์€ DOM์š”์†Œ๋“ค์„ ๊ด€๋ฆฌํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ์ •๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ์ข€ ๋” ์ตœ์†Œํ™”ํ•˜๊ณ  ๊ธฐ๋Šฅ๊ฐœ๋ฐœ์—๋งŒ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๋„๋กํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋งŽ์€ ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ๋งŒ๋“ค์–ด์กŒ๊ณ  ํ”„๋ ˆ์ž„์›Œํฌ์˜ 3๋Œ€์žฅ React, Angular, Vue๊ฐ€ ์ƒ๊ฒจ๋‚œ ๊ฒƒ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’๐ŸปWhy React?

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

์ €๋Š” ์œ„์˜ 3๊ฐ€์ง€ ์ด์œ ๋กœ ๋ฆฌ์•กํŠธ๋ฅผ ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹จ ์ƒ๊ฐ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค.
์ด์™ธ์— ๋ฆฌ์•กํŠธ์˜ ์žฅ์ ๋„ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ์˜ 2๊ฐ€์ง€ ํŠน์ง•

  1. Vertual Dom(๊ฐ€์ƒ๋”)
    ๋ฆฌ์•กํŠธ๋Š” ๊ฐ€์ƒ๋”์„ ์‚ฌ์šฉํ•ด์„œ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ฑ๋Šฅ์„ ๊ทน๋Œ€ํ™” ์‹œ์ผฏ์Šต๋‹ˆ๋‹ค.
    ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚˜๋ฉด ์‹ค์ œ DOM์— ์ƒˆ๋กœ์šด๊ฑธ ๋„ฃ๋Š”๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๊ฐ€์ƒ์˜ DOM์— ํ•œ๋ฒˆ ๋ Œ๋”๋ง์„ ํ•˜๊ณ ,๊ธฐ์กด์˜ DOM๊ณผ ๋น„๊ตํ•ด์„œ ๋ณ€ํ™”๊ฐ€ ํ•„์š”ํ•œ ๊ณณ์—๋งŒ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•ด์ค๋‹ˆ๋‹ค.

    ์ฆ‰, ๋ณ€ํ™”๋ฅผ ์ตœ์†Œํ™” ์‹œํ‚ค๊ณ  ์ด๋กœ์ธํ•ด ์„ฑ๋Šฅ์ด ์ข‹์•„์ง€๋Š”๊ฒƒ์ž…๋‹ˆ๋‹ค.

  2. Component(์ปดํฌ๋„ŒํŠธ)
    ์ปดํฌ๋„ŒํŠธ๋ž€ UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฐœ๋ณ„์ ์ธ ๋ถ€๋ถ„์œผ๋กœ UI๋ฅผ ์˜ท์ด๋ผ๊ณ ํ•œ๋‹ค๋ฉด ์ปดํฌ๋„ŒํŠธ๋Š” ์›๋‹จ์ธ๊ฑฐ์ฃ  ์›๋‹จ๋“ค์„ ์žฌ๋‹จํ•ด ์˜ท์„ ๋งŒ๋“œ๋Š”๊ฒƒ์ž…๋‹ˆ๋‹ค. ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ด์„œ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฌ์›Œ์ง‘๋‹ˆ๋‹ค.

๐Ÿ’๐ŸปHow to use react?

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
  <script>
    const root = document.getElementById("root");
    const h3 = React.createElement(
      "h3",
      {
        id: "title",
        onMouseenter: () => console.log("mouse enter"),
      },
      "Hello I'm a title"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("click"),
      },
      "Click me"
    );

    const conatainer = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(conatainer, root);
  </script>
</html>
  1. ๊ฐ€์žฅ ๋จผ์ € React JS(์ด๋ฒคํŠธ๋ฆฌ์Šค๋„ˆ ๊ฐ™์€ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒํ•œ๊ฑธ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์คŒ) ์™€ ReactDOM(๋ฆฌ์—‘ํŠธ ์š”์†Œ๋“ค์„ ๊ฐ€์ ธ๋‹ค๊ฐ€ html๋กœ ๋ฐ”๊พธ๋Š” ์šฉ๋„)์ฝ”๋“œ๋ฅผ importํ–ˆ์Šต๋‹ˆ๋‹ค.
  2. root๋ผ๋Š” ๋น„์–ด์žˆ๋Š” div๋ฅผ ์ƒ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ReactDOM์ด React element๋“ค์„ ๊ฐ€์ ธ๋‹ค ๋†“์„ ๊ณณ์ž…๋‹ˆ๋‹ค.
  3. ๊ทธ ๋‹ค์Œ ReactDOM.render๋ฅผ ํ†ตํ•ด React element๋“ค์„ root div์•ˆ์—์„œ ๋ณด์—ฌ์ฃผ๊ฒŒํ–ˆ์Šต๋‹ˆ๋‹ค.

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

๋‹ค์Œ์‹œ๊ฐ„์—๋Š” JSX๋ฅผ ์†Œ๊ฐœํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ