나무모에 미러 (일반/밝은 화면)
최근 수정 시각 : 2025-10-02 09:59:39

React(라이브러리)



웹 프레임워크 라이브러리
{{{#!wiki style="margin:0 -10px"
{{{#!folding [ 펼치기 / 접기 ]
{{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all"
$ 유료 포함 • 취소선 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드
CSS BootstrapTailwind CSS$shadcnBulmaFoundationSkeletonPico
JSX ReactSolidJSAstroRemixPreactGatsbyInfernoQwik
JS AngularSvelteBackbone.jsjQueryAstrohtmxEmber.jsLit11tyMarkoVanJSAlpine.js
Vue Vue.jsQuasarAstroVuePressGridsome
Python Reflex
백엔드
Java SpringStrutsGWTGrailsJoobyPlay! FrameworkScala
Kotlin Ktor
JS ExpressNestJSkoaHonofastify
.NET ASP.NET$
PHP LaravelCodeigniterReasonablephalconSymfonyzendCakePHPFuelPHPYiiSlimPHPixe
Python DjangoFlaskFastAPIBottle
Ruby Ruby on RailsSinatra
Go GinechoFiber
풀스택
JSX Next.jsAstroSolidStartRemixQwik City
JS SvelteKitFreshAstroMarko
Vue NuxtAstro
Java Vaadin$
Python StreamlitReflex
Rust RocketActixLeptosAxum
하이브리드
.NET Blazor
Dart Flutter
Kotlin Kotlin Multiplatform
}}}}}}}}} ||
{{{#!wiki style="margin: -10px -10px"<tablealign=center><tablewidth=320><tablebordercolor=white,#1f2023> 파일:React 로고.svg파일:React 로고 밝은버전.svgReact }}}
<colcolor=#087ea4,#58C4DC> 종류 라이브러리
라이선스 MIT 라이선스
개발 메타 플랫폼즈
언어 JavaScript, TypeScript
출시 2013년 5월 29일
버전 19.2.0 (2025. 10. 1. 업데이트)
파일:홈페이지 아이콘.svg 파일:GitHub 아이콘.svg파일:GitHub 아이콘 화이트.svg 파일:Bluesky 아이콘.svg 파일:페이스북 아이콘.svg

1. 개요2. 상세3. 버전 목록
3.1. 19.0
3.1.1. 19.13.1.2. 19.2
4. 예시
4.1. 해설4.2. React가 있고 없고의 차이점
5. Virtual DOM6. JSX7. 개발 환경 만들기8. React Native9. React Router10. React를 사용하는 웹사이트/프로그램11. 논란 및 사건사고
11.1. Suspense 미리 렌더링 방지 버그
12. 여담


1. 개요


2013년 5월에 메타 플랫폼즈에서 개발되어 출시된 오픈 소스 JavaScript 라이브러리. 과거에는 React.js와 혼용되었으나, 시간이 지날수록 .js를 뺀 React로 더 많이 통용되는 추세.

2. 상세

웹 프론트엔드 개발자 사이에서 Vue.js, Angular, Next.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수와 npm 패키지 다운로드 수는 React가 가장 많다.

SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는 게 가능하다. 기본적으로 '컴포넌트' 개념의 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 함수들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리 잡았다. 이와 더불어 인터프리터 프로그래밍 언어TypeScript스타일시트 언어Sass 같은 언어도 지원한다. 또한, 2015년에 Vue.js, 2016년에 Angular, Next.js 등 웹 프론트엔드 프레임워크의 등장으로 인해 SSG, SSR 등을 할 수 있게 되면서 사용 범위 또한 기하급수적으로 늘어났다.

3. 버전 목록

3.1. 19.0

2024년 12월 5일, React 19 정식 버전이 발표되었으며, 아래 기능이 추가되었다.

이 중에 서버 컴포넌트와 폼 양식 관련된 기능은 Next.js 에서 13.2 버전부터 점진적으로 추가되어 바로 실무에서도 사용이 가능하다.
서버 컴포넌트 등의 서버 기능은 Next.js 처럼 프레임워크 및 라이브러리에서 지원하거나 직접 서버 단에서 구현하여 사용 가능하다.

3.1.1. 19.1

2025년 3월 28일, 19.1 버전이 출시되었으며 아래 기능이 적용되었다.

기타 향상점 및 React DOM, React native 기능 향상은 공식 릴리즈 문서를 확인한다.

3.1.2. 19.2

2025년 10월 1일, 19.2 버전이 출시되었으며 아래 기능이 적용되었다.

이 외 개선되거나 수정된 사항은 공식 블로그를 확인한다.

4. 예시

함수 문법(권장)
#!syntax javascript
import ReactDOM from 'react-dom';

function App ({name}){
  return (
    <h1>Hello, {name}!</h1>
  )
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));

클래스 문법(클라이언트상 오류 디버깅 용도 외 비권장)
[ 펼치기 / 접기 ]
#!syntax javascript
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    )
  }
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));

해당 코드는 최신 브라우저에서 막 지원하기 시작한 import문과, JS 표준 문법이 아닌 JSX를 사용했기 때문에 이 코드가 그대로 브라우저상에 작동되는 것은 아니다. Babel을 통해 대부분의 브라우저가 사용할 수 있는 JS 코드로 변환한 후 사용할 수 있다.

4.1. 해설

#!syntax javascript
function App ({ name }) {
  return (
    <h1>Hello, {name}!</h1>
  );
}
({ name })은, JavaScript 또는 TypeScript에서 사용할 수 있는 destructuring(구조 분해 할당)이라는 문법을 사용한 부분이다. 즉, App이라는 함수의 첫 번째 인자의 name이라는 속성을 name이라는 변수에 할당한 것이다.

또한 Return 뒤에 HTML 태그처럼 보이는 것이 나오는데, 이는 JSX로 Virtual DOM(React Element)을 생성하는 부분이다. 풀어 쓰면 다음과 같다. JSX가 일반적인 함수 호출로 변경되었다.

#!syntax javascript
import { jsx } from "react/jsx-runtime";

function App(props) {
  const name = props.name;
  return jsx("h1", {
    children: ["Hello, ", name, "!"]
  });
}

4.2. React가 있고 없고의 차이점

#!syntax xml
<header>
  <h1>Logo</h1>
</header>
<nav>
 <ul>
  <li>
    <a href="#">메뉴1</a>
  </li>
  <li>
    <a href="#">메뉴2</a>
  </li>
 </ul>
</nav>
<section>
  <p>Hello World!</p>
</section>

#!syntax javascript
const Hlogo = () => {
  return (
    <header>
      <h1>Logo</h1>
    </header>
  );
};

const Anav = () => {
  return (
    <nav>
      <ul>
        <li>
          <a href="#">메뉴1</a>
        </li>
        <li>
          <a href="#">메뉴2</a>
        </li>
      </ul>
    </nav>
  );
};

const Bsection = ({ amumal }) => {
  return (
    <section>
      <p>{amumal}</p>
    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <Hlogo />
      <Anav />
      <Bsection amumal="Hello World!" />
    </div>
  );
};

export default App;


(위에서 보는 것처럼 컴포넌트 클래스 값은 대문자로 시작되어야 한다.)

위와 같이 '컴포넌트(부품)'로 나누어서 정리가 가능하다. 이렇게 코드가 짧을 때에는 별로 의미가 없지만 한 페이지의 코드가 길 때에는 코드를 나누어 담을 수 있어서 유용하다. 나무위키로 비유하면 본문 문서의 내용는 달라도, 상단바나 사이드에 해당하는 내용들은 컴포넌트로 만들어서 재사용이 가능하다.

또한 각 컴포넌트들은 js 파일로 만들어서 공유가 가능하기 때문에 이미 만들어진 컴포넌트들을 조립하여 웹 페이지를 만들 수 있어서 가능성이 무궁무진해진다.

참고로 메타 플랫폼즈에서는 크롬 개발자 도구를 이용해서 리액트로 만들고 있는 페이지의 리액트 컴포넌트들을 볼 수 있는 툴을 제공하고 있다.

5. Virtual DOM

Virtual DOM의 작동 방식을 비유적으로 설명한 영상(영어)

서버와의 데이터 통신과는 별개로 DOM을 직접적으로 조작해야 하는 기존의 웹 화면 개발 방식과 달리, React는 DOM을 직접적으로 조작하지 않고 데이터가 변화할 때 변경 사항이 적용된 Virtual DOM을 만든다. 그 다음 실제 DOM과 Virtual DOM의 차이점을 비교하고, 변경된 부분을 실제 DOM에 적용한다.

보이는 데이터의 잦은 변경이 필요한 웹 앱의 경우 이러한 방식을 통해 성능을 크게 향상시킬 수 있다. 실제 동적인 웹일수록 Angular 등과 비교해서 성능이 훨씬 더 빠른 편이다. 단, 데이터가 자주 변경되지 않는 비교적 정적인 웹 페이지에 이를 적용할 경우 오히려 성능 면에서 손해를 볼 수 있다.

5.1. 상태 관리 라이브러리

상태 관리의 용이성과 성능 최적화를 위해 상태 관리 라이브러리를 사용할 수 있다. React와 사용 가능한 것들 중 대표적인 것들은 다음과 같다.

6. JSX

#!syntax javascript
const element = <h1>Hello, world!</h1>;

JavaScript XML

React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML 같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.

HTML과 매우 흡사하긴 하지만, XML을 기반으로 한 데다 Javascript 내부에서 사용하다 보니 불가피하게 생긴 차이점이 몇 가지 있다.
이 JSX 위주의 프론트엔드 라이브러리로는 Preact, SolidJS, Inferno 등이 있으며, Vue.js 등의 자체적인 포맷을 사용하거나 Svelte 같이 JSX 사용과 거리가 먼 라이브러리 및 프레임워크 또한 JSX를 사용할 수 있는 방법이 존재한다.

어도비Photoshop, After Effects등의 프로그램에서 쓰이는 스크립트의 확장자명도 jsx이지만 이 jsx와는 자바스크립트라는 것 이외의 관련이 없다.

7. 개발 환경 만들기

2015년 2월에 React에서 공식적으로 create-react-app 지원 중단을 선언했다. 계속 사용할 수는 있지만 더 이상의 변경은 없다고 밝혔다. 따라서, 앞으로 create-react-app 패키지를 통한 신규 프로젝트 생성은 권장하지 않는다. 공식에서는 아래와 같이 각 프레임워크별(Next.js, Expo, RedwoodJS, TanStack) 설치 방법을 안내하고 있다.

7.1. Next.js

공식 가이드에서는 웹 프론트엔드 프레임워크인 Next.js, Expo, RedwoodJS, TanStack, 라이브러리인 React Router, CLI 방식의 개발 도구인 Vite를 사용해서 시작하기를 권장하고 있는데, 이 중 대표격인 Next.js 설치 방법을 안내한다.
npx create-next-app@latest

===# npx #===Node.js를 설치해서 npm이 함께 설치되게 한 다음에 프로젝트를 만들 폴더의 터미널에서
npx create-react-app .
을 입력한다. (점까지 모두 입력되어야 한다.)


만일 다른 이름으로 프로젝트를 만들고자 한다면
npx create-react-app [Project name]
을 입력한다.


참고로 npx를 이용한 설치는 npm -g 처럼 노드 환경을 사용하는 pc 자체에 깔리는 것이 아니고 node module이 설치된 프로젝트 내부에만 설치되는 것도 아니다. create-react-app은 처음 프로젝트를 생성할 때만 필요하고 그 이후에는 있을 필요가 없기 때문에 npx를 사용해 1회성으로 설치 후 자동 삭제 된다. npm 5버전 이상부터는 npx가 자동으로 지원된다. 그렇지 못한 경우에는 다음과 같이 npx를 설치할 수 있다.
npm install npx -g


참고로 자바스크립트가 아닌 타입스크립트를 사용하려면
npx create-react-app . --template typescript
를 입력하면 된다.

npm start
를 터미널에서 입력하면 리액트가 실행된다. 실행을 종료하고 싶다면 Ctrl+C를 터미널에서 누르면 된다.

실행되면 리액트 폴더의 src/app.js 파일을 통해 페이지 수정을 하고, 자동으로 실행되는 웹 브라우저에서 확인이 가능하다.

npm run build
를 입력하면 리액트 폴더의 내용물이 압축되어 웹상에 올리기 적합한 형태로 build 폴더 안에 생성된다.

serve -s build
를 입력한다면 build 폴더의 내용물을 볼 수 있는 서버가 생성된다. 중지는 Ctrl+C를 통해 할 수 있다.

===# yarn #===Node.js를 설치해서 npm이 함께 설치되게 한 다음에 프로젝트를 만들 폴더의 터미널에서
npm i -g yarn 
을 입력한다. (Yarn 설치)

yarn create react-app .
을 입력한다. (점까지 모두 입력되어야 한다.)


만일 다른 이름으로 프로젝트를 만들고자 한다면
yarn create react-app [Project name]
을 입력한다.

참고로 yarn를 이용한 설치는 npm -g 처럼 노드 환경을 사용하는 pc 자체에 깔리는 것이 아니고 node module이 설치된 프로젝트 내부에만 설치되는 것도 아니다. create-react-app은 처음 프로젝트를 생성할 때만 필요하고 그 이후에는 있을 필요가 없기 때문에 yarn를 사용해 1회성으로 설치 후 자동 삭제 된다.

참고로 자바스크립트가 아닌 타입스크립트를 사용하려면
yarn create react-app . --template typescript
를 입력하면 된다.

yarn start
를 터미널에서 입력하면 리액트가 실행된다. 실행을 종료하고 싶다면 Ctrl+C를 터미널에서 누르면 된다.

실행되면 리액트 폴더의 src/app.js 파일을 통해 페이지 수정을 하고, 자동으로 실행되는 웹 브라우저에서 확인이 가능하다.

yarn build
를 입력하면 리액트 폴더의 내용물이 압축되어 웹상에 올리기 적합한 형태로 build 폴더 안에 생성된다.

serve -s build
를 입력한다면 build 폴더의 내용물을 볼 수 있는 서버가 생성된다. 중지는 Ctrl+C를 통해 할 수 있다.

8. React Native

파일:상세 내용 아이콘.svg   자세한 내용은 React Native 문서
#!if (문단 == null) == (앵커 == null)
를
#!if 문단 != null & 앵커 == null
의 [[React Native#s-|]]번 문단을
#!if 문단 == null & 앵커 != null
의 [[React Native#|]] 부분을
참고하십시오.

9. React Router

||<table width=400> 파일:React_Router_Logo_Light.png || 파일:React_Router_Logo_Dark.png ||
라이트 버전 로고 다크 버전 로고


2014년 2월에 개발되고 2015년 11월 11일에 정식 출시된 React 호환 라우터용 라이브러리. Michael Jackson과 Ryan Florence가 공동 개발자로 알려져 있다.

React의 파급력이 워낙 컸기 때문인지 React와 호환되는 파생 라이브러리들이 나왔는데, 그 중에서도 React 호환 라우팅용 라이브러리로써는 React Router가 주류였다. 한때 Reach Router 라이브러리와 경쟁 관계였으나, 2021년 11월 4일에 발표된 6.0 버전부터 Reach Router가 React Router로 흡수 및 통합되었다. 한편, 2020년에 React Router 말고도 웹 프레임워크도 개발하기 시작했는데, 2021년 11월 22일에 발표된 Remix가 그것.

2024년 11월 22일에 발표된 7.0.0 버전부터 Remix 웹 프레임워크에 있던 기능들이 대거 반영되었는데, 이때부터 라이브러리 뿐만 아니라 프레임워크 용도로도 사용 가능한 하이브리드 형태로 크게 변경되었다. React Router와 Remix가 서로 같은 개발 주체였기에 가능했던 일. Remix 공식 웹 사이트에서는 Remix 프로젝트를 React Router로 마이그레이션 할 것을 권장하고 있다.

10. React를 사용하는 웹사이트/프로그램

11. 논란 및 사건사고

11.1. Suspense 미리 렌더링 방지 버그

Next.js 에서 앞서 지원하는 서버 컴포넌트 등의 일련의 추가 기능 이후로 React의 활동에서 Vercel의 활동이 많은 것 자체를 일각에서 우려를 표하고 있다. 특히, SPA 앱 위주의 개발자들 입장에서는 Next.js 관련 커밋이 일반적인 React 앱을 고려하지 않는다는 비판이 일부 나오고 있는데, 최근 React 19 출시에 앞서 한 커밋을 기점으로 Vercel 기여에 대한 논란에 불이 타오르기 시작했다.
이 커밋의 요지는 <Suspense> 컴포넌트 내 자식을 미리 렌더링하지 않도록 하는 조치인데, 서버 컴포넌트에서는 그대로 수행하지만, SPA 상에서는 자식 컴포넌트들이 순서대로 렌더링하는 현상을 React 인기 비동기 라이브러리인 Tanstack Query 개발자가 발견하여[8] SPA 개발자 입장에서는 당혹스럽거나 분노하는 반응이 상당했다. 결국 React 팀은 별도의 이슈를 만들어 커뮤니티의 의견을 수렴하고 있으며, 해당 커밋에 대한 개선 사항이 나올 때까지 React 19 출시를 보류한다고 밝혔다.

다행히도 이슈 발생 이후 다음 RC에서 <Suspense>와 전체 컴포넌트 렌더링 방식을 수정하여, SPA의 경우 SSR 과 는 달리 선처리를 기본으로 렌더링하던 매커니즘이 본의아니게 Vercel 기여에 의해 커뮤니티에 발견되어 이를 후처리로 수정하였다. 이로 인해 컴포넌트는 <Suspense> 컴포넌트 틀만 렌더링 후 모든 컴포넌트를 렌더링한 다음 fallback 렌더링 후 본문 컴포넌트 완료 시 본문 컴포넌트가 렌더링되도록 개선하여 SPA 환경에서의 순차적으로 렌더링하는 문제를 해결하였다. 이 덕분에 원만하게 React 19 정식 버전을 출시할 수 있었다.

12. 여담


[1] RFC부터 RC 버전까지는[2] 하지만 커뮤니티에서는 이 기능으로 인해 추가된 스로틀링 300ms 제약에 대한 불만이 제기되고 있다.[3] xml 문법[4] 이 부분이 의외로 큰 차이가 있는 게, 객체의 프로퍼티를 읽을 때 Optional chaining을 사용해서 객체 a의 프로퍼티 b를 a?.b로 안전하게 불러올 수 있다. 해당 기능이 지원되지 않는 AngularVue.js는 a && a.b 같이 상위 객체의 null 여부를 일일이 검증해야 한다.[SPA] 기존 SPA 프로젝트를 원한 경우 권장한다.[SPA] [7] 업데이트 시 뜨는 알림창과 오픈 소스 라이선스 열람으로 알 수 있다[8] 관련 블로그 글 링크[9] BSD 라이선스 자체는 문제가 없다. 괜히 상당량의 오픈 소스가 BSD 아니면 MIT인 게 아니다.