Getting Started with React

새로 만든 프로젝트에서 React를 사용하려면 unpkg.com이라는 외부 웹사이트에서 두 개의 React 스크립트를 로드합니다.

react는 핵심 React 라이브러리입니다. react-dom은 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공합니다.

index.html
<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

일반 JavaScript로 DOM을 직접 조작하는 대신 이전에 추가한 DOM 메서드를 제거하고 ReactDOM.createRoot() 메서드를 추가하여 특정 DOM 요소를 타겟팅하고 React 구성 요소를 표시할 루트를 만듭니다. 그런 다음 root.render() 메서드를 추가하여 React 코드를 DOM에 렌더링합니다.

이렇게 하면 React가 #app 요소 내부에 <h1> 제목을 렌더링하도록 지시합니다.

index.html
<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

브라우저에서 이 코드를 실행하려고 하면 구문 오류가 발생합니다.

Terminal
Uncaught SyntaxError: expected expression, got '<'

이는 <h1>...</h1>가 유효한 Javascript가 아니기 때문입니다. 이 코드 조각은 JSX입니다.

What is JSX?

JSX는 JavaScript의 구문 확장으로, 익숙한 HTML과 유사한 구문으로 UI를 설명할 수 있습니다. JSX의 장점은 세 가지 JSX 규칙을 따르는 것 외에는 HTML과 JavaScript 외부의 새로운 심볼이나 구문을 배울 필요가 없다는 것입니다.

하지만 브라우저는 JSX를 바로 이해하지 못하므로 Babel과 같은 JavaScript 컴파일러가 필요하여 JSX 코드를 일반 JavaScript로 변환합니다.

Adding Babel to your project

프로젝트에 Babel을 추가하려면 다음 스크립트를 복사하여 index.html 파일에 붙여넣으세요.

index.html
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

또한, 스크립트 유형을 type=text/jsx로 변경하여 어떤 코드를 변환해야 하는지 Babel에 알려야 합니다.

index.html
<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

제대로 작동하는지 확인하려면 브라우저에서 HTML 파일을 엽니다. 방금 작성한 선언적 React 코드를 비교합니다.

index.html
<script type="text/jsx">
  const domNode = document.getElementById("app")
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

이전 섹션에서 작성한 명령형 JavaScript 코드에:

index.html
<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

React를 사용하면 많은 반복 코드를 줄일 수 있다는 것을 알 수 있습니다.

그리고 이것이 바로 React가 하는 일입니다. React는 사용자를 대신하여 작업을 수행하는 재사용 가능한 코드 조각을 포함하는 라이브러리입니다. 이 경우 UI를 업데이트합니다.

추가 리소스:

React가 UI를 업데이트하는 방식을 정확히 알 필요는 없지만, 자세히 알아보고 싶다면 다음과 같은 추가 리소스를 참조하세요.

Essential JavaScript for React

JavaScript와 React를 동시에 배울 수 있지만 JavaScript에 익숙해지면 React를 배우는 과정이 더 쉬워질 수 있습니다.

다음 섹션에서는 JavaScript 관점에서 React의 핵심 개념을 소개합니다. 언급될 JavaScript 주제를 요약하면 다음과 같습니다.

이 과정에서는 JavaScript에 대해 깊이 다루지 않지만 최신 버전의 JavaScript를 최신 상태로 유지하는 것이 좋습니다. 하지만 아직 JavaScript에 능숙하지 않다고 생각하더라도 React를 시작하는 것을 늦추지 마세요!