리액트 기초 강좌 #1 리액트란 무엇인가?

2026년 5월 2일 토요일

15 분 소요

오늘날 가장 널리 사용되는 자바스크립트 UI 라이브러리, 리액트(React). 페이스북, 인스타그램, 넷플릭스, 에어비앤비... 우리가 매일 쓰는 서비스의 상당수가 리액트로 만들어져 있습니다. 한국 개발자 채용 공고를 둘러봐도 프론트엔드 포지션의 절대 다수가 리액트 경험을 요구합니다.

이 강좌에서는 리액트 입문자를 위하여 리액트가 무엇인지, 왜 만들어졌는지, 그리고 어떤 문제를 해결하는 도구인지에 대해서 공부하도록 하겠습니다.

리액트의 탄생

리액트는 2011년 페이스북의 소프트웨어 엔지니어 조던 워크(Jordan Walke)가 만들어 페이스북의 뉴스 피드 기능에 처음 적용되었고, 2013년에 오픈소스로 공개되었습니다.

당시 페이스북은 점점 복잡해지는 UI를 관리하는 데 어려움을 겪고 있었습니다. 사용자가 댓글을 달면 그 즉시 화면 곳곳의 카운터, 알림 뱃지, 피드의 상태가 모두 일관되게 업데이트되어야 하는데, 기존의 명령형 DOM 조작 방식으로는 이 모든 곳을 빠뜨리지 않고 갱신하기가 매우 까다로웠습니다. 리액트는 바로 이 "복잡한 UI의 일관성을 유지하는 문제"를 해결하기 위해 태어났습니다.

라이브러리인가 프레임워크인가?

흔히 "리액트 프레임워크"라고 부르지만, 엄밀히 말하면 리액트는 UI 라이브러리입니다. 라우팅, 데이터 페칭, 폼 처리 같은 풀스택 기능을 강제하지 않고, 오직 "사용자 인터페이스를 그리는 일"에만 집중합니다.

이 미니멀한 철학 덕분에 리액트는 그 위에서 동작하는 다양한 메타 프레임워크와 도구의 생태계를 만들었습니다. 가장 유명한 것이 Next.js이고, 그 외에도 Remix, Astro, Gatsby 등이 있습니다. 이 강좌가 운영되고 있는 스쿨오브웹 웹사이트도 Next.js 위에서 돌아갑니다.

리액트의 특성

리액트의 핵심 특성을 다섯 가지로 정리해보겠습니다.

1. 컴포넌트 기반 (Component-based)

리액트는 화면을 작은 조각으로 쪼개는 것에서 시작합니다. 버튼, 입력창, 카드, 헤더, 댓글 한 줄... 이 모든 요소를 컴포넌트라는 독립된 단위로 만들고, 이들을 레고 블록처럼 조합해서 하나의 화면을 완성합니다. 같은 컴포넌트를 여러 곳에서 재사용할 수 있고, 각 컴포넌트는 자신의 동작과 모양에만 책임을 지면 됩니다.

2. 선언형 (Declarative)

기존 자바스크립트로 UI를 만들 때는 "어떻게(How)" 화면을 바꿀지를 단계별로 명령했습니다. 리액트는 반대로 "무엇을(What)" 보여줄지만 선언하면, 화면을 그렇게 만드는 일은 리액트가 알아서 처리합니다. 코드가 훨씬 간결해지고 의도가 명확해집니다.

간단한 예로, "버튼을 클릭하면 카운터가 1 증가한다"라는 기능을 만든다고 해봅시다. 순수 자바스크립트로는 다음과 같이 작성합니다.

vanilla.js

let count = 0;
const button = document.querySelector('#btn');
const display = document.querySelector('#count');
 
button.addEventListener('click', () => {
  count += 1;
  display.textContent = count;
});

같은 기능을 리액트로는 이렇게 작성합니다.

App.jsx

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

DOM을 직접 조작하지 않습니다. count라는 상태가 바뀌면 리액트가 알아서 화면의 해당 부분을 갱신해줍니다. 화면이 어떻게 바뀌어야 하는지를 일일이 명령하지 않고, 어떤 모습이어야 하는지만 선언하는 것 — 이것이 선언형의 의미입니다.

3. 가상 DOM (Virtual DOM)

리액트가 빠르게 동작할 수 있는 비결입니다. 실제 브라우저의 DOM은 직접 조작할 때마다 비용이 큽니다. 리액트는 자바스크립트 객체로 만든 가상 DOM을 메모리 안에 두고, 변경이 일어나면 새 가상 DOM과 이전 가상 DOM을 비교해서 정말로 바뀐 부분만 실제 DOM에 반영합니다. 개발자는 이 과정을 신경쓸 필요 없이, 바뀐 상태만 선언하면 됩니다.

4. 단방향 데이터 흐름 (One-way data flow)

리액트에서 데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로 한 방향으로만 흐릅니다. 자식이 부모의 데이터를 마음대로 바꿀 수 없고, 부모가 명시적으로 전달한 함수를 통해서만 변경 의사를 알릴 수 있습니다. 예측 가능한 흐름 덕분에 디버깅이 쉽고, 큰 애플리케이션에서도 데이터의 출처를 추적하기 쉽습니다.

5. 거대한 생태계

리액트의 가장 큰 강점 중 하나는 풍부한 주변 생태계입니다. 라우팅(React Router, Next.js), 상태 관리(Redux, Zustand, Jotai), 서버 통신(TanStack Query, SWR), UI 키트(MUI, Chakra UI, shadcn/ui)... 어떤 문제든 이미 만들어진 도구가 있고, 활발한 커뮤니티가 늘 새로운 답을 만들어내고 있습니다.

리액트로 무엇을 만들 수 있나?

리액트는 단순한 웹사이트부터 거대한 SaaS 서비스까지 거의 모든 종류의 사용자 인터페이스를 만들 수 있습니다.

싱글 페이지 앱(SPA): 페이지 전환 없이 동작하는 동적인 웹 애플리케이션. 페이스북, 트위터, 인스타그램의 웹 버전이 대표적인 예입니다.
기업용 대시보드: 데이터가 실시간으로 변하는 복잡한 관리자 화면. 리액트의 컴포넌트 모델이 가장 빛을 발하는 분야입니다.
콘텐츠 사이트와 블로그: Next.js와 같은 메타 프레임워크를 사용하면, 검색엔진에 잘 노출되는 정적 사이트와 블로그도 리액트로 만들 수 있습니다. 지금 보고 계시는 이 사이트가 그 예입니다.
모바일 앱: 리액트 네이티브(React Native)를 사용하면 같은 사고방식과 비슷한 코드로 iOS, Android 앱을 만들 수 있습니다.
데스크탑 앱: Electron과 결합하면 윈도우, 맥, 리눅스용 데스크탑 애플리케이션도 만들 수 있습니다. VS Code, Slack, Notion이 모두 이런 방식으로 만들어졌습니다.

리액트, Vue, 앵귤러... 어떤 차이가 있나?

리액트의 가장 큰 경쟁자는 Vue.js와 앵귤러(Angular)입니다.

앵귤러는 라우팅, 폼, 통신, 의존성 주입까지 모든 것이 포함된 풀패키지 프레임워크입니다. 큰 조직의 엔터프라이즈 프로젝트에서 강점을 발휘합니다.
Vue는 리액트와 앵귤러의 중간쯤에 있습니다. 진입 장벽이 낮고 문서가 친절해서 입문자에게 인기가 많습니다.
리액트는 가장 미니멀합니다. 라이브러리만 두고 나머지는 개발자(혹은 메타 프레임워크)가 선택합니다. 그래서 자유롭지만, 처음에는 무엇을 어떻게 골라야 할지 결정이 많아 어렵게 느껴질 수 있습니다.

세 도구 모두 훌륭하지만, 한국과 글로벌 시장 모두에서 채용 수요와 학습 자료의 양이 가장 많은 것은 단연 리액트입니다.

팁

리액트를 배우면 Vue나 앵귤러로 넘어가기도 비교적 수월합니다. 컴포넌트 기반, 선언형 UI라는 큰 사고방식이 비슷하기 때문입니다. 첫 도구로 무엇을 고를지 너무 오래 고민하지 마세요. 일단 시작하면 됩니다.