githubEdit

Chapter 3. Getting Started with React

Chapter 3

React 시작하기

React를 프로젝트에서 사용하려면 unpkg.comarrow-up-right이라는 외부 웹사이트에서 두 개의 React 스크립트를 불러와야 합니다:

  • react는 핵심 React 라이브러리입니다.

  • react-dom은 DOM과 함께 React를 사용할 수 있도록 특정한 메서드를 제공합니다.

<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에게 <h1> 제목을 #app 요소 내에 렌더링하도록 지시할 수 있습니다.

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

React 구문 오류

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

JSX란 무엇인가요?

JSX는 JavaScript의 구문 확장으로, 익숙한 HTML과 유사한 구문을 사용하여 UI를 설명할 수 있게 해줍니다. JSX의 좋은 점은 JSX 규칙 세 가지arrow-up-right을 따르는 것 외에도 HTML과 JavaScript 외에는 새로운 기호나 구문을 배울 필요가 없다는 것입니다.

브라우저는 JSX를 기본적으로 이해하지 않으므로 JSX 코드를 일반 JavaScript로 변환하기 위해 Babelarrow-up-right과 같은 JavaScript 컴파일러가 필요합니다.

프로젝트에 Babel 추가하기

프로젝트에 Babel을 추가하려면 index.html 파일에 다음 스크립트를 복사 및 붙여넣어야 합니다:

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

그런 다음 브라우저에서 코드를 실행하여 올바르게 작동하는지 확인할 수 있습니다.

방금 작성한 선언적 React 코드 비교:

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

React를 사용하면 반복적인 코드를 대부분 줄일 수 있음을 알 수 있습니다.

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

참고: React가 UI를 어떻게 업데이트하는지 정확히 알 필요는 없지만 더 알고 싶다면 React 문서의 UI treesarrow-up-rightreact-dom/serverarrow-up-right 섹션을 살펴보세요.

추가 자료:

Last updated

Was this helpful?