Create React App(CRA) 없이 리액트 앱을 구축해보고자 한다.
Create React App(CRA)은 단 몇 줄의 명령어로 최적화된 리액트 개발 환경을 구축할 수 있다. 복잡한 설정 과정 없이 즉시 개발을 시작할 수 있고, 웹팩, 바벨, ESLint 등이 미리 구성되어 있어 최신 자바스크립트 기능을 바로 사용할 수 있다. 또한, 핫 리로딩을 지원하는 개발 서버가 포함되어 있어 생산성이 향상된다. 하지만, CRA의 내부 작동 방식을 이해하지 못한 채 사용하게 될 수 있고, 특정 요구사항에 맞춰 설정을 변경하려면 'eject'해야 하는데, 이는 복잡하고 되돌리기 어려운 과정이다. CRA로 리액트를 만들다가 문득 프로젝트 구조와 빌드 프로세스에 대해 궁금증이 생겼고, CRA 없이 리액트 앱을 만들어보고자 한다.
이 과정을 통해 얻고자 하는 것
1️⃣ 웹팩에 대해 이해하기: 모듈 번들링의 개념과 중요성, 로더(Loader)와 플러그인(Plugin)의 역할
2️⃣ 바벨에 대해 이해하기: ES6+ 문법을 어떻게 변환하는지, 폴리필(Polyfill)의 개념과 필요성
3️⃣ 프로젝트 구조 설계하기: 각 디렉토리와 파일의 역할, 확장성과 유지보수성을 고려
4️⃣ 최적화 기술 배우기: 번들 크기 줄이기, 코드 분할
프로젝트 세팅
mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
import React from 'react';
const App = () => {
return <h1>Hello, Webpack + React!</h1>;
};
export default App;
개념 설명
- React와 ReactDOM:
- React는 컴포넌트를 정의하고 관리하는 코어 라이브러리
- ReactDOM은 React 컴포넌트를 실제 DOM에 렌더링하는 역할
- JSX:
- HTML과 유사한 문법으로 JavaScript 내에서 UI를 표현
- 바벨(Babel)을 통해 일반 JavaScript로 변환
- 컴포넌트:
- 함수형 컴포넌트: JavaScript 함수로 정의되며, props를 인자로 받아 React 엘리먼트를 반환
- 클래스형 컴포넌트: React.Component를 상속받아 정의되며, render 메소드를 통해 UI를 반환
생각해볼만한 주제
1. React를 사용하지 않고 순수 JavaScript로 비슷한 "Hello, World!" 앱을 만들 때와 React를 사용할 때의 차이점
순수 JavaScript로 만들기
HTML ( index.html )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure JS Hello World</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
JavaScript ( app.js )
document.addEventListener('DOMContentLoaded', function() {
const root = document.getElementById('root');
const header = document.createElement('h1');
header.textContent = 'Hello, World!';
root.appendChild(header);
});
순수 JavaScript와 React의 차이점
순수 JS는 명령형 프로그래밍 방식으로 DOM을 직접 조작하는 반면, React는 선언형 프로그래밍과 JSX를 사용하여 UI를 선언적으로 정의한다. React는 컴포넌트 기반 구조를 가지고 있어 UI를 재사용 가능한 조각으로 나누고, 가상 DOM을 사용하여 성능을 최적화한다. 순수 JS는 브라우저 내장 API만으로 구현이 가능하지만, React는 추가 라이브러리와 트랜스파일러가 필요하다. 하지만 React는 컴포넌트 기반 구조와 단방향 데이터 흐름으로 복잡한 UI 관리에 용이하며, 대규모 애플리케이션 개발 시 높은 생산성을 제공한다. 결론적으로, 순수 JS는 간단한 작업에 적합하고 빠른 구현이 가능하지만, React는 복잡하고 확장성 있는 애플리케이션 개발에 더 적합한 도구라고 할 수 있다.
2. JSX를 사용하지 않고 React.createElement 를 사용하여 "Hello, React!" 컴포넌트를 만들 때와 JSX 를 사용할 때의 차이점
React.createElement 버전
function App() {
return React.createElement(
'div',
null,
React.createElement('h1', null, 'Hello, React!'),
React.createElement(
'p',
null,
'This is a simple example without JSX.'
)
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App, null));
JSX가 제공하는 이점
JSX는 React에서 사용되는 문법으로, JavaScript 코드 내에서 HTML과 유사한 구조를 작성할 수 있게 해준다. JSX의 가장 큰 장점은 가독성과 간결성이다. HTML과 유사한 문법을 사용하여 컴포넌트의 구조를 직관적으로 표현할 수 있고, 중첩된 요소를 간결하게 작성할 수 있다. 또한 JSX는 컴파일 시점에 문법 오류를 잡아내고, XSS 공격을 방지하기 위해 자동으로 값을 이스케이프 처리한다. 많은 개발 도구들이 JSX를 지원하여 자동 완성, 문법 강조 등의 기능을 제공하며, 컴포넌트 간 속성 전달과 조건부 렌더링을 간소화할 수 있다. 최종적으로는 JSX가 React.createElement 호출로 변환되지만, 개발자 경험과 코드 유지보수 측면에서 이점이 있다.
다음 포스팅 : Webpack 설정하기
'개발공부 > React' 카테고리의 다른 글
| [React] 프론트엔드 빌드 과정: 컴파일링과 번들링 이해하기 (1) | 2025.01.23 |
|---|---|
| [React] CRA 없이 리액트 앱 만들기: Webpack 설정하기 (4) | 2024.10.29 |
| [React] 테스팅 패턴 - 외부 모듈의 Mocking을 이용한 검증 (0) | 2024.07.31 |
| [React] 테스팅 패턴 - 모의 데이터를 이용하여 검증 (0) | 2024.07.27 |
| [React] 테스팅 패턴 - Rendering 검증 (0) | 2024.07.21 |