[React] 초급 개념1 - 리액트 기본 개념과 JSX

리액트(React)는 UI를 구성하는 컴포넌트 기반 라이브러리로, 효율적인 렌더링과 상태 관리를 제공하는 강력한 도구입니다. 이 문서에서는 리액트의 기본 개념과 JSX에 대해 설명합니다.

---

 

 

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

리액트는 페이스북(현재 메타)에서 개발한 프론트엔드 라이브러리로, 컴포넌트 기반 개발 방식을 제공합니다.

 

✅ 리액트의 주요 특징

• 컴포넌트 기반: 재사용 가능한 UI 요소로 웹 애플리케이션을 구축
• 가상 DOM(Virtual DOM): 실제 DOM 조작을 최소화하여 성능 최적화
• 단방향 데이터 흐름: 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달
• 선언형 UI: 상태(state)에 따라 자동으로 UI를 갱신

---

 

 

🔸 2. JSX란 무엇인가?

JSX(JavaScript XML)는 JavaScript 내에서 HTML을 작성할 수 있는 문법입니다. 리액트에서는 JSX를 사용하여 UI를 정의합니다.

 

✅ 예제 1: JSX 기본 문법

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

📌 설명:

• <> 안에 HTML과 유사한 문법을 사용할 수 있습니다.
• 실제로는 React.createElement()로 변환됩니다.

---

 

 

🔸 3. JSX의 주요 특징

 

1️⃣ HTML과 유사하지만 JavaScript 표현식 사용 가능

const name = "React";
const element = <h1>Hello, {name}!</h1>;

📌 설명:

• {} 안에 JavaScript 표현식을 사용할 수 있습니다.

 

2️⃣ class 대신 className 사용

const element = <div className="container">Hello</div>;

📌 설명:

• JSX에서는 class가 아닌 className을 사용해야 합니다.

 

3️⃣ 태그는 반드시 닫아야 함

const element = <img src="logo.png" alt="React Logo" />;

📌 설명:

• <img> 같은 태그는 반드시 />로 닫아야 합니다.

---

 

 

🔸 4. JSX를 JavaScript 코드로 변환

JSX는 실제로 아래와 같이 변환됩니다.

 

✅ JSX 코드

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

 

✅ 변환된 JavaScript 코드

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

 

📌 설명:

• JSX는 React.createElement()로 변환되며, 이를 통해 가상 DOM을 생성합니다.

---

 

 

🔸 5. JSX의 장점

✅ 가독성 향상: HTML과 비슷한 문법을 사용하여 직관적인 UI 코드 작성 가능 ✅ 컴포넌트 기반 개발에 최적화: 컴포넌트를 쉽게 조합하고 관리 가능 ✅ 에러 방지: JSX는 컴파일 단계에서 문법 오류를 체크하여 안전한 코드를 유지

---