[React] ② 리액트 프로젝트 시작 방법

리액트 신규 프로젝트 생성

리액트로 신규 프로젝트를 생성하는 방법은 다음과 같습니다. 먼저, 리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js를 다운로드하여 설치합니다. 다음으로 커맨드 창을 열고 다음 명령어로 새로운 리액트 프로젝트를 시작합니다.

npx create-react-app my-app
cd my-app
npm start

아래와 같이 브라우저에 새로운 리액트 앱이 실행되면 성공입니다.

리액트 작동 방식의 이해

create-react-app을 통해 리액트 프로젝트를 시작했다면 다양한 파일들이 자동으로 생성된 것을 볼 수 있습니다. 참고로 create-react-app은 리액트 프로젝트를 간편하게 시작할 수 있는 라이브러리입니다. 즉, 다른 방식으로도 리액트 프로젝트를 시작할 수 있습니다. 그러나 이는 가장 많이 사용되는 리액트 라이브러리입니다.

 

기본적인 작동 방식은 다음과 같습니다.

 

페이지가 로딩되면 가장 먼저 src/index.js가 실행됩니다. 다음으로 public/index.html로 이동합니다. 참고로 index.html은 리액트에서 사용하는 유일한 HTML 문서입니다.

 

이제 index.js를 통해 해당 index.html에 App.js를 렌더링합니다. App.js는 자바스크립트 함수를 통해 HTML 코드를 리턴합니다. 익숙하면서도 조금 생소해보이는 이 구문이 바로 JSX입니다.

// App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  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>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

기존 프로젝트에서 리액트 사용하기

리액트는 다음과 같이 기존의 웹 페이지에 삽입하여 사용할 수도 있습니다. 보다 자세한 내용은 웹사이트에 리액트를 추가하는 방법을 참고하실 수 있습니다.

<!-- ... 다른 HTML ... -->

  <!-- React를 실행. -->
  <!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
  <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>

  <!-- 만든 React 컴포넌트를 실행. -->
  <script src="like_button.js"></script>
	
  <!-- 바벨 스크립트 삽입 -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</body>