1️⃣ JSX란?
JSX(JavaScript XML)는 자바스크립트 코드 안에서 HTML과 유사한 문법을 사용해 UI를 선언적으로 설계할 수 있는 문법 확장(Syntax Extension) 이다.
2013년 페이스북(현 메타) 에서 공개되었으며, 프론트엔드 생태계에 큰 영향을 미쳤다.
명령형 방식이 아닌 선언형 컴포넌트 시대를 열었고, 전 세계 개발자들이 사용하는 새로운 패러다임을 만들었다.
직관성이 높아 디자이너와의 협업이 용이하다.
2️⃣ JSX의 단점
JSX는 JavaScript 표준 문법이 아니기 때문에 브라우저가 직접 해석할 수 없다.
Babel 같은 트랜스파일러(Transpiler) 를 통해 JS 코드로 변환되어야 실행 가능하다.
따라서 JSX를 쓸 때는 “JS 표준 → Babel 변환 → 브라우저 실행”의 과정이 필요하다.
UI를 근본적으로 이해하고 사용하는 것이 중요하다!!
3️⃣ DSL (Domain-Specific Language)
DSL이란?
DSL은 Domain-Specific Language, 즉 “특정 영역에 특화된 언어” 를 의미한다.
일반적인 프로그래밍 언어처럼 모든 문제를 해결하기 위한 범용 언어와는 달리,
DSL은 특정 문제를 빠르고 효율적으로 해결하기 위해 만들어진 언어이다.
DSL의 목적
-
복잡한 문제를 더 간단한 문법으로 표현할 수 있게 만든다.
-
특정 도메인(문제 영역)에 집중하여 생산성과 가독성을 높인다.
-
개발자뿐만 아니라 비개발자(기획자, 디자이너) 도 이해하기 쉽게 만든다.
외부 DSL vs 내부 DSL
외부 DSL: 기존 언어와 완전히 독립된 문법과 파서(Parser) 를 가진 언어. 파일 단위로 따로 관리되며, 독자적인 실행 환경을 갖는다.
ex ) SQL, HTML, CSS, 정규표현식
내부 DSL: 기존 범용 언어(GPL)의 문법을 확장하여, 그 언어 안에서 동작하는 DSL. 별도의 파서가 필요 없으며, 런타임에서 실행된다
ex ) JSX(React), RSpec(Ruby), Kotlin DSL(Gradle)
4️⃣ JSX의 구성 요소
JSX는 하나의 UI를 구성하기 위한 여러 단위로 구성되어 있다.
| 구성 요소 | 설명 | 예시 |
|---|---|---|
| JSXElement | JSX의 가장 기본 단위 | <h1>Hello</h1> |
| JSXOpeningElement | 열리는 태그 | <div> |
| JSXClosingElement | 닫히는 태그 | </div> |
| JSXSelfClosingElement | 자식 없이 스스로 닫는 태그 | <img src="logo.png" /> |
| JSXElementName | 태그 이름 (HTML/컴포넌트명) | div, MyComponent |
| JSXAttribute | 속성 (Attribute) | className="title" |
| JSXChildren | 자식 노드 | <div><p>내용</p></div> |
| JSXFragment | 불필요한 부모 없이 여러 요소를 묶는 태그 | <>...</> |
</>
5️⃣ JSXElementName
JSX 태그의 이름 부분을 의미한다.
소문자 시작 → HTML 태그로 인식
대문자 시작 → React 컴포넌트로 인식
점 표기(App.Header) → 객체 내부 컴포넌트 접근
내부적으로 Identifier(식별자) 로 변환되어 React.createElement() 호출 시 인자로 전달된다.
6️⃣ Babel
Babel은 최신 자바스크립트 문법(ES6+, JSX 등)을 브라우저가 이해할 수 있는 구버전 JS 코드로 변환해주는 트랜스파일러이다.
JSX → React.createElement() 로 변환한다.
최신 JS 문법(예: 화살표 함수, async/await)도 변환 가능하다.
// JSX 코드
const element = <h1>Hello, JSX!</h1>;
// Babel 변환 후
const element = React.createElement("h1", null, "Hello, JSX!");7️⃣ 자동 런타임 (Automatic JSX Runtime)
React 17부터 Babel이 JSX 변환 시 자동으로 React를 import 해주는 기능이 추가되었다.
이전에는 JSX를 쓰기 위해 반드시 import React from "react"; 문이 필요했지만,
이제는 Babel이 자동으로 react/jsx-runtime의 jsx() 함수를 불러와 처리한다.
8️⃣ Template Literal (템플릿 리터럴)
ES6에서 도입된 문자열 표현 문법으로, 백틱(``)과 ${}를 이용해 변수를 쉽게 삽입할 수 있다.
const color = "golden";
const cat = "rabbit";
const goldenCat = `${color} ${cat}`;➡️ 결과: "golden rabbit"
여러 줄 문자열도 가능하며, JSX 내부에서도 {``} 안에 사용할 수 있다.
React, Vue, JS 전반에서 활용 가능하다.
9️⃣ Process (프로세스)
프로세스(Process) 는 “실행 중인 프로그램”을 의미한다.
프로그램이 메모리에 올라와 CPU가 실제로 명령을 수행하는 상태.
각 프로세스는 독립적인 메모리 공간(Code, Data, Heap, Stack)을 가진다.
구성요소 설명
Code 실행할 명령 저장
Data 전역 변수 등
Heap 동적 메모리
Stack 함수 호출 및 지역 변수
🔟 프로세스와 엘리먼트 (React UI 구조)
프로세스: 앱 전체 실행 상태
엘리먼트(Element): 화면을 구성하는 개별 구성 요소
리액트에서는 컴포넌트 단위로 엘리먼트를 선언하고, 이들이 모여 하나의 프로세스처럼 동작한다.
지금까지 react를 공부하기 위해서 필요한 기본 개념들을 알아봤습니다! 코드를 짤 때 외우면서 짜지말고 저희 이해하면서 짜요,,, ㅎㅎㅎ
그럼 모두
