리액트

리액트(React)는 웹 화면을 작은 부품(컴포넌트)으로 나눠 만들고 조립하는 자바스크립트 도구예요. 레고 블록 하나하나를 만들어 두면 같은 블록을 여러 번 끼워 집을 짓듯, 버튼·카드·메뉴판을 한 번 만들어 계속 다시 써요.

글 서순명(솔리드그루 이사 · 퓨쳐인프라 운영) · 2026-10-29 작성 · 예시 코드는 2026-10-29 Windows 11 · Node v24.15.0 · react 19.2.8 에서 직접 실행

리액트는 어떻게 동작하나요?

리액트에서 화면 조각 하나는 자바스크립트 함수 하나예요. 함수가 "이 자리에 이런 모양을 그려라"라는 결과를 돌려주면, 리액트가 그걸 진짜 웹 화면으로 바꿔요. 이 함수를 컴포넌트라고 불러요.

컴포넌트에는 기억해 둘 값을 붙일 수 있어요. 이걸 상태(state)라고 해요. 장바구니 개수 같은 상태가 바뀌면 리액트가 그 컴포넌트를 다시 그려요. 화면을 직접 하나하나 고치지 않아도 된다는 점이 핵심이에요.

JSX는 꼭 써야 하는 건 아니지만 대부분의 리액트 프로젝트가 편해서 쓴다고 공식 문서에 나와요(React 빠른 시작).

직접 해 보면 어떻게 나오나요?

2026-10-29 Windows 11 PC에서 Node v24.15.0과 이 PC에 이미 깔려 있던 react 19.2.8로 직접 실행했어요. 새로 내려받은 건 없어요. 메뉴판 컴포넌트를 HTML 글자로 바꿔 찍어 본 결과예요.

$ cat react_demo.cjs
const React = require("react");
const { renderToString } = require("react-dom/server");
const h = React.createElement;
function MenuItem({ name, price, soldOut }) {
  return h("li", null, name, " ", price.toLocaleString("ko-KR"), "원", soldOut ? " (품절)" : "");
}
function Menu({ items }) {
  return h("ul", null, items.map((it) => h(MenuItem, { key: it.name, ...it })));
}
const items = [{ name: "아메리카노", price: 4000 }, { name: "라떼", price: 4500, soldOut: true }];
console.log("React", React.version);
console.log(renderToString(h(Menu, { items })));
items[0].price = 4200;
console.log(renderToString(h(Menu, { items })));

$ node react_demo.cjs
React 19.2.8
<ul><li>아메리카노<!-- --> <!-- -->4,000<!-- -->원</li><li>라떼<!-- --> <!-- -->4,500<!-- -->원<!-- --> (품절)</li></ul>
<ul><li>아메리카노<!-- --> <!-- -->4,200<!-- -->원</li><li>라떼<!-- --> <!-- -->4,500<!-- -->원<!-- --> (품절)</li></ul>

• MenuItem 부품 하나를 만들어 두고 메뉴 두 개에 똑같이 썼어요. 라떼에만 품절 표시가 붙었어요.
• 아메리카노 가격만 4,000원에서 4,200원으로 바꿨더니, 결과에서도 그 숫자만 달라졌어요. 화면 코드는 한 줄도 안 고쳤어요.
• 중간의 <!-- --> 는 글자 조각 사이를 구분하려고 리액트가 넣은 주석이에요. 브라우저 화면에는 안 보여요.

위 코드는 JSX 없이 쓴 판이에요. AI가 실제로 짜 주는 코드는 아래처럼 JSX 모양이에요. 이 PC에 있던 TypeScript 5.9.3 변환기(tsc)로 바꾼 뒤 같은 react 19.2.8로 돌렸더니 결과가 똑같았어요.

$ cat Menu.jsx
function MenuItem({ name, price, soldOut }) {
  return <li>{name} {price.toLocaleString("ko-KR")}원{soldOut && " (품절)"}</li>;
}
export function Menu({ items }) {
  return <ul>{items.map((it) => <MenuItem key={it.name} {...it} />)}</ul>;
}

$ node run_jsx.cjs
<ul><li>아메리카노<!-- --> <!-- -->4,000<!-- -->원</li><li>라떼<!-- --> <!-- -->4,500<!-- -->원<!-- --> (품절)</li></ul>

리액트와 Next.js는 뭐가 달라요?

리액트는 화면 부품을 만드는 도구예요. 페이지 주소 나누기, 데이터 불러오기, 서버 실행까지 묶은 건 프레임워크라고 해요. 공식 문서는 새 앱을 프레임워크로 시작하라고 권해요(React 앱 만들기).

예전 글을 보고 AI가 create-react-app 으로 시작하려 하면 "Next.js나 Vite로 만들어 줘"라고 바꿔 주세요. 공식 블로그가 2025년 2월에 이 도구의 지원 중단을 알렸어요(React 블로그).

누가 만들었고, 지금 버전은 뭐예요?

리액트는 페이스북(지금의 메타)에서 만들어 2013년 5월 29일에 처음 공개했어요(React 버전 기록). 2026년 2월 24일부터는 리눅스 재단 아래의 React Foundation이 리액트를 맡고 있어요. 메타, 마이크로소프트, 아마존, 버셀 등이 창립 회원이에요.

2026-10-29 기준 최신판은 19.3(2026-09-09)이에요. 위 실험은 19.2.8로 했어요. 2025년 12월에는 서버 컴포넌트 기능의 보안 취약점 공지가 두 번 올라왔어요. 리액트 앱을 운영한다면 공식 블로그 공지를 보고 버전을 올려 두는 게 안전해요.

자주 하는 오해와 주의할 점

• "리액트는 새로운 언어다" — 리액트 코드는 결국 자바스크립트예요. 오류 메시지도 자바스크립트 오류로 나와요.
• "리액트만 있으면 회원가입·결제까지 된다" — 리액트는 화면 담당이에요. 데이터 저장과 로그인은 서버(Node.js 등)와 데이터베이스가 맡아요.
• 화면 코드에 비밀값 넣기 — 리액트 화면 코드는 사용자 브라우저로 내려가서 누구나 열어 볼 수 있어요. API 키는 서버 쪽 환경변수에 두세요.
• 컴포넌트 하나에 다 몰기 — 한 파일에 수백 줄이 쌓이면 AI도 엉뚱한 곳을 고쳐요. "이 화면을 작은 컴포넌트로 나눠 줘"라고 정리를 부탁하세요.

바이브코딩으로 웹앱을 만들면 리액트 코드를 자주 만나요. 어떤 도구가 리액트 앱을 만들어 주는지는 바이브코딩 툴 비교에, 내 PC에서 고치고 돌려 보는 법은 클로드 코드 사용법에 있어요.

퓨쳐인프라에서는 어떻게 올리나요?

Next.js처럼 서버까지 있는 리액트 앱은 도커 이미지 하나로 앱 호스팅에 올리면 주소와 HTTPS가 붙어요. 앱 하나를 켜 두면 월 5,500원(부가세 포함)이에요.

회원 정보나 주문을 저장해야 하면 데이터베이스(MariaDB·MySQL·PostgreSQL·Redis 중 선택)를 월 2,200원에 붙일 수 있어요. 접속 정보는 앱 환경변수로 자동으로 들어가서 직접 옮겨 적지 않아도 돼요. 내 도메인을 연결하면 HTTPS 인증서도 함께 붙어요.

자주 묻는 질문

리액트 네이티브(React Native)는 리액트와 같은 거예요?

같은 방식(컴포넌트·JSX)으로 스마트폰 앱을 만드는 형제 도구예요. 리액트는 웹 화면, 리액트 네이티브는 안드로이드·iOS 화면을 그려요. 공식 문서가 권하는 Expo 가 리액트 네이티브 위에서 돌아가요.

리액트를 배우려면 자바스크립트를 먼저 알아야 해요?

직접 짠다면 기본 문법은 알아야 해요. AI에게 맡긴다면 컴포넌트·props·상태 세 단어만 알아도 원하는 수정을 정확히 부탁할 수 있어요.

리액트는 무료예요?

네, 무료 오픈소스예요. 회사 서비스에 써도 돈을 내지 않아요. 비용은 리액트가 아니라 앱을 올려 둘 서버·호스팅에서 생겨요.

리액트 말고 비슷한 도구가 있어요?

Vue, Svelte, Angular 처럼 화면을 부품으로 만드는 도구가 여럿 있어요. 생각하는 방식은 비슷해서 하나를 이해하면 다른 것도 금방 읽혀요.

관련 용어

• 자바스크립트 — 리액트 코드가 쓰이는 바탕 언어
• Node.js — 리액트 앱을 만들고 서버를 돌리는 실행 환경
• 프론트엔드 — 리액트가 맡는 화면 쪽 일
• 풀스택 — Next.js처럼 화면과 서버를 함께 다루는 방식
• 배포 — 만든 리액트 앱을 인터넷에 올리는 일