[React] CRA, Vite 없이 React 개발 환경 구축하기 (심플 버전)

개요

리액트를 CRA(Create React App)나 Vite 같은 도구를 사용해 시작하면 내부적으로 리액트가 어떻게 동작하는지 이해하기 어렵다. 그래서 직접 HTML, React, Babel을 사용해 간단한 리액트 프로젝트를 만들어보았다.

전체 코드

<html>
  <head>
    <meta charset="UTF-8" />
    <title>리액트</title>
  </head>
  <body>
    <div id="root"></div>
    
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

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

    <script type="text/babel">
      "use strict";

      function LikeButton() {
        const [liked, setLiked] = React.useState(false);

        if (liked) {
          return "좋아요!";
        }
        
        return (
          <button
            onClick={() => {
              setLiked(true);
            }}
          >
            Like
          </button>
        );
      }
    </script>
    <script type="text/babel">
      ReactDOM.createRoot(document.querySelector("#root")).render(<LikeButton />)
    </script>
  </body>
</html>

HTML

 <div id="root"></div>

리액트가 렌더링을 시작할 DOM 요소이다.

리액트와 리액트 DOM 추가

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

위 스크립트를 통해 React 와 ReactDOM 라이브러리를 로드한다. 이 라이브러리는 컴포넌트 정의와 렌더링에 사용된다.

바벨 추가

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

바벨은 JSX 코드를 브라우저가 이해할 수 있는 일반 자바스크립트로 변환해준다.

JSX 와 React.createElement

JSX 는 XML 과 유사한 문법으로 작성되며, 내부적으로는 React.createElement 로 변환된다.

JSX

return (
  <button
    onClick={() => {
      setLiked(true);
    }}
  >
    Like
  </button>
);

바벨은 위와 같은 JSX 문법을 자바스크립트 코드로 바꿔준다.

변환 결과

return React.createElement("button",{ onClick: () => setLiked(true) },"Like");

위의 JSX 코드가 바벨로 인해 내부적으로는 위와 같이 동작한다.

ReactDOM.createRoot

 ReactDOM.createRoot(document.querySelector("#root")).render(<LikeButton />)

React 18 부터는 React.createDom 을 사용한다. 이는 Concurrent Mode 를 지원하여 UI 업데이트를 더욱 효율적으로 처리한다.

리액트 상태 관리

컴포넌트의 상태는 useState 훅으로 관리하며, 상태 변화에 따라 컴포넌트가 리렌더링된다. 예를 들어 LikeButton 컴포넌트는 liked 상태에 따라 버튼 텍스트를 업데이트한다.

결과

잘 동작한다!

다음에는 컴포넌트 여러 개일 경우 리액트 프로젝트 설정하는 방법을 알아보자!

리액트 강의 를 듣고 정리한 내용입니다.

'React' 카테고리의 다른 글

Tanstack Query 의 캐싱에 대하여 (0)	2024.11.07
[React] Props Children (0)	2024.08.31
[React] 리액트에서 불변성 (0)	2024.08.29
React 에서 Sweetalert2 사용 (1)	2024.08.26
[React] React 에 컴포넌트 별로 CSS 적용하기 (0)	2024.08.12

개요