01 / 14
SESSION 25 · Part 5 웹 개발
React
기초
컴포넌트 · JSX · props · useState — 현대 웹의 표준 라이브러리
02 / 14
💭
왜 React가
등장했을까?
화면이 복잡해질수록 HTML/CSS/JS만으로는 관리가 어려워진다.
하나의 버튼을 바꾸려면 여러 파일을 동시에 손봐야 하는 상황.
Facebook(Meta)이 만든 React는 화면을 컴포넌트라는 작은 조각으로 쪼개서 이 문제를 해결했다.
03 / 14
🎯
이 세션에서
배우는 것
🧱
컴포넌트
화면을 작은 조각으로 쪼개고 재사용하는 React의 핵심 개념
📝
JSX와 props
JS 안에서 HTML처럼 쓰는 문법, 부모-자식 데이터 전달
🔄
useState
변하는 값을 관리하고 화면을 자동 업데이트하는 방법
04 / 14
라이브러리 vs 프레임워크
React는 라이브러리 — 프레임워크보다 작은 단위 도구다.
📚 라이브러리 (React)
필요한 부분에 가져다 쓰는 도구
내가 흐름을 제어한다
자유롭지만 결정할 게 많음
예: React, jQuery
🏗️ 프레임워크
전체 구조와 규칙을 제공
프레임워크가 흐름을 제어
정해진 길을 따르면 빠름
예: Next.js, Angular, Spring
💡 React는 화면 그리는 부분만 담당 — 라우팅, 데이터 fetching 등은 별도 도구를 골라 쓴다.
05 / 14
🧱
컴포넌트 —
화면의 작은 조각
버튼, 카드, 헤더 같은 화면 조각을 함수로 정의하고 여러 곳에서 재사용한다.
// Button 컴포넌트 정의 — 함수가 곧 컴포넌트
function Button() {
return <button>저장</button>;
}
// 사용 — HTML 태그처럼 쓴다
function App() {
return (
<div>
<Button />
<Button />
<Button />
</div>
);
}
💡 한 곳을 고치면 모든 사용처가 함께 바뀐다 — 유지보수의 기본기.
06 / 14
📝
JSX —
JS 안에 HTML 쓰기
React 전용 문법. JavaScript 안에서 HTML처럼 쓸 수 있게 해준다.
// JSX — HTML과 비슷하지만 JS 표현식 활용 가능
function Greeting() {
const name = "홍길동";
const hour = new Date().getHours();
return (
<div className="greeting">
<h1>안녕하세요, {name}님!</h1>
<p>{hour < 12 ? "좋은 아침" : "좋은 오후"}</p>
</div>
);
}
💡 중괄호 {}로 JS 표현식을 끼워넣을 수 있다 — 변수, 계산, 조건 등.
07 / 14
📦
props —
부모가 자식에게 넘기는 데이터
같은 컴포넌트라도 전달받는 값에 따라 다르게 표시된다 — props 덕분이다.
// Button이 text를 prop으로 받음
function Button({ text }) {
return <button>{text}</button>;
}
// 사용 — HTML 속성처럼 값을 전달
function App() {
return (
<div>
<Button text="저장" />
<Button text="취소" />
<Button text="삭제" />
</div>
);
}
💡 props는 읽기 전용 — 자식이 함부로 바꿀 수 없다. 단방향 데이터 흐름의 핵심.
08 / 14
🔄
useState —
변하는 값 관리
컴포넌트 안에서 값이 변하면 화면이 자동으로 다시 그려진다.
// 카운터 — 클릭할 때마다 숫자 증가
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>현재 값: {count}</p>
<button onClick={() => setCount(count + 1)}>
+1
</button>
</div>
);
}
💡 setCount를 호출하면 React가 알아서 화면을 다시 그린다 — DOM을 직접 만질 필요 없음.
09 / 14
useState 사용 패턴
useState 한 줄을 뜯어보면 — React 사고방식의 핵심이 다 들어있다.
1
[현재값, 변경함수] = useState(초기값)
배열 분해로 두 가지를 한 번에 받는다 — 현재 값과 그 값을 바꾸는 함수
2
현재값은 직접 수정 금지
count = count + 1은 안 됨. 반드시 setCount(...)로 변경 함수를 통해야 함
3
변경 함수 호출 → 화면 자동 재렌더링
React가 변경을 감지해 해당 컴포넌트와 자식들을 다시 그림
4
여러 useState 동시 사용 가능
name, email, age 등 각각 useState 한 줄씩 — 자유롭게 조합
10 / 14
⚡
Virtual DOM —
React가 빠른 비결
React는 매번 화면 전체를 다시 그리는 듯 보이지만, 실제로는 바뀐 부분만 업데이트한다.
상태 변경
(setCount)
→
새 Virtual DOM
생성
→
이전과
비교
→
바뀐 부분만
실제 DOM 업데이트
핵심: Virtual DOM은 메모리에 그린 가짜 DOM — 실제 화면 조작보다 훨씬 빠르다.
11 / 14
🧱
컴포넌트는 레고 블록
화면을 한 번에 짓는 대신, 작은 블록을 만들고 조립한다.
🧱 레고 비유
컴포넌트
=
레고 블록 — 버튼·카드·리스트 같은 조각
props
=
블록의 색상·크기 옵션 — 같은 모양 다른 변형
JSX
=
블록 조립 설명서 — 어떻게 끼워 맞출지 표시
useState
=
블록의 상태 변환 스위치 — 켜고 끄면 모양이 바뀜
Virtual DOM
=
조립 시뮬레이터 — 실제 끼우기 전에 머릿속으로 점검
12 / 14
🤖
AI에게 React 컴포넌트 만들게 하기
요청만 잘하면 — 컴포넌트 한 개를 정확하게 받아낼 수 있다.
👤
React로 좋아요 버튼 컴포넌트 만들어줘. 클릭하면 숫자 올라가고 색이 빨개져.
🤖
LikeButton 컴포넌트를 만들었습니다. useState로 count와 liked 상태를 관리하고, onClick에서 둘 다 업데이트합니다. Tailwind로 클릭 시 bg-red-500이 적용되도록 했어요.
👤
props로 초기 카운트도 받게 해줘. TS 타입도 추가하고.
🤖
interface LikeButtonProps에 initialCount: number를 추가하고 useState(initialCount)로 적용했습니다. 부모에서 <LikeButton initialCount={5} />처럼 쓸 수 있어요.
13 / 14
📌
핵심 정리
🧱
컴포넌트
화면을 함수로 쪼갠 조각
재사용 가능
📝
JSX
JS 안에 HTML 쓰는 문법
{} 로 표현식 삽입
📦
props
부모 → 자식 데이터 전달
읽기 전용
🔄
useState
변하는 값 관리
변경 시 자동 재렌더링
⚡
Virtual DOM
메모리상 가짜 DOM
바뀐 부분만 실제 갱신
📚
React = 라이브러리
화면 그리기에 집중
나머지는 자유 선택
14 / 14
🚀
다음 세션
Session 26 · 빌드 도구와 Vite
React 컴포넌트를 작성했다 — 그런데 브라우저는 JSX를 직접 이해하지 못한다.
코드를 브라우저가 실행할 수 있는 형태로 변환·묶어주는 도구 — 빌드 도구와 Vite를 알아본다.
💡 기억할 것: 컴포넌트는 레고 블록이다. 한 블록을 고치면 그 블록이 쓰인 모든 자리가 함께 바뀐다.