React란 무엇인가? 비개발자를 위한 쉬운 가이드

React는 사용자가 보고 클릭하는 앱의 화면 부분, 즉 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. 버튼, 상품 카드, 페이지 전체 같은 재사용 가능한 조각인 컴포넌트를 쌓아 화면을 만들며, React는 데이터와 화면을 항상 동기화합니다. 데이터가 바뀌면 그 데이터에 의존하는 부분의 화면을 React가 업데이트합니다. Facebook(현재 Meta)에서 만들었으며 오픈 소스이고, 가장 널리 쓰이는 웹 앱 개발 방식 중 하나입니다.

AI로 만들 때 React가 중요한 이유

AI 도구로 웹 앱을 만들고 있다면 아마 React로 작성되어 있을 가능성이 높습니다. 많은 AI 앱 빌더가 React를 기본으로 사용하는데, 인기가 많고 문서가 잘 되어 있으며, AI 모델이 배울 수 있는 React 코드가 방대하기 때문입니다.

AI로 만들기 위해 React를 직접 쓸 줄 알 필요는 없습니다. 하지만 조금 알면 다음에 도움이 됩니다.

• 변경을 정확히 설명하기. "ProductCard 컴포넌트에서 가격을 굵게 해 주세요"가 "어딘가에서 가격을 돋보이게 해 주세요"보다 명확합니다.
• 오류 이해하기. "Cannot read properties of undefined" 또는 "Too many re-renders" 같은 메시지가 더 잘 이해됩니다.
• 합리적인 선택하기. 평범한 React 앱은 브라우저에서 렌더링되며, 이는 검색 노출과 첫 로딩 속도에 영향을 줍니다. 이를 알면 다른 구성을 요청할 시점을 판단할 수 있습니다.
• 나중에 개발자와 협업하기. React는 흔한 기술이어서, 개발자가 React 코드베이스를 쉽게 이어받을 수 있습니다.

일상적인 비유

레고를 생각해 보세요. 한 덩어리 블록을 깎아서 전체 모형을 만드는 대신, 표준 블록을 조립해서 만듭니다. 몇 개의 블록으로 바퀴를 만들고, 바퀴 네 개와 다른 부품을 더하면 자동차가 됩니다. 모든 자동차의 바퀴를 빨간색으로 하고 싶다면 바퀴 디자인을 한 번만 바꾸면 됩니다.

React의 컴포넌트가 바로 그 블록입니다. Button 컴포넌트는 ProductCard 안에서 쓰이고, ProductCard는 ProductGrid 안에서 쓰이며, ProductGrid는 ShopPage의 일부입니다. Button을 한 번 바꾸면 앱의 모든 버튼이 바뀝니다.

비유의 나머지 절반은 이것입니다. 설명서를 바꿀 때마다 레고 모형이 스스로 다시 조립되는 상상을 해 보세요. 그것이 React의 또 다른 장점입니다. 여러분은 현재 데이터에 맞춰 화면이 어떻게 보여야 하는지를 기술하고, React가 페이지에서 무엇을 바꿔야 하는지를 알아냅니다.

핵심 개념

컴포넌트

컴포넌트는 인터페이스 조각을 반환하는 JavaScript 함수입니다. React 문서는 컴포넌트를 자체 로직과 모습을 가진 UI의 한 조각이라고 설명합니다. 컴포넌트 이름은 대문자로 시작합니다.

JSX

컴포넌트는 보통 JSX로 작성합니다. JSX는 JavaScript 안에 HTML을 섞은 것처럼 생겼습니다.

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX는 필수는 아니지만, React 문서에 따르면 대부분의 프로젝트가 사용합니다. 브라우저에서 실행되기 전에 평범한 JavaScript로 변환됩니다.

Props

Props는 컴포넌트에 전달하는 입력값으로, 재사용 가능한 부품의 설정값과 같습니다.

<ProductCard name="Lavender Candle" price={24} />

같은 ProductCard가 어떤 상품이든 보여줄 수 있습니다.

State

State는 컴포넌트가 기억하는 정보로, 앱이 실행되는 동안 바뀔 수 있습니다. 메뉴가 열려 있는지, 검색창에 무엇이 입력되었는지, 장바구니에 몇 개가 담겼는지 같은 것입니다. state가 바뀌면 React가 컴포넌트를 다시 렌더링해서 화면을 맞춥니다.

Hooks

Hook은 이름이 use로 시작하는 함수로, useState(값을 기억함)나 useEffect(렌더링 후 코드를 실행함, 예를 들어 데이터를 가져올 때)처럼 쓰입니다. AI가 생성한 React 코드 어디에서나 볼 수 있습니다.

실제 예시: 장바구니 카운터

온라인 쇼핑몰에 "장바구니에 담기" 버튼이 있고, 담긴 상품 수를 보여주는 장바구니 아이콘이 있다고 해봅시다. React로는 대략 이렇게 작성합니다.

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

쇼핑객이 "장바구니에 담기"를 클릭하면 이런 일이 일어납니다.

1. 버튼의 onClick이 onAdd를 호출하고, onAdd는 setCartCount를 호출합니다.
2. React가 cartCount state를 0에서 1로 바꿉니다.
3. React가 Shop을 다시 렌더링하면서 count={1}을 CartIcon에 전달합니다.
4. 페이지에 "Cart (1)"이 표시됩니다. "장바구니 텍스트를 찾아서 바꿔라"라고 적은 코드는 없었습니다. 화면이 데이터를 따라갈 뿐입니다.

한계도 있습니다. 이 개수는 브라우저의 메모리에 있습니다. 페이지를 새로고침하면 0으로 돌아갑니다. 장바구니를 유지하려면 쿠키, 브라우저 저장소, 또는 백엔드를 거치는 데이터베이스 같은 영구 저장소에 저장해야 합니다. React는 화면을 담당할 뿐, 데이터를 저장하지는 않습니다.

React가 웹 앱에서 차지하는 자리

"Vite + React" 앱은 브라우저에서 렌더링됩니다(싱글 페이지 앱). Next.js 앱은 서버에서 먼저 페이지를 렌더링할 수 있어서, 검색 엔진과 첫 로딩 속도에 도움이 됩니다.

흔한 용어 설명

흔한 실수와 오해

• "React는 프로그래밍 언어다." 아닙니다. JavaScript(또는 TypeScript)로 작성되고 그 안에서 사용하는 라이브러리입니다.
• "React가 내 데이터를 저장한다." State는 브라우저에 있고 새로고침하면 사라집니다. 영구적인 데이터는 백엔드와 데이터베이스가 필요합니다.
• React 코드에 비밀 정보 넣기. React 앱의 모든 것은 방문자의 브라우저로 전송됩니다. 그곳에 있는 API 키는 공개된 것과 같습니다. 키는 서버에 두세요.
• "React 앱은 검색에 노출될 수 없다." 브라우저에서만 그리는 방식은 검색에 불리하지만, 사전 렌더링이나 서버 렌더링으로 대부분 해결됩니다.
• 거대한 컴포넌트. 1,000줄짜리 컴포넌트 하나는 사람이든 AI든 안전하게 바꾸기 어렵습니다. 더 작은 컴포넌트로 나눠 달라고 요청하세요.
• React 웹 앱을 휴대폰 앱으로 착각하기. 휴대폰을 포함해 브라우저에서 실행되지만, 앱 스토어에 있는 앱은 아닙니다.

AI 빌더에게 요청할 것

• "이 페이지를 작은 이름 있는 컴포넌트로 나누고, 각 컴포넌트가 어느 파일에 있는지 알려 주세요."
• "ProductCard 컴포넌트를 재사용할 수 있게 만들고, name, price, image를 props로 받게 해 주세요."
• "새로고침해도 장바구니가 유지되도록 데이터베이스에 저장해 주세요."
• "모든 API 키는 서버에 두세요. React 코드는 우리 자체 API를 호출해야 합니다."
• "서버에서 오는 데이터에 로딩 상태와 오류 상태를 추가해 주세요."
• "이 페이지들의 검색 노출이 중요하다면 사전 렌더링하거나 서버 렌더링 방식을 사용해 주세요."
• "이 오류가 무엇을 뜻하는지, 어느 컴포넌트에서 나왔는지 쉬운 말로 설명해 주세요."

더 큰 그림은 프론트엔드와 백엔드를 참고하세요. AI가 작성한 코드를 검토하려면 AI가 생성한 코드를 검토하는 법을 참고하세요.

Mythex의 React

별도로 요청하지 않으면 Mythex는 새 프로젝트를 Vite + React + TypeScript + Tailwind로 시작하며, 채팅 중에는 실시간 미리보기가 실행됩니다. 첫 프롬프트에서 다른 구성을 지정할 수 있습니다. 예를 들어 "Next.js를 사용해 주세요" 또는 "순수 정적 HTML 랜딩 페이지"라고 쓰면, Mythex가 작성한 내용을 보고 그 구성을 고릅니다. 이를 설정하는 화면은 없습니다. 기술 선택 방식 문서 페이지에서 옵션을 설명합니다. 코드 편집기는 무료 요금제에서는 읽기 전용입니다. Pro 요금제에서는 React 코드를 직접 편집하고, 다른 곳에서 계속 작업할 수 있도록 프로젝트를 내보낼 수 있습니다.

자주 묻는 질문