[10주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 45

React란?

한 줄 정의

UI(화면)를 컴포넌트 단위로 만드는 JavaScript 라이브러리

핵심 특징

• 컴포넌트 기반
• 상태(state) 관리
• 가상 DOM (빠른 렌더링)

---

React 구조 핵심 (진짜 중요)

functionApp() {
return<h1>Hello React</h1>;
}

exportdefaultApp;

• function = 컴포넌트
• return 안 = 화면(UI)
• HTML처럼 보이지만 JSX 문법

---

JSX란?

JavaScript 안에서 HTML처럼 UI를 작성하는 문법

---

JSX 기본 문법

1. HTML처럼 작성

constelement=<h1>Hello JSX</h1>;

---

2. 반드시 하나의 부모 요소

// ❌ 오류
return (
<h1>제목</h1>
<p>내용</p>
);

// ✅ 정상
return (
<div>
<h1>제목</h1>
<p>내용</p>
</div>
);

또는

<>
<h1>제목</h1>
<p>내용</p>
</>

이걸 Fragment라고 함

---

3. JS 코드 사용 → {}

constname="정현";

return<h1>Hello {name}</h1>;

---

4. 조건문 (중요)

constisLogin=true;

return (
<div>
    {isLogin?<p>로그인됨</p>:<p>로그인 필요</p>}
</div>
);

---

5. 반복문 (map)

constitems= ["사과","바나나","포도"];

return (
<ul>
    {items.map((item,index) => (
<likey={index}>{item}</li>
    ))}
</ul>
);

key 필수 (실무 핵심 포인트)

---

6. 스타일 적용

return<divstyle={{ color:"red", fontSize:"20px" }}>텍스트</div>;

camelCase 사용

---

7. class → className

return<divclassName="box">내용</div>;

---

4. 컴포넌트 개념 (React의 핵심)

컴포넌트 만들기

functionHeader() {
return<h1>헤더</h1>;
}

사용하기

functionApp() {
return (
<div>
<Header/>
</div>
  );
}

태그처럼 사용하는 게 핵심

---

5. props (데이터 전달)

functionUser(props) {
return<p>{props.name}</p>;
}

사용:

<Username="정현"/>

결과: 정현

---

더 많이 쓰는 방식 (구조분해)

functionUser({ name }) {
return<p>{name}</p>;
}

---

6. state (상태 관리)

화면이 바뀌는 핵심

import {useState }from"react";

functionCounter() {
const [count,setCount]=useState(0);

return (
<div>
<p>{count}</p>
<buttononClick={() =>setCount(count+1)}>증가</button>
</div>
  );
}

---

7. 이벤트 처리

<buttononClick={() =>alert("클릭!")}>
  클릭
</button>

HTML과 다르게 onClick은 camelCase

---

8. React + JSX 흐름 (중요 정리)

실제 동작 구조

JSX → JavaScript → React.createElement → Virtual DOM → 화면

---

핵심 요약

백엔드 하는 입장에서 중요 포인트만 압축

• JSX = HTML처럼 UI 작성
• {} = JS 코드 실행
• 컴포넌트 = 재사용 단위
• props = 데이터 전달
• state = 화면 변경
• map = 리스트 렌더링
• key = 필수