091
[JS/React] JSX(1): 개념과 초기 세팅 설명 본문
1. JSX
- JSX란 JavaScript와 HTML/XML을 한 파일에서 쓸 수 있도록 한 React 전용 확장 문법입니다. JSX를 사용하면 createElement(...)와 같은 복잡한 방법 대신 HTML과 비슷하게 생긴 문법을 사용할 수 있어 훨씬 사용하기 수월합니다.
-> React 17버전 이상에서는 더이상 내부 트랜스파일러가 React.creeateElement(...)를 사용하지 않고 리액트 엔진 내부에 있는 jsx-runtime을 자동으로 불러와 변환합니다. 아래 블로그를 통해 관련된 자세한 내용을 얻을 수 있습니다.
https://so-so.dev/react/import-react-from-react/
그 많던 import React from ‘react’는 어디로 갔을까
이 글에서는 React 17릴리즈에 포함되었던 JSX Transform의 RFC문서를 살펴보며 이 변경사항이 어떤 의미를 가지고 있는지 정리해 보았습니다. 중간중간 내용에 대한 첨언과 약간의 추측을 덧붙였습니
so-so.dev
(0) CRA / Vite
- CRA(Create-React-App)와 Vite 모두 리액트를 자동으로 세팅하는 툴체인이라고 생각하면 됩니다. 2025년 기준으로 CRA는 리액트에서 공식으로 Deprecated된 상태인데 그 이유는 이 CRA의 메인 번들러인 WebPack이 느리고, 설정 파일이 너무 복잡하기 때문입니다. 그래서 Vite라는 또다른 빌드 도구를 표준으로 사용하고 있습니다.
- Vite란 내부에서 esbuild와 Native ESM을 기반으로, npm run dev라는 개발자 모드의 실행을 돌릴 때는 esbuild만을 사용해 번들링하지 않고 HMR로 트랜스파일링해줍니다. 이후 npm run build를 사용하여 프로덕션(배포)할 때는 Rollup을 사용하여 더 깐깐하게 번들링해줍니다.
npm create vite@latest my-app-> 이 명령어를 통해 my-app을 하나 만들어주고 이후 선택은 React-> JavaScript -> No를 해서 만들어줍니다.
(1) React 기본구조
-> 일단 먼저 위의 명령어를 통해 만들어준 뒤 terminal을 켜서 npm install을 해주면 node_modules가 생성됩니다.
- 브라우저에서 React에서 앱을 여는 순서: 브라우저가 index.html을 요청
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-app</title>
</head>
<body>
<div id="root"></div> <!-- 리액트 앱의 핵심 -->
<script type="module" src="/src/main.jsx"></script>
<!-- 리액트 컴포넌트들의 최상위 꼭대기이자 시작점인 main.jsx 파일을 불러옴 -->
</body>
</html>-> indexl.html를 실행하면,HTML 파싱 중 <di?>v id="root"></div>를 발견하고 나면 비어있는 채로 DOM에 생성됩니다. 아래 <script>를 발견하면 Vite에게 main.jsx 변환을 요청합니다.
-> type="module"은 ESM 방식으로 로드를 한다는 의미로, CRA에서는 작성하지 않았던 문법입니다. 이 속성 덕분에 모든 파일을 미리 묶지 않고 빠른 속도로 서버를 띄울 수 있습니다.
import { StrictMode } from 'react' //strictMode를 꺼냄
import { createRoot } from 'react-dom/client' //react-dom은 React를 브라우저 DOM에 그려주는 패키지
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)-> main.jsx를 실행하면, 내부에 있는 createRoot로 id가 root였던 div를 관리할 영역으로 지정해줍니다. .render(...)를 통해 내부에 App 컴포넌트를 root div 내부에 그립니다.
-> react와 react-dom이 분리된 이유는 React 자체는 플랫폼을 의존되어있지 않은 순수 로직이기 때문에 DOM을 그리는 react-dom만을 따로 추가하여 사용합니다. 만약에 React Native를 사용하고 싶을 때는 렌더러만 react-native로 변경하면 됩니다.
-> StrictMode는 애플리케이션 내의 잠재적인 문제를 찾아내기 위해 내부 컴포넌트들에 대한 추가적인 검사와 경고를 할성화하는 도구입니다. 오직 개발 모드에서만 동작하고 배포 빌드에서는 완전히 무시됩니다. 의도적으로 이중 렌더링을 진행하기 때문에 console.log가 두번 나오는 경우도 발생하게 됩니다.
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png' //image도 import 가능(Vite가 URL 문자열로 변환)
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
...
)
}
export default App-> App.jsx를 실행하면, JSX를 반환하면서 Virtual DOM을 생성하고 실제 DOM에 반영하여 화면에 보이기 시작합니다.
'Programming Language > JavaScript&TypeScript' 카테고리의 다른 글
| [JS/React] JSX(3): Component 실습, State (0) | 2026.04.12 |
|---|---|
| [JS/React] JSX(2): Component, Element (1) | 2026.04.10 |
| [JS/React] 기초 문법 복습(2): 분할대입, 디폴트 값, 스프레드, 모듈/번들러 (0) | 2026.04.07 |
| [JS/React] 기초 문법 복습(1): const/let, 템플릿 문자열, 화살표 함수 (0) | 2026.04.07 |
| [JS/TS] 프론트엔드와 서버의 통신: AJAX, Fetch API, Axios (0) | 2026.03.16 |
