[개발환경 세팅] React 설치 및 적용 방법

 

 

React 설치를 위해서는 아래와 같은 프로그램들이 필요합니다.

 

1. Chrome                         

→ Chrome 다운로드

2. Visual Studio Code  

→ Visual Studio Code 다운로드

3. Node.js                     

→ Node.js 다운로드

4. React Developer Tools              

→ React Developer Tools 다운로드

 

Chrome과 Visual Studio Code의 설치 방법 같은 경우 따로 다루지 않겠습니다.

Visual Studio Code 설치 방법 링크

 

---

Node.js   →   Node.js 다운로드

 

좌측의 LTS 버전으로 다운로드하여주세요.

설치 화면이 나오고, 계속 Next를 눌러주시면 설치가 완료됩니다.

 

---

React 개발환경 구축

 

터미널을 열고 원하는 디렉토리에서 'create-react-app .' 명령어를 입력합니다.

create-react-app .

 

명령어를 입력하면 위와 같이 설치가 시작됩니다. 

시간이 어느정도 지나고, 설치가 완료되었다면 개발환경 구축이 완료된 것입니다.

 

---

React 실행

 

React를 설치한 디렉토리에서 'npm start' 명령어를 입력합니다.

npm start // or npm run start

 

위의 명령어를 입력하면 자동으로 새로운 브라우저창이 열리면서 localhost:3000 경로에, 해당하는 디렉토리의 React가 실행되는 것을 확인할 수 있습니다.

 

---

React Developer Tools →  React Developer Tools 다운로드

 

개발의 편의성을 위해 React 개발자 도구를 추가합니다.

아래 화면에서 Chrome에 추가 버튼을 클릭합니다.

 

추가하셨으면 아래와 같이 개발자 도구에서 Components, Profiler 탭이 생긴 것을 확인하실 수 있습니다.