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

2023. 2. 10. 11:15·개발/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>

'개발 > React' 카테고리의 다른 글

[React] ③ JSX란?  (0) 2023.02.10
[React] ① 리액트 기초  (0) 2023.02.10
'개발/React' 카테고리의 다른 글
  • [React] ③ JSX란?
  • [React] ① 리액트 기초
휘Hwi
휘Hwi
여행, 사진, 개발, 책 이야기를 기록하는 여행자 휘의 블로그 𓂍
마이리얼트립 프로모션 할인 🏝️
마이리얼트립 호텔 예약 배너
※ 배너를 클릭하여 상품 구매 시, 파트너스 활동에 대한 소정의 수수료를 지급받습니다. 구매자에게 추가로 부과되는 수수료는 없습니다.
  • 휘Hwi
    휘: 끝나지 않은 이야기
    휘Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기 N
      • 기록
        • 일상 에세이
        • 인사이트
        • 투자와 재테크
        • 코인 이야기
        • 아카이빙
        • 집무실 레터
        • 사랑에 대하여
        • 번역 이야기(完)
        • 프리랜서 일지(完)
      • 여행 N
        • 🌎 세계 여행기 S1 (完)
        • 🌊 삼삼한 여행기 (完)
        • 🚶 온더로드
        • 🇯🇵 일본
        • 🏝️ 발리
        • 🇻🇳 베트남 N
        • 🇱🇰 스리랑카
        • 🇮🇳 인도
        • 🇹🇭 태국
        • 🇸🇬 싱가포르
        • 🇦🇺 호주
        • 🇭🇰 홍콩
        • 🇰🇷 한국
        • 🍚 여행자의 한 끼
        • ℹ️ 여행 정보
      • 사진
        • 사진가
        • 사진 이론과 생각
        • 사진 관련 정보
      • 영상
        • 파이널컷 모션 공부
        • 고프로 GoPro
        • 영상 관련 정보
      • 책
        • 책 읽고 쓰기
      • 개발
        • 티스토리
        • Internet
        • HTML
        • CSS
        • JavaScript
        • Typescript
        • React
        • Node.js
        • Express
        • NestJS
        • Python
        • Django
        • MySQL
        • MongoDB
        • AWS
        • Deployment
        • Terminal
        • Git
        • Glossaries
        • Articles
        • Projects
        • TIL;
      • 미분류
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
휘Hwi
[React] ② 리액트 프로젝트 시작 방법
상단으로

티스토리툴바