대부분의 리액트 사용자들이 리액트와 함께 사용하는 대표적인 라이브러리 및 패키지로는 Webpack과 Babel이 있습니다.
Webpack: 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리.
Babel: 자바스크립트의 컴파일러. JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리.
이 외에도 리액트와 함께 사용할 수 있는 수많은 패키지 및 라이브러리들이 존재하는데, 이것들을 익히기 위해 역할 다 이해하고 또 설치하고 세팅하는 것은 여간 쉬운일이 아닙니다.
리액트를 처음 다루는 단계에서는 리액트에 필요한 패키지들을 미리 설치 및 환경 설정까지 다 해놓고 바로 사용할 수 있도록 마련된 패키지를 감싼 패키지를 이용하면 됩니다.
→ Boiler Plate: 이미 세팅 완료된 패키지.
1) create react app 실습
[리액트 앱 설치 및 프로젝트 생성하기]
npx 명령어: 설치되어 있지 않은 패키지를 일회성으로 사용하고 싶을 때 사용하는 도구.
npx create-react-app 파일명
↳ 리액트 앱을 설치하고 프로젝트 파일을 생성합니다.
위 CLI를 통해 정상적으로 리액트 앱이 설치 되었다면 다음과 같이 새로운 폴더와 파일들이 생성됩니다.
package.json 파일을 열어 스크립트 필드를 살펴보겠습니다.
↳ start: 리액트 애플리케이션을 실행합니다.
*리액트 앱 종료하기: 터미널에 'Ctrl + C' 입력 → 'y' 입력
'웹 > React' 카테고리의 다른 글
| React 전역 상태 관리 - Recoil 기본 사용법 (0) | 2025.01.17 |
|---|---|
| [React] 5. 입문 - State / Props (0) | 2022.07.27 |
| [React] 4. 입문 - JSX (0) | 2022.07.27 |
| [React] 2. 리액트란? - 개념 / 특징 (0) | 2022.07.26 |
| [React] 1. Node.js (0) | 2022.07.26 |
