React는 jQuery와 같은 프론트엔드 개발을 위한 '라이브러리' 입니다. 따라서 우리는 필요한 만큼만 가져다 사용할 수 있습니다! 해당 부분에서는 '한번 해보기' 정도로 살펴가면 좋습니다. 자세한 내용은 뒤에서 다뤄보겠습니다.

1. Ctrl + C, Ctrl + V!

• CDN과 바벨을 통해 쉽게 만들 수 있어요.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>리액트 1분만에 추가해보기!</title>
  </head>
  <body>
    <h1>내 html에 리액트 1분만에 추가해보기!</h1>
    <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p>
    <div id="root"></div>

		<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
   
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        // react 컴포넌트 정의하기
        const el = React.createElement;

        class HelloButton extends React.Component {
          constructor(props) {
              super(props);

              this.state = { liked: false };
          }

          render() {
              if (this.state.liked) {
                  return 'Hello World!';
              }

              return (
                <button onClick={() => this.setState({ liked: true })}>
                    Hello
                </button>
            );
          }
        }

        // DOM에 리액트 컴포넌트 랜더링하기
				const domContainer = document.querySelector('#root');
				const root = ReactDOM.createRoot(domContainer);
				root.render(el(HelloButton));
    </script>
  </body>
</html>

• 버튼 컴포넌트가 필요하세요? 아래처럼 필요한만큼 사용하시면 됩니다! 형태도 이해하기 좋도록 class에서 function 형태로 변경했어요.

<aside> 💡 우리 수업에서는 앞으로 지금 현업의 트렌드인 함수형 컴포넌트를 사용할 예정입니다.

</aside>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>리액트 1분만에 추가해보기!</title>
  </head>
  <body>
    <h1>내 html에 리액트 1분만에 추가해보기!</h1>
    <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p>
    <div id="root"></div>
	  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        function HelloButton(props) {
            return (
                <button onClick={()=>console.log('실행')}>
                    Hello
                </button>
            );
        }

        const app = (
            <div>
                <HelloButton/>
                <HelloButton/>
                <HelloButton/>
                <HelloButton/>
                <HelloButton/>
            </div>
        );

        // DOM에 리액트 컴포넌트 랜더링하기

				const domContainer = document.querySelector('#root');
				const root = ReactDOM.createRoot(domContainer);
				root.render(app, domContainer);
    </script>
  </body>
</html>

• 안에 있는 값을 변경하고 싶다면 아래처럼 사용할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>리액트 1분만에 추가해보기!</title>
  </head>
  <body>
    <h1>내 html에 리액트 1분만에 추가해보기!</h1>
    <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        function HelloButton(props) {
            const [text, setText] = React.useState('Hello');

            function handleClickButton() {
                setText('Hello World');
            }

            return (
                <button onClick={handleClickButton}>
                    {text}
                </button>
            );
        }

        const app = (
            <div>
                <HelloButton/>
                <HelloButton/>
                <HelloButton/>
                <HelloButton/>
                <HelloButton/>
            </div>
        );

        // DOM에 리액트 컴포넌트 랜더링하기
				const domContainer = document.querySelector('#root');
				const root = ReactDOM.createRoot(domContainer);
				root.render(app, domContainer);
    </script>
  </body>
</html>

• 일반 태그도 넣을 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>리액트 1분만에 추가해보기!</title>
  </head>
  <body>
    <h1>내 html에 리액트 1분만에 추가해보기!</h1>
    <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        function HelloButton(props) {
            const [text, setText] = React.useState('Hello');

            function handleClickButton() {
                setText('Hello World');
            }

            return (
                <button onClick={handleClickButton}>
                    {text}
                </button>
            );
        }

        const app = (
            <div>
                <h1>hello world</h1>
                <p>hello world</p>
                <HelloButton/>
                <HelloButton/>
                <HelloButton/>
                <HelloButton/>
            </div>
        );

        // DOM에 리액트 컴포넌트 랜더링하기
        const domContainer = document.querySelector('#root');
				const root = ReactDOM.createRoot(domContainer);
				root.render(app, domContainer);
    </script>
  </body>
</html>

2. React의 특징

• 메타(구 Facebook)에서 관리하고 있는 오픈소스 프로젝트입니다. 회사가 사라지지 않는 한 꾸준한 관리와 업데이트를 기대할 수 있습니다.

  

  위 그래프에서 볼 수 있듯 민간에서 관리하는 Vue.js 에 비해 회사 차원에서 관리하는 React와 Angular의 점유율이 지속적으로 높은것을 확인할 수 있습니다. 출처: State of JavaScript (https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/)

• UI 컴포넌트를 만들고 재사용하는데 매우 용이합니다. 사실상 리액트는 아래 세 가지 일을 하기 위해 태어났습니다.

  1. UI 컴포넌트를 만들고
  2. 만들어진 컴포넌트를 통해 사용자와 인터렉션을 하고
  3. 화면을 업데이트 하는데 최적화 되어있습니다.

• Virtual DOM(가상 돔)

  • 위의 세 가지 기능중에 업데이트와 관련이 깊은 기술이 바로 리액트의 가상돔입니다. 바닐라 JS로 컴포넌트를 만들고 사용자 인터렉션을 통해 화면에 업데이트가 일어나게 되면 필연적으로 repaint, reflow 현상이 일어나게 됩니다. 즉 브라우저는 변화된 화면을 구현하기 위해 레이아웃 —> 페인트 —> 컴포지팅 단계를 반복해야합니다.

  리액트는 이러한 과부하를 줄이기 위해 메모리에만 존재하는 가상돔을 만들어 사용자의 반응으로 인한 변화를 미리 가상돔에 반영하고 이를 한번에 화면에 반영하는 전략을 사용하고 있습니다. 이를 통해 repaint, reflow 현상을 최소화 하는것이죠. 이는 마치 바닐라 JS의 DocumentFragment를 이용하는 방식과 비슷하다고 볼 수 있습니다. ****

    ```jsx
    // 리액트로 만드는 돔
    function Greeting({ name }) {
      return createElement(
        'h1', // 첫번째 인자는 만들 요소의 종류
        { className: 'greeting' }, // 두 번째 인자는 요소의 프로퍼티
        'Hello ', // 세번째 인자 이후로는 자식요소.
        createElement('i', null, name),
        '. Welcome!'
      );
    }
    
    // 렌더링 했을때 실제로 화면에 보이는 구조
    <h1 class="greeting">
      Hello <i>재현</i>. Welcome!
    </h1>
    
    ```