React

[React] Create-react-app 개념 및 설치방법

개발적금 2023. 3. 13. 16:27

이번포스팅에서는 CRA(create-react-app)을 알아보겠습니다.

 

- CRA ?

 

create-react-app은 Facebook에서 제공하는 공식 CLI(Command Line Interface) 도구로서,

React 프로젝트를 쉽게 생성하고 구성할 수 있도록 도와주는 도구입니다.

이를 사용하여 개발자들은 React 애플리케이션을 빠르게 구성하고 실행할 수 있습니다.

 

create-react-app을 사용하면 초기 설정과 구성에 드는 시간과 노력을 줄일 수 있습니다!

이전 포스팅에서 보셨다 싶이 babel , webpack 설정들 정말 설정들이 많았는데

이 모든설정들을 자동으로 생성하고 관리할수 있습니다...

 

CRA는 몇가지 특성을 가지고있습니다

( 글로 풀어서 장점을 몇가지 더 설명해드리겠습니다 ) 

 

1. 편리한 프로젝트 구성

 

create-react-app은 React 프로젝트를 위한 초기 구성과 구조를 자동으로 생성합니다.

개발자는 프로젝트 구조를 직접 구성할 필요가 없으며,

생성된 구조에서 쉽게 개발할 수 있습니다.

 

초기 create-react-app

 

2. 자동코드 변환

 

create-react-app은 Babel과 같은 도구를 사용하여 최신 JavaScript 기술을 사용하고,

구형 브라우저에서도 실행 가능한 코드로 자동으로 변환해줍니다.

( 당연한 말이지만 CRA를 하게되면 Babel 설정이 다 되어서 나옵니다 )

 

3. Hot Module Replacement

 

create-react-app은 Hot Module Replacement(HMR)을 지원합니다.

이는 코드가 수정될 때 브라우저에서 새로고침 없이 변경 사항을 즉시 반영해줍니다.

즉, devServer를 사용하여 작업을 할수있다는것 입니다(이것마저 설정되어나옵니다)

 


 

설치는 간단합니다

※ Node 버전은 10 이상이어야 합니다. ( Node -v 로 확인 )

 

npx create-react-app [project명]

npx create-react-app user_project

 

 

※ 실행은 npm start 로 실행하시면됩니다.