[Next.js Learn] From JavaScript to React(3) - Getting Started with React

지치지 않는 백엔드 개발자 김성주·2023년 6월 1일

목록 보기

5/50

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@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>```

순수 JavaScript를 사용하여 DOM을 직접 조작하는 대신, `react-dom`의 `ReactDOM.render()` 메서드를 사용하여 React에게 `#app` 요소 내에 `<h1>` 제목을 렌더링하도록 지시할 수 있습니다.

```html
<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

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

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

JSX가 뭐죠?

JSX는 HTML과 유사한 문법으로 UI를 기술할 수 있는 JavaScript의 문법 확장입니다. JSX의 장점은 세 가지 JSX 규칙을 따르는 것 외에도 HTML과 JavaScript 외에 새로운 기호나 문법을 배울 필요가 없다는 것입니다.

주의할 점은 브라우저가 JSX를 기본적으로 이해하지 못한다는 것입니다. 따라서 JSX 코드를 일반적인 JavaScript로 변환해주는 Babel과 같은 JavaScript 컴파일러가 필요합니다.

프로젝트에 바벨을 추가하기

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

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

또한, Babel에게 어떤 코드를 변환할지 알려주기 위해 스크립트 타입을 type=text/jsx로 변경해야 합니다.

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

그런 다음 브라우저에서 코드를 실행하여 정상적으로 작동하는지 확인할 수 있습니다.

방금 작성한 선언적인 React 코드를:

<script type="text/jsx">
  const app = document.getElementById("app")
  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>

이전 섹션에서 작성한 명령형 JavaScript 코드와 비교하면:

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