ReactJS 개발의 첫걸음: Create React App으로 시작하기!

ReactJS 애플리케이션 개발에 뛰어들 준비가 되었다면, 가장 먼저 해야 할 일은 올바른 개발 환경을 갖추는 것입니다.

Create React App(CRA)이란?

Create React App(CRA)은 React로 단일 페이지 애플리케이션(SPA)을 공식적으로 빠르고 쉽게 시작할 수 있도록 도와주는 도구입니다. 복잡한 빌드 도구(예: Webpack, Babel) 설정 없이 합리적인 기본값으로 환경을 즉시 구성해 주어, 개발자는 환경 설정 대신 코드에만 집중할 수 있습니다.

728x90

React 애플리케이션 시작을 위한 7단계 가이드

1. Node.js 및 npm 설치 확인

React 프로젝트를 만들기 전에 Node.js와 npm(Node Package Manager)이 시스템에 설치되어 있어야 합니다.

• 설치: Node.js 공식 웹사이트에서 운영체제에 맞는 버전을 설치합니다.
• 설치 확인: 버전이 정상적으로 표시된다면 준비 완료입니다.
• node -v npm -v

2. 새로운 React 프로젝트 생성

이제 터미널에서 아래 명령어를 실행해 첫 React 프로젝트를 만듭니다.

npx create-react-app my-app

• npx: 패키지를 전역 설치 없이 실행하는 Node.js 실행 도구입니다.
• my-app: 프로젝트 폴더 이름이며, 원하는 이름으로 변경 가능합니다.

몇 분이 소요될 수 있으며, 필요한 파일과 폴더가 자동으로 설치됩니다.

3. 프로젝트 디렉터리로 이동

프로젝트 생성이 끝나면 해당 폴더로 이동합니다.

cd my-app

이제 React 개발을 본격적으로 시작할 수 있습니다.

4. 프로젝트 구조 이해

CRA가 만들어주는 기본 구조는 아래와 같습니다.

• node_modules/: 모든 서드파티 라이브러리와 종속성 저장
• public/: HTML 템플릿(index.html 등)과 정적 자산 저장
• src/: 주로 사용할 React 컴포넌트 및 코드 작성 공간
• package.json: 프로젝트 메타데이터, 스크립트, 종속성 관리
  이 구조를 이해하면 디렉토리 내 파일들의 역할이 명확해집니다.

5. 애플리케이션 실행

개발 서버를 실행해 브라우저에서 바로 앱을 확인할 수 있습니다.

npm start

기본적으로 http://localhost:3000에서 앱이 열리며, src/App.js 편집 안내와 유용한 링크들이 표시됩니다.

6. 변경 사항 적용 및 확인

src/App.js 파일을 열어 아래와 같이 수정해 봅니다.

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>Welcome to my first React app!</p>
    </div>
  );
}
export default App;

저장 즉시 “핫 리로딩(Hot Reloading)” 기능으로 브라우저에 변화가 반영되는 것을 볼 수 있습니다. 개발 생산성을 크게 올려주는 CRA의 장점입니다.

7. 프로덕션용 빌드

앱을 배포하거나 공유하려면 다음 명령어로 프로덕션 빌드를 생성합니다.

npm run build

build/ 폴더에 최적화된 정적 파일들이 생성돼 웹 서버를 통해 바로 배포할 수 있습니다.

마무리하며

ReactJS 환경 설정은 Node.js와 npm 등 필수 소프트웨어 설치, 환경 구축 단순화, 핫 리로딩 등 생산성 높은 기능을 모두 제공하는 Create React App을 활용하는 것에서 시작됩니다.
이 단계대로 따라가면 ReactJS로 동적이고 현대적인 웹앱 개발을 위한 안정적인 기반을 마련할 수 있습니다.
더 이상 환경설정에 지치지 말고, 창의적인 React 개발에 집중해 보세요. 여러분의 첫 React 여정을 응원합니다!