React란? 핵심 개념과 jQuery의 차이점

React는 사용자 인터페이스(UI, User Interface)를 만드는 JavaScript 라이브러리입니다. jQuery가 화면 요소를 선택해 직접 변경하는 작업에 초점을 둔다면, React는 데이터의 상태에 따라 어떤 화면을 보여 줄지 정의하는 방식에 초점을 둡니다. 컴포넌트와 상태의 관계를 이해하면 두 도구의 차이와 도입 조건을 판단하기 쉽습니다.

React란 무엇인가요?

React에서는 버튼, 검색창, 게시글 카드 같은 화면 요소를 컴포넌트(component)라는 구성 단위로 만듭니다. 각 컴포넌트에는 화면 구조와 관련 동작을 함께 담고, 여러 컴포넌트를 조합해 페이지를 구성합니다. 같은 게시글 카드에 서로 다른 제목과 작성자를 전달하면 목록에서 반복 사용할 수 있습니다.

React는 JavaScript를 바탕으로 사용하며, 웹 화면의 구조와 모양에는 HTML과 CSS 지식이 계속 필요합니다. React만 설치한다고 로그인 서버, 데이터베이스, URL별 페이지 이동까지 모두 생기는 것은 아닙니다. 필요한 서버 기능과 다른 도구를 함께 구성해야 하며, 이 글은 브라우저에서 동작하는 기본 화면에 초점을 둡니다. 기본 구성은 React 공식 입문 문서에서 확인할 수 있습니다.

React의 핵심 개념

컴포넌트: 화면과 관련 동작을 묶는 단위

함수 컴포넌트는 화면에 표시할 내용을 반환하는 JavaScript 함수입니다. 직접 정의하는 컴포넌트 이름은 ProductCard처럼 대문자로 시작하고, HTML의 button 같은 요소는 소문자로 씁니다. 아래 예제에서는 카드의 구조를 한 번 정의하고 상품별 데이터를 전달하는 방식으로 재사용할 수 있습니다.

function ProductCard({ name, price }) {
  return (
    <article className="product-card">
      <h3>{name}</h3>
      <p>{price}원</p>
    </article>
  );
}

JSX: JavaScript 안에서 화면 구조 표현하기

JSX는 JavaScript 파일에서 HTML과 비슷한 마크업을 작성하는 문법 확장입니다. 위 코드의 <article> 부분이 JSX이며, 중괄호 안에는 name이나 price 같은 JavaScript 표현식을 넣습니다. 일반 HTML 파일에 이 코드를 그대로 붙여 넣는 것만으로 React 컴포넌트가 실행되지는 않습니다.

JSX는 class 대신 className을 쓰고, <img />처럼 태그를 명시적으로 닫습니다. 여러 최상위 요소를 반환할 때는 하나의 부모 요소나 Fragment로 묶습니다. JSX는 React를 쓰는 유일한 방법은 아니지만 입문 예제와 일반적인 프로젝트에서 자주 사용합니다. 구체적인 문법은 React의 JSX 작성 규칙에 나와 있습니다.

props: 부모가 전달하는 데이터

props(properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값입니다. 상품 카드의 제목·가격이나 버튼의 라벨처럼 같은 구조에 다른 내용을 넣을 때 사용하며, 문자열뿐 아니라 숫자·객체·함수도 전달할 수 있습니다.

<ProductCard name="입문용 키보드" price={35000} />

자식 컴포넌트는 전달받은 props를 읽어서 화면을 구성합니다. props를 직접 수정하기보다 부모의 데이터가 바뀌어 새 값이 전달되도록 설계합니다. 사용자의 동작을 부모에 알릴 때는 콜백 함수를 전달하는 방법을 사용할 수 있습니다. props 전달과 읽기는 컴포넌트 사이의 데이터 흐름을 설명합니다.

state: 바뀌는 값을 기억하고 화면에 반영하기

state는 입력값, 선택 항목, 클릭 횟수처럼 컴포넌트가 기억해야 하는 상태입니다. useState를 호출하면 현재 값과 그 값을 변경할 함수가 반환됩니다. 여기서 useState는 React의 기능을 사용하는 Hook이며, 컴포넌트 함수의 최상위에서 호출합니다.

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

초기 값은 0, 현재 상태는 count, 변경 함수는 setCount입니다. 일반 변수만 바꾸면 React에 화면을 갱신할 상태 변경을 알리는 효과가 없으므로, 화면에 연결된 값은 알맞은 상태로 관리해야 합니다. 기본 원리는 컴포넌트의 상태와 일반 변수의 차이를 참고하세요.

React는 화면을 어떻게 갱신하나요?

버튼으로 카운터를 올리는 경우에는 사용자의 클릭이 상태 변경을 요청하고, React가 새 상태에 맞는 화면을 계산한 뒤 필요한 변경을 DOM에 반영합니다. DOM(Document Object Model)은 브라우저가 문서를 요소와 텍스트 등의 객체 구조로 표현한 것입니다.

1. 사용자 동작: 버튼을 누르면 이벤트 처리 함수가 실행됩니다.
2. 상태 변경 요청: setCount로 다음 값을 지정합니다.
3. 렌더링: React가 컴포넌트를 호출해 표시할 결과를 계산합니다.
4. 커밋: 이전 결과와 달라진 부분에 필요한 DOM 변경을 적용합니다.
5. 화면 표시: 브라우저가 결과를 그립니다.

React에서 렌더링은 컴포넌트를 호출해 결과를 계산하는 과정입니다. 페이지 전체를 새로고침하거나 모든 HTML 요소를 삭제했다가 만드는 것과 같지 않으며, 렌더링 결과가 같으면 DOM 변경이 필요하지 않을 수 있습니다. 과정의 구분은 React의 렌더링과 커밋 설명에 근거합니다.

상태는 setCount 호출 직후 같은 함수 안의 변수 값을 즉시 바꾸는 방식으로 이해하면 혼동하기 쉽습니다. 변경 함수는 다음 렌더링에 사용할 상태를 요청하며 React는 여러 업데이트를 묶어서 처리할 수 있습니다. 이전 값을 기준으로 증가시킬 때는 아래처럼 함수형 업데이트를 쓰면 계산 의도가 명확합니다.

setCount(previousCount => previousCount + 1);

이 함수는 이전 상태를 받아 다음 상태를 반환합니다. 이벤트 처리 함수 안에서 같은 증가 요청을 여러 번 하거나 업데이트가 겹치는 상황에서도 이전 값에 대한 계산을 표현할 수 있습니다. 자세한 동작과 제한은 useState의 업데이트 함수 설명에서 확인할 수 있습니다.

React와 jQuery의 차이점

jQuery도 JavaScript 라이브러리입니다. 선택자로 요소를 찾고, 이벤트를 연결하고, 내용·스타일·표시 여부를 변경하거나 Ajax 요청을 처리하는 기능을 제공합니다. Ajax는 페이지 전체를 새로고침하지 않고 서버와 데이터를 주고받는 방식입니다. jQuery 공식 소개는 DOM 조작과 이벤트 처리 등을 주요 기능으로 설명합니다.

예를 들어 상품을 장바구니에 추가하면 jQuery 코드에서는 목록에 항목을 넣고 수량·합계·빈 목록 안내도 각각 맞춰야 합니다. React에서는 장바구니 상태를 기준으로 각 표시를 정의할 수 있습니다. 어느 방식이든 서버 응답, 오류 처리와 잘못된 데이터의 검증까지 자동으로 해결되지는 않습니다.

React가 항상 더 빠르다거나 jQuery 코드가 항상 관리하기 어렵다고 단정할 수는 없습니다. 화면 크기, 구현 방식, 로딩할 코드와 사용자 동작에 따라 결과가 달라집니다. 작은 기능 하나와 여러 화면의 상태를 동기화하는 작업은 관리 부담이 다르므로 같은 기준으로 선택하지 않는 편이 좋습니다.

같은 기능을 jQuery와 React로 구현해 보기

두 예제는 클릭 횟수가 0에서 시작하고 버튼을 누를 때마다 1씩 증가합니다. 제목은 구현 도구를 구분하기 위해 다르게 표시합니다. 기능과 표시 결과를 맞춰 놓고 숫자를 갱신하는 코드의 위치를 비교하세요. 아래 예제는 React 19.3.0, jQuery 4.0.0, Vite 8.3.4, Node.js 24.19.0과 Microsoft Edge 154에서 클릭·키보드 조작 및 새로고침 동작을 확인한 구성입니다.

jQuery 예제: 선택한 요소의 텍스트 변경

아래 전체 코드를 UTF-8 형식의 jquery-counter.html로 저장하고 브라우저로 엽니다. 공식 CDN(Content Delivery Network, 콘텐츠 전송 네트워크)에서 jQuery 4.0.0을 불러오므로 인터넷 연결이 필요합니다. 버전과 파일은 jQuery 공식 배포 목록에서 확인할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery 카운터</title>
  <style>
body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 "Malgun Gothic", sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
  </style>
</head>
<body>
  <main class="counter">
    <h1>jQuery 카운터</h1>
    <p>클릭 횟수: <span id="count" aria-live="polite">0</span></p>
    <button type="button" id="increase">1 증가</button>
  </main>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
    let count = 0;

    $('#increase').on('click', function () {
      count += 1;
      $('#count').text(count);
    });
  </script>
</body>
</html>

$("#increase")로 버튼을 선택하고 .on("click", ...)으로 클릭 처리를 연결합니다. 숫자를 바꾼 뒤 $("#count").text(count)를 호출해야 표시된 텍스트가 바뀝니다. 이벤트 연결과 텍스트 변경은 각각 jQuery .on() 문서와 jQuery .text() 문서에 설명되어 있습니다.

스크립트를 버튼 뒤에 두었으므로 이 예제에서는 실행할 때 대상 요소가 이미 만들어져 있습니다. 화면이 그대로라면 개발자 도구에서 CDN 요청과 콘솔 오류를 확인하고 id 철자도 비교하세요. 워드프레스 테마의 기존 스크립트에 적용할 때는 라이브러리를 중복 로드하지 말고, jQuery noConflict 설정으로 $가 jQuery를 가리키는지도 확인해야 합니다.

React 예제: 상태를 바꾸어 화면 갱신

학습용 React 예제는 Vite의 JavaScript React 템플릿을 사용합니다. Vite는 개발 서버와 소스 변환·빌드를 제공하는 도구이며, Node.js는 이 도구를 컴퓨터에서 실행하는 환경입니다. npm은 패키지를 설치하고 실행하는 도구입니다. Vite 시작 안내의 Node.js 요구 버전을 충족하는 지원 중인 LTS 버전을 준비하세요. 이 글의 확인 시점인 2026년 10월에는 안내에 20.19+ 또는 22.12+가 명시되어 있으며, 실제 템플릿의 추가 요구 조건도 확인해야 합니다.

1. 새 프로젝트를 둘 폴더에서 터미널을 엽니다. 같은 이름의 기존 폴더가 없는지 확인합니다.
2. 아래 명령으로 프로젝트를 생성하고 패키지를 설치합니다. 템플릿은 JavaScript용 react를 지정합니다.

npm create vite@latest react-counter -- --template react --no-interactive
cd react-counter
npm install

최초 실행에서는 npm이 생성 도구 설치를 확인할 수 있습니다. 설치 후 src/App.jsx 내용을 다음 코드로 바꿉니다. label은 부모가 전달하는 props, count는 컴포넌트가 기억하는 state입니다.

import { useState } from 'react';

function Counter({ label }) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(previousCount => previousCount + 1);
  }

  return (
    <main className="counter">
      <h1>{label}</h1>
      <p>클릭 횟수: <span aria-live="polite">{count}</span></p>
      <button type="button" onClick={handleClick}>1 증가</button>
    </main>
  );
}

export default function App() {
  return <Counter label="React 카운터" />;
}

src/main.jsx에는 다음 진입 코드를 사용합니다. createRoot가 HTML의 root 요소에 React 화면을 연결하고, index.css가 화면 모양을 정합니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

src/index.css 내용을 아래 CSS로 교체하면 jQuery 예제와 같은 모양으로 비교할 수 있습니다. App.jsx에서는 별도의 App.css를 불러오지 않으므로 템플릿의 기본 스타일이 예제에 추가되지 않습니다.

body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 "Malgun Gothic", sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }

프로젝트 루트의 index.html에는 <div id="root"></div>와 src/main.jsx를 불러오는 모듈 스크립트가 있어야 합니다. Vite 템플릿이 생성한 구조를 유지하고 문서의 lang만 ko로 바꿔 한국어 화면임을 표시합니다. 이어서 다음 명령을 실행합니다.

npm run dev

터미널에 표시된 Local 주소를 브라우저로 엽니다. 보통 http://localhost:5173이지만 포트가 사용 중이면 다른 주소가 표시될 수 있습니다. 개발 서버는 터미널에서 Ctrl+C로 종료합니다. 수정이 반영되지 않으면 파일 저장 여부와 프로젝트 폴더를 확인하고, JSX 오류는 터미널 또는 브라우저의 오류 표시에서 확인하세요.

React 코드에는 숫자를 표시하는 요소를 선택해 텍스트를 교체하는 호출이 없습니다. {count}로 상태와 표시를 연결하고 setCount로 변경을 요청합니다. 개발용 StrictMode가 일부 함수를 추가 호출해 문제를 찾더라도 순수한 업데이트 함수로 작성한 이 카운터는 한 번 클릭할 때 1씩 증가해야 합니다.

각 예제에서 버튼을 세 번 누르면 클릭 횟수가 3이 됩니다. 새로고침하면 두 예제 모두 메모리의 상태가 다시 초기화되어 0으로 돌아갑니다. 이 코드는 서버나 브라우저 저장소에 횟수를 저장하는 기능을 포함하지 않습니다. 같은 기능을 두 방식으로 구현한 예제이지 실행 속도 비교 시험은 아닙니다.

어떤 상황에서 React 또는 jQuery가 적합할까요?

기존 페이지의 작은 기능을 추가할 때

이미 운영 중인 HTML 페이지에 메뉴 열기, 특정 영역 접기, 간단한 입력 처리 등을 추가하고 기존 프로젝트가 jQuery를 사용한다면 그 구조를 유지하는 편이 작업 범위를 줄일 수 있습니다. 기본 DOM API만으로 충분한 기능인지도 함께 판단하세요. 단순한 작업을 위해 새로운 도구를 무조건 추가할 필요는 없습니다.

여러 상태가 연결된 화면을 만들 때

상품 목록·선택 조건·장바구니 합계처럼 같은 데이터가 여러 곳에 연결되거나 비슷한 화면을 반복해서 만드는 경우에는 React의 컴포넌트와 상태 중심 구조를 검토할 수 있습니다. 다만 상태를 어느 컴포넌트가 소유할지, 서버 데이터는 언제 갱신할지 등을 설계해야 하며 React를 도입했다는 사실만으로 좋은 구조가 보장되지는 않습니다.

기존 사이트에 React를 부분적으로 도입할 때

React를 쓰기 위해 기존 사이트 전체를 다시 만들 필요는 없습니다. 특정 요소 안에만 React 컴포넌트를 연결하고 나머지 페이지를 기존 방식으로 유지할 수 있습니다. 가능 범위와 준비 과정은 기존 프로젝트에 React를 추가하는 공식 안내에서 확인할 수 있습니다.

React와 jQuery를 같은 페이지에서 사용하는 경우에는 DOM을 관리하는 범위를 구분하세요. jQuery가 React가 생성·관리하는 자식을 임의로 추가·삭제하면 React의 상태와 실제 화면이 어긋날 수 있습니다. 직접 DOM을 조작하는 플러그인이 필요하면 해당 영역의 수명과 정리 작업을 React에서 관리하도록 연동 방식을 설계해야 합니다. 이러한 제한은 React가 관리하는 DOM 변경에 관한 안내에 설명되어 있습니다.

도입 전에는 화면의 상태 복잡도, 재사용할 구성 요소, 팀의 JavaScript 경험과 개발·배포 환경을 함께 확인하세요. 기존 jQuery 의존성이 있는 작은 페이지와 새로운 대화형 서비스 화면은 조건이 다릅니다. HTML·CSS·JavaScript의 기본을 익힌 뒤 위 카운터를 직접 실행해 보면 요소를 직접 변경하는 방식과 상태로 화면을 정의하는 방식의 차이를 구체적으로 비교할 수 있습니다.