React 시작하기

React 프로젝트를 시작하는 방법

CDN 으로 시작하기

Node.js 와 npm 으로 시작하기

CDN 으로 시작하기

•

개발용 CDN script

•

배포용 CDN script

개발용 CDN script

<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>
HTML
복사

배포용 CDN script

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
HTML
복사

바벨(babel) CDN script

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

예시코드

<!DOCTYPE html>
<html>
  <head>
    <!-- React와 ReactDOM을 불러오기 위한 CDN -->
    <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>
    <!-- Babel을 사용하기 위한 CDN -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>

    <!-- React 컴포넌트를 렌더링할 컨테이너 -->
    <div id="mydiv"></div>

    <!-- Babel을 사용하여 JSX 코드를 자바스크립트로 트랜스파일하는 스크립트 -->
    <script type="text/babel">
      // React 함수 컴포넌트 정의
      function Hello() {
        return <h1>Hello World!</h1>;
      }

      // 렌더링할 컨테이너 요소 가져오기
      const container = document.getElementById('mydiv');

      // ReactDOM.createRoot를 사용하여 루트 생성
      const root = ReactDOM.createRoot(container);

      // Hello 컴포넌트를 루트에 렌더링
      root.render(<Hello />);
    </script>

  </body>
</html>
HTML
복사

CDN을 사용하면 별도의 빌드 및 번들링 과정을 거치지 않아도 되기 때문에 초기 단계에서는 편리합니다. 하지만, 실제 프로덕션 환경에서는 성능, 최적화, 코드 분할 등을 고려해야 하므로 일반적으로 번들러와 함께 사용하는 것이 권장됩니다.

Node.js 와 npm 으로 시작하기

Node.js 설치

React 프로젝트 생성 명령

React 프로젝트 실행

Node.js 설치

사전 설치 : Node.js

Node.js 설치

React 프로젝트 생성 명령

npx create-react-app (프로젝트명)

npx create-react-app react-app
Shell
복사

npm 에서 network read ECONNRESET이 발생할 때 해결 방법

npm config set registry http://registry.npmjs.org/
Shell
복사

registry 설정 후, 다시 명령어 실행.

React 프로젝트 실행

프로젝트 경로로 이동

cd react-app
Shell
복사

프로젝트 실행

Shell
복사

주요 소스 파일

index.html

index.js

app.js

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 문서의 문자 인코딩을 설정합니다. -->
    <meta charset="utf-8" />
    <!-- 웹사이트의 아이콘을 설정합니다. -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 뷰포트 설정으로 반응형 웹 디자인을 지원합니다. -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 테마 색상을 설정합니다. -->
    <meta name="theme-color" content="#000000" />
    <!-- 웹 앱 설명을 추가합니다. -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 애플 터치 아이콘을 설정합니다. -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json은 웹 앱이 사용자의 모바일 기기나 데스크톱에 설치될 때 사용되는 메타데이터를 제공합니다.
      https://developers.google.com/web/fundamentals/web-app-manifest/ 참고
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      위의 태그들에서 %PUBLIC_URL%을 주목하세요.
      빌드 중에는 이것이 `public` 폴더의 URL로 대체됩니다.
      오직 `public` 폴더 내부의 파일만 HTML에서 참조할 수 있습니다.

      "/favicon.ico" 또는 "favicon.ico"와 달리 "%PUBLIC_URL%/favicon.ico"은
      클라이언트 사이드 라우팅과 루트가 아닌 공용 URL 모두에서 올바르게 작동합니다.
      루트가 아닌 공용 URL을 구성하는 방법에 대한 자세한 내용은 `npm run build`를 실행하여 확인하세요.
    -->
    <!-- 웹 페이지의 제목을 설정합니다. -->
    <title>React App</title>
  </head>
  <body>
    <!-- JavaScript를 실행할 수 있도록 JavaScript를 활성화해야 합니다. -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- React 앱을 렌더링할 컨테이너 역할을 하는 div 요소입니다. -->
    <div id="root"></div>
    <!--
      이 HTML 파일은 템플릿입니다.
      브라우저에서 직접 열면 빈 페이지가 표시됩니다.

      이 파일에 웹폰트, 메타 태그 또는 애널리틱스를 추가할 수 있습니다.
      빌드 단계에서는 번들된 스크립트를 <body> 태그에 배치합니다.

      개발을 시작하려면 `npm start` 또는 `yarn start`를 실행하세요.
      프로덕션 번들을 생성하려면 `npm run build` 또는 `yarn build`를 사용하세요.
    -->
  </body>
</html>
HTML
복사

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 'root'라는 ID를 가진 DOM 요소를 찾아서 React Root를 생성합니다.
const root = ReactDOM.createRoot(document.getElementById('root'));

// React StrictMode를 사용하여 App 컴포넌트를 렌더링합니다.
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 앱의 성능을 측정하려면 결과를 기록할 함수를 전달합니다.
// (예: reportWebVitals(console.log))
// 또는 결과를 분석하는 분석 도구에 전달합니다. 자세한 내용은 https://bit.ly/CRA-vitals를 참조하세요.
reportWebVitals();
JavaScript
복사

app.js

// 'logo.svg' 파일을 가져옵니다.
import logo from './logo.svg';
// 'App.css' 스타일 파일을 가져옵니다.
import './App.css';

// 함수형 컴포넌트인 App을 정의합니다.
function App() {
  // 컴포넌트의 JSX 구조를 반환합니다.
  return (
    <div className="App">
      {/* 애플리케이션의 헤더 부분을 나타냅니다. */}
      <header className="App-header">
        {/* 로고 이미지를 표시합니다. */}
        <img src={logo} className="App-logo" alt="logo" />
        {/* 텍스트 내용을 표시하고, 수정 시 리로드 안내를 제공합니다. */}
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        {/* React 공식 웹사이트로 이동하는 링크를 제공합니다. */}
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

// App 컴포넌트를 모듈로 내보냅니다.
export default App;
JavaScript
복사

실행순서 이해하기

진입점

create-react-app에서 React 앱의 진입점(entry point)은 src/index.js로 설정되어 있습니다. 이것은 create-react-app이 제공하는 기본 구조에서의 규칙 중 하나입니다.

일반적으로 package.json 파일 내부에서 "main" 필드로 진입점을 지정할 수 있습니다. 하지만 create-react-app에서는 대부분의 설정이 내부적으로 이루어지기 때문에 개발자가 직접적으로 "main" 필드를 설정할 필요가 없습니다.

실행 순서

public/index.html

src/index.js

App.js 컴포넌트 생성

JSX  JavaScript 로 변환, DOM 에 렌더링

public/index.html

브라우저에서 public/index.html 파일이 열리면, 그 안에 있는 <div id="root"></div>는 React 앱이 렌더링될 장소를 제공합니다.

src/index.js

그 후, index.js 파일이 실행됩니다. index.js에서는 ReactDOM.render()를 사용하여 App 컴포넌트를 <div id="root"></div>에 렌더링합니다.

ReactDOM.render(<App />, document.getElementById('root')); 이 부분이 앱을 시작하는 지점입니다.

React는 이후에 App.js 파일에서 정의된 컴포넌트를 생성하고, JSX를 JavaScript로 변환하여 해당 DOM 요소에 렌더링합니다.

수동으로 프로젝트 시작하기

프로젝트 초기화

App 컴포넌트 작성

메인 화면 구현

HTML 파일 작성

프로젝트 실행

프로젝트 초기화

프로젝트 폴더에서 다음 명령어를 사용하여 React 및 ReactDOM을 설치합니다.

HTML
복사

npm install react react-dom react-scripts
Shell
복사

package.json

"scripts": {
		"start": "react-scripts start",
},
JSON
복사

App 컴포넌트 작성

App.js

// 파일: App.js
import React from 'react';

// JSX를 사용한 컴포넌트 정의
const App = () => {
  return (
    <div>
      <h1>Hello, JSX World!</h1>
      <p>This is a simple React component using JSX.</p>
    </div>
  );
};

export default App;
JavaScript
복사

메인 화면 구현

index.js

// 파일: index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// 메인 화면에서 App 컴포넌트 렌더링
ReactDOM.render(<App />, document.getElementById('root'));
JavaScript
복사

HTML 파일 작성

index.html

<!-- 파일: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <!-- React 앱을 표시할 컨테이너 -->
  <div id="root"></div>
</body>
</html>
HTML
복사

프로젝트 실행

HTML
복사

참고

React 버전 확인 명령

npm list react
JSON
복사