Framework · 2013년 공개

React

React는 화면을 컴포넌트 단위로 나눠 선언적으로 만드는 JavaScript UI 라이브러리로, 상태가 바뀌면 필요한 부분만 다시 그립니다.

React는 Meta(당시 Facebook)가 만들어 2013년에 오픈 소스로 공개한 사용자 인터페이스 라이브러리입니다. 화면을 컴포넌트라는 작은 함수 단위로 나누고, 각 컴포넌트가 받은 props와 자신의 상태(state)에 따라 어떤 모습이어야 하는지를 JSX로 선언합니다. 데이터가 바뀌면 React가 이전 결과와 비교해 실제로 달라진 부분만 DOM에 반영합니다.

React는 버튼, 입력 폼, 목록처럼 상호작용이 많은 화면에서 특히 힘을 발휘합니다. 단일 페이지 애플리케이션, 대시보드, 관리 화면, 사내 디자인 시스템에 널리 쓰이며, Next.js 같은 프레임워크와 함께 서버 렌더링 웹사이트를 만들거나 React Native로 모바일 앱을 만들 때도 같은 사고방식을 그대로 씁니다. 라우팅, 데이터 요청, 테스트 도구 등 생태계가 넓어 필요한 부품을 골라 조합할 수 있습니다.

처음 배운다면 react.dev 공식 문서의 빠르게 시작하기와 틱택토 튜토리얼을 따라 해 보는 것을 권합니다. 공식 문서는 새 제품에 Next.js 같은 프레임워크를 권하지만, 학습용으로는 Vite로 만든 단순한 프로젝트가 구조를 이해하기 쉽습니다. 배열 메서드, 구조 분해, 모듈 같은 최신 JavaScript 문법을 먼저 익혀 두면 JSX와 훅을 훨씬 수월하게 이해할 수 있습니다.

특징

컴포넌트 기반 설계

화면을 독립적인 함수 컴포넌트로 나누고, props로 데이터를 넘기며 작은 부품을 조합해 큰 화면을 만듭니다.

선언적 UI와 JSX

DOM을 직접 바꾸는 대신 상태에 따른 결과 화면을 JSX로 적으면, React가 바뀐 부분만 효율적으로 갱신합니다.

훅으로 다루는 상태와 효과

useState, useEffect, useRef, useContext 같은 훅으로 상태, 부수 효과, DOM 참조, 공유 데이터를 함수 안에서 다룹니다.

넓은 생태계

Next.js, React Router, TanStack Query, React Native 등 검증된 도구와 함께 웹부터 모바일까지 같은 방식으로 개발할 수 있습니다.

이런 곳에 씁니다

단일 페이지 애플리케이션(SPA)
대시보드와 관리 화면
디자인 시스템과 재사용 UI 컴포넌트
Next.js · React Native와 함께 만드는 웹 · 모바일 앱

설치하기

1
Node.js 준비
React 개발 도구는 Node.js 위에서 동작합니다. nodejs.org에서 LTS 버전을 설치한 뒤 node와 npm의 버전이 표시되는지 확인합니다.
```
node --version && npm --version
```
2
Vite로 프로젝트 만들기
Vite의 react-ts 템플릿으로 TypeScript를 쓰는 React 프로젝트를 만듭니다. JavaScript만 쓰려면 템플릿 이름을 react로 바꿉니다.
```
npm create vite@latest my-app -- --template react-ts
```
3
개발 서버 실행
프로젝트 폴더로 이동해 의존성을 설치하고 개발 서버를 실행합니다. 터미널에 표시된 주소(기본 http://localhost:5173)를 브라우저에서 엽니다.
```
cd my-app && npm install && npm run dev
```

첫 프로그램

첫 컴포넌트

src/App.tsx의 App 함수는 화면에 그릴 내용을 JSX로 반환하는 컴포넌트입니다. useState 훅으로 count 상태를 만들고, 버튼을 누르면 setCount가 값을 바꿉니다. 상태가 바뀌면 React가 App을 다시 호출해 달라진 숫자만 화면에 반영합니다. 개발 서버가 켜져 있으면 파일을 저장할 때마다 브라우저가 곧바로 갱신됩니다.

src/App.tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Hello, React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run dev

자주 쓰는 도구

Vite: 빠른 개발 서버와 프로덕션 빌드를 제공하는 프런트엔드 빌드 도구입니다. React 프로젝트 템플릿을 공식으로 제공합니다.
React Developer Tools: 브라우저 확장 프로그램으로, 컴포넌트 트리와 각 컴포넌트의 props · 상태를 살펴보고 렌더링 성능을 측정합니다.
ESLint: 코드 검사 도구입니다. eslint-plugin-react-hooks로 훅 사용 규칙과 의존성 배열 실수를 잡아냅니다.
Vitest: Vite 설정을 그대로 쓰는 테스트 도구입니다. React Testing Library와 함께 컴포넌트를 사용자 관점에서 검사합니다.

단계별 안내서

설치부터 React 의 핵심 개념까지, 여섯 장으로 차근차근 따라 합니다.

공식 문서 · 참고 자료

쓰는 언어

토론

토론 시작하기

React 에 관해 묻고, 경험을 나누고, 의견을 주고받는 곳입니다.

아직 토론이 없습니다. 첫 이야기를 시작해 보세요.

특징