STUDY/[ React ]

리액트와 jsx 문법

Lim임 2025. 11. 13. 13:30

🧩 리액트(React)와 JSX 문법 완전 기초 가이드

🚀 1. 리액트란 무엇인가?

리액트(React) 는 사용자 인터페이스(UI) 를 만들기 위한
JavaScript 라이브러리이다.
페이스북(지금의 Meta)에서 만들었고, 전 세계적으로 가장 많이 쓰이는
프런트엔드 기술 중 하나다.

💡 한 줄 요약

"리액트는 화면을 컴포넌트 단위로 쪼개서 효율적으로 렌더링하는 JS
라이브러리"

🧱 2. 리액트의 핵심 개념

✅ 1) 컴포넌트(Component)

화면을 구성하는 작은 조각 단위\
각 컴포넌트는 독립적으로 관리되고, 재사용이 가능함\
HTML, CSS, JS가 하나로 묶인 구조라고 생각하면 편함

function Welcome() {
  return <h1>안녕, 리액트!</h1>;
}

✅ 2) 상태(State)

컴포넌트 안에서 변할 수 있는 데이터
상태가 바뀌면, 리액트는 자동으로 화면을 다시 렌더링(rendering)
함

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

✅ 3) props (프로퍼티)

부모 컴포넌트 → 자식 컴포넌트로 데이터 전달할 때 사용
HTML의 속성(attribute)처럼 사용함

function Greeting({ name }) {
  return <h1>안녕, {name}!</h1>;
}

function App() {
  return <Greeting name="서인" />;
}

🧩 3. JSX란 무엇인가?

💬 정의

JSX(JavaScript XML) 은
자바스크립트 안에서 HTML처럼 보이는 문법을 사용할 수 있게 해주는
리액트의 문법 확장이다.

예를 들어 👇

const element = <h1>Hello, world!</h1>;

사실 내부적으로는 아래 코드로 변환된다.

const element = React.createElement("h1", null, "Hello, world!");

즉, JSX는 가독성을 높이기 위한 문법적 설탕(syntactic sugar) 이다 🍬

⚙️ 4. JSX의 주요 특징

1️⃣ 반드시 하나의 부모 요소로 감싸야 한다

// ❌ 오류
return (
  <h1>Hi</h1>
  <p>Hello</p>
);

// ✅ 올바른 코드
return (
  <div>
    <h1>Hi</h1>
    <p>Hello</p>
  </div>
);

2️⃣ JavaScript 표현식을 `{}`로 감쌀 수 있다

const name = "서인";
return <h1>{name}님, 반가워요!</h1>;

3️⃣ 속성은 camelCase로 작성해야 한다

// HTML
<div class="box"></div>

// JSX
<div className="box"></div>

HTML 속성 JSX 속성 설명

class className class는 JS 예약어라서
for htmlFor for도 JS 예약어라서
onclick onClick camelCase 규칙
tabindex tabIndex camelCase 규칙

4️⃣ 모든 태그는 반드시 닫아야 한다

// ❌ 오류
<img src="cat.png">

// ✅ 올바름
<img src="cat.png" />

5️⃣ JSX는 보안상 안전하다

JSX에 문자열을 넣으면 자동으로 이스케이프 처리(escape) 되어
스크립트 공격(XSS)을 막는다.

const userInput = "<img src=x onerror=alert('해킹!')>";
<div>{userInput}</div> // 단순 문자열로 출력됨

🧠 5. JSX와 리액트의 관계

구분 역할

리액트(React) 컴포넌트를 만들고 렌더링하는 "엔진"
JSX 그 컴포넌트를 보기 좋게 작성하게 도와주는 "문법 도우미"

👉 JSX는 리액트 없이도 쓸 수 없고,
리액트는 JSX 없이도 가능하지만 너무 불편하다.

🧩 6. 간단한 예제

import React from "react";
import ReactDOM from "react-dom/client";

function App() {
  const name = "서인";
  return (
    <div>
      <h1>안녕, {name}!</h1>
      <p>리액트와 JSX를 배우는 중이야 🚀</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

✅ 실행 결과

안녕, 서인!
리액트와 JSX를 배우는 중이야 🚀

🎯 7. 핵심 요약

개념 설명

React UI를 컴포넌트로 관리하는 JS 라이브러리
JSX JS 안에서 HTML처럼 작성할 수 있는 문법
Component 재사용 가능한 UI 단위
State 컴포넌트 안에서 변할 수 있는 데이터
Props 부모 → 자식 간 데이터 전달
특징 하나의 부모 요소, camelCase 속성, 중괄호 표현식

🌱 8. 다음 단계로

이제 리액트 기초를 익혔으니, 다음으로 배워야 할 건 아래 순서야 👇

이벤트 핸들링 (onClick, onChange)
조건부 렌더링 ({조건 && <요소>})
리스트 렌더링 (array.map())
useState / useEffect 훅
컴포넌트 분리 & props 전달

🪴 기억해두자

JSX는 "리액트를 더 직관적으로 작성하기 위한 문법"일 뿐,
결국 전부 자바스크립트로 변환되어 동작한다.