JSX는 리액트를 사용할때 사용자 UI를 쉽고 편리하게 개발할 수 있도록 제공한 리액트의 문법이다. 코드를 보면 HTML 형태처럼 보이나, 실제로는 바벨에 의해 JS 문법으로 변환되어 렌더링에 사용된다.
그럼 2장에서 다룬 내용들을 좀 더 깊게 파보도록 하겠다!
create-react-app
리액트 프로젝트를 처음 시작할때 콘솔창에 입력하는 명령어가 있다.
(npx는 npm v5 이상부터 쓸 수 있는 노드 실행 도구이다.)
$npx create-react-app my-project
위의 명령어를 실행하면 아래와 같은 로그가 찍힌다.
react, react-dom, react-scripts, cra-template을 설치하고 1316개의 패키지가 자동으로 같이 추가되었다.
// 자동으로 package.json에 추가된 설정들
{
"name": "my-product",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.2.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1"
},
...
}-
react: React 라이브러리로, 애플리케이션의 사용자 UI 를 구성하는 데 사용한다. 상태, 속성을 사용하여 동적인 웹 애플리케이션을 만든다. 또한 가상돔을 사용하여 UI 변경 사항을 효율적으로 처리한다.
-
react-dom: React 애플리케이션을 DOM에 렌더링하는데 사용되는 라이브러리이다. 리액트는 가상돔을 사용하여 UI를 관리하지만, 실제 DOM 변경사항에 반영하고 연결하는 일은 react-dom의 역할이다.
-
react-scripts: create-react-app에서 제공하는 개발용 도구 모음이다. 개발할때 필요한 도구들을 자동으로 설정하여 바로 개발할 수 있도록 한다.
- Webpack: 코드 번들링을 담당하는 도구로, 애플리케이션의 자바스크립트, CSS, 이미지 파일 등을 번들링하여 최적화한다.
- Babel: 최신 JavaScript(ES6 이상) 문법을 구형 브라우저에서도 동작할 수 있도록 변환해주는 트랜스파일러
- EsLint: 코드 품질을 유지하기 위해 정적 코드 분석을 수행하는 도구
- Jest: React 애플리케이션의 테스트를 위한 프레임워크이다.
- CSS 모듈: CSS 파일을 모듈화하여 각 컴포넌트에게만 적용되는 스타일을 작성할 수 있다.
-
cra-template: Create React App 프로젝트의 기본 템플릿을 제공한다. 이 템플릿은 프로젝트의 초기 구조와 설정을 정의한다. 사용자가 설정을 수정할 필요 없이 바로 개발을 시작하게 한다.
- 기본적인 파일 구조 (예: src, public 폴더, index.html, index.js 등)
- 기본 React 설정 (예: React.StrictMode, App 컴포넌트 등)
- 개발 환경을 위한 설정 (예: Webpack, Babel, ESLint 등)
.
.
.
.
.
[2025-11-12 업데이트]
CRA Deprecated 중단 이유
활발한 유지보수 부족
- CRA는 현재 “새로운 기능” 추가보다는 유지보수 모드로 들어갔습니다. 공식 블로그에서 “active maintainers(활성 유지보수자)가 없다”는 언급이 있습니다.
현대적인 요구사항을 제대로 내장하지 않음
CRA 초기에는 좋은 출발점이었지만, 지금 React 앱을 실제로 운영하고 확장할 때 필요한 여러 기능들이 기본에 빠져 있습니다:
라우팅(routes)이나 데이터 패칭(data fetching) 같은 기능이 기본 세팅에 포함되어 있지 않음.
코드 스플리팅(code splitting), 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG) 같은 성능/최적화 관련 기능이 내장되어 있지 않음.
번들러로 사용하는 Webpack 기반 설정이 최근의 빌드툴들(예: Vite 등) 대비 느리고 유연성이 떨어짐.
더 나은 대안의 등장
React 생태계 외에도 빠르게 발전한 여러 툴/프레임워크들이 등장했고, 이들이 CRA의 약점을 상당부분 보완했습니다. 예컨대 Vite, Next.js 등이 그런 대안입니다.
