React(라이브러리)

{{{#!wiki style="margin: -10px -10px"		<tablealign=center><tablewidth=320><tablebordercolor=white,#1f2023>	React	}}}
<colcolor=#087ea4,#58C4DC> 종류	라이브러리
라이선스	MIT 라이선스
개발	React Foundation
언어	JavaScript, TypeScript
출시	2013년 5월 29일
버전	19.2.0 (2025. 10. 1. 업데이트)

1. 개요

2. 상세

3. 버전 목록

• 0.3.0: 2013년 5월 29일
• 0.4.0: 2013년 7월 17일
• 0.5.0: 2013년 10월 16일
• 0.8.0: 2013년 12월 20일
• 0.9.0: 2014년 2월 20일
• 0.10.0: 2014년 3월 21일
• 0.11.0: 2014년 7월 17일
• 0.12.0: 2014년 10월 28일
• 0.13.0: 2015년 3월 10일
• 0.14.0: 2015년 10월 7일
• 15.0.0: 2016년 4월 7일
• 16.0.0: 2017년 9월 26일
• 17.0.0: 2020년 10월 20일
• 18.0.0: 2022년 3월 29일
• 19.0.0: 2024년 12월 5일

3.1. 19.0

• 비동기 대응 가능한 유틸리티 훅 함수 추가 (useTransition, useActionState)
• <form> 태그는 자체 Context를 가지며, useFormStatus 훅을 통해 인접한 <form> 양식 상태를 가져올 수 있다.
• 서버 컴포넌트와 서버 함수[1]서버 액션이었으나 19 공식 출시 후는 서버 함수로 명명하였다.]을 통해 서버로부터 값을 불러오거나 변경하는 추상적 기능 추가
• useOptimistic 훅 함수를 통한 낙관적 상태 관리 지원
• 비동기와 컨텍스트(useContext) 자원을 가져올 수 있는 신규 Hook, use 훅 추가
• 자원 미리 불러오기(resource preloading)
• ref 는 이제 일반 속성이 되어 useRef 훅이 불필요하며, 콜백 작성 시 useEffect 처럼 정리 함수 반환 가능.
• createContext 로 만든 컨텍스트 자체가 이제 Provider 역할을 하게 됨(소비는 useContext 및 use 훅 사용)
• 초기화를 제외한 재렌더링 시 상태를 관리할 수 있는 지연 상태 관리 훅 useDeferredValue 추가
• <meta> 태그 직접 지원
• CSS 관련 태그 직접 지원(<style> 태그를 컴포넌트 안에 넣을 수 있다.)
• <script async> 태그와 속성 조합으로 비동기 스크립트 지원, react가 스크립트 자원 관리.
• 사용자 정의 태그(웹 컴포넌트 표준 포함) 지원
• 향상된 오류 보고

3.1.1. 19.1

• captureOwnerStack() API가 추가되어 개발자가 개발하면서 디버깅이 어려운 약점이었던 스택 추적을 컴포넌트 단위로 제공하여 개발이 용이해지게 되었다. 특히 컴포넌트 라이브러리 개발자가 컴포넌트에 오류를 전달할 때 사용자에게 더 친절해진 스택 추적 출력 기능을 제공하게 되었다. 이 기능은 운영 환경에서 적용되지 않는다.
• <Suspense /> 컴포넌트 사용 경계가 완화되어 클라이언트, 서버, 하이드레이션 무관하게 일관된 성능을 보장한다.[2]
• useEffect 훅 함수 사용 오류 발생에 대한 오류 내용이 친절해졌다. useEffect() 처럼 인자 없이 호출하거나, 2번째 인자의 종속성에 null, undefined 상수가 포함될 경우 개발 상에서 경고 콘솔이 출력된다.
• useId() 훅 결과에서 임의의 문자 앞뒤에 콜론(예: :r123:)을 감쌌는데, 이게 React 19 이후로 <style> 태그 지원과 상반된 CSS 선택자 활용 제약에 따른 커뮤니티 불만이 속출하여, 유니코드 문자로 변경되었다(예: «r123»)
• 서버 컴포넌트 성능이 향상되었으며, 미리 렌더링과 스트리밍 구현이 쉬워졌고, 하이드레이션 간 컴포넌트 경계가 명확해졌다. 단, 미리 렌더링을 지원하는 API(unstable_prerender)는 현재 실험 단계이다.

3.1.2. 19.2

• <Activity /> 컴포넌트 추가를 통해 기존 렌더링 여부를 묻되, 상태를 후순위로 관리하여 렌더링이 되지 않아도 상태가 유지할 수 있도록 하는 기능이 정식 안정화되었다.
• useEffectEvent 훅 함수를 통해 상태 변경에 구애받지 않고 useEffect 훅 등에 별도 이벤트 호출 시 종속성 상태에 맞게 작동하는 로직 편의성 훅이 정식 안정화되었다.
• cacheSignal 서버 컴포넌트 함수를 통해 서버 컴포넌트 내에서 React 렌더링이 성공 및 오류 등으로 완료됐을 때 진행중인 업무 처리를 중단하는 신호를 보낼 수 있게 되었다.
• 개발자 도구 성능 탭에 React 성능을 추가하여 렌더링 성능 측정이 용이해졌다. 현재 크롬 계열 개발자 도구가 지원된다.
• SSR, SSG 부분 미리 렌더링 기능이 지원된다. 렌더링 중에도 필요한 업무 처리 후 렌더링을 재개할 수 있어서 서버 처리가 유연해졌다.
• SSR 처리를 순차 처리에서 한꺼번에 처리하는 방식으로 변경되어(Batch) <Suspense /> 컴포넌트 렌더링 성능 향상과 다음에 나올 <ViewTransition /> 컴포넌트의 SSR 대응 기회를 확보하였다.
• Node.js 서버 환경을 위한 스트리밍 렌더링 기능을 제공한다.
• useId 훅 함수의 결과가 유니코드 꺽쇠에서 언더바(_)로 감싸도록 변경되었다. 이는 XML 속성 대응을 위한 변경 사항이다. 예: _r1_

4. 예시

4.1. 함수 문법 (React 18 이후)

#!syntax javascript
import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

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

root.render(<App name="홍길동" />);

#!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'));

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

• 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>

• React가 있을 때

#!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;

5. Virtual DOM

5.1. 상태 관리 라이브러리

• Redux
• Recoil - React와 마찬가지로 메타 플랫폼즈에서 개발한 라이브러리이다. React 전용이다.
• Jotai - Jotai는 React를 위한 원자적(atomic) 접근 방식의 경량화된 상태 관리 라이브러리로, React의 useState와 유사한 API를 제공하면서도 전역 상태 관리와 자동 최적화된 렌더링을 지원한다.
• Zustand
• MobX

6. JSX

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

• HTML요소에 class값을 정의할 때, 원래 HTML에서는 <p class="container"></p>과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용한다.
• 마찬가지 이유로 루프문 예약어와 겹치는 for은 htmlFor로 사용한다.
• 또한 요소에서 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜 표기법으로 표기해야 한다.
• 기존의 HTML에서 주석은 <!-- COMMENT -->이렇게 했었지만 JSX에서는 {/*주석*/} 으로 표현한다.
• HTML Custom-Element는 <my-element>와 같이 표기했지만 React의 Custom Element는 <MyElement />와 같이 Pascal Case로 표기한다. 닫는 태그에는 꼭 명시적으로 /> 표기를 해준다. [3]
• JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다. {console.log(this.props)} 같은 식이다.[4]

6.1. 간단한 작동 원리

#!syntax javascript
function App ({ name }) {
  return (
    <h1>Hello, {name}!</h1>
  );
}

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

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

7. 개발 환경 만들기

• Next.js: npx create-next-app@latest
• Remix: npx create-remix 2024년 11월에 출시된 버전 7.0부터 React Router와 통합될 예정이므로 후술할 React Router 사용을 공식 추천하고 있다.
• React Router[SPA]: npx create-react-router@latest my-react-router-app
• Vite[SPA]: npm create vite@latest -- --template react
• Expo: npx create-expo-app@latest (React Native용)

7.1. Next.js

• 설치

npx create-react-app .

npx create-react-app [Project name]

npm install npx -g

npx create-react-app . --template typescript

• 실행

npm start

• 빌드

npm run build

serve -s build

• 설치

npm i -g yarn 

yarn create react-app .

yarn create react-app [Project name]

yarn create react-app . --template typescript

• 실행

yarn start

• 빌드

yarn build

serve -s build

8. React Native

#!if (문단 == null) == (앵커 == null)
를

#!if 문단 != null & 앵커 == null
의 [[React Native#s-|]]번 문단을

#!if 문단 == null & 앵커 != null
의 [[React Native#|]] 부분을

9. React Router

||<table width=400> || ||

라이트 버전 로고

다크 버전 로고

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

• npm
• Nintendo Switch Online 스마트폰 앱
• 넷플릭스
• 디스코드
• 라프텔
• 레딧
• Vivaldi
• Microsoft Edge
• 아마존 웹 서비스
• 에어비앤비
• 워드프레스닷컴(칼립소)
• 인스타그램
• 코빗
• 티스토리
• 트위치
• 트위터
• 페이스북
• 핀터레스트
• 콜렉티브
• 로블록스
• 픽시브
• 드롭박스
• 중고나라
• Melon 윈도우 플레이어[7]
• 토스
• 휴이노

11. 논란 및 사건사고

11.1. 라이선스

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

12. 여담

• React를 '프레임워크'라고 소개하는 인터넷 게시글이 많아서 프레임워크로 착각하는 사람들이 많다. 이는 React의 주요 특징인 컴포넌트와 React의 영향을 받은 웹 프레임워크들이 많을 정도로 파급력이 엄청나다보니 발생하게 된 오해라고 볼 수 있다. 그래픽 라이브러리인 OpenGL, Direct3D, Vulkan, Metal을 프레임워크라고 오해하는 것과 같은 꼴. 물론, React와 다르게 실제로 4개의 그래픽 라이브러리들이 프레임워크로 오인하는 사람은 없다.

• 2022년 3월에 출시된 전자정부표준프레임워크 4.0 버전부터 샘플 프로젝트로 제공하는데, 그중 프론트엔드 샘플 프로젝트가 바로 이 React이다. 비록 샘플일 뿐이었지만, 이게 전자정부표준프레임워크에서 제공하는 공식 프론트엔드 표준으로 착각하는 이들이 늘어나기 시작했고, 정부에 납품하는 신생 업체들이 트랜드에 따른다는 이유로 프론트엔드에 리액트를 채택하는 경우가 늘어나, 일부 정부 사이트에 리액트 도입이 실제로 늘어나는 효과가 일어났다. 물론 시스템 통합으로 가면 다들 예상했듯 달라지기는커녕 오히려 기술이 뒤로 가는 경향이 있다.

• React DOM을 이용한 일반적인 React 웹페이지와 React Native는 문법은 동일해도 코드는 제각각 작성해야 하는 불편이 있다. 이게 불편할 경우 React Native로만 코딩을 하고 react-native-web으로 웹페이지를 구현하는 방법도 있다. 하지만 React Native가 웹페이지에 최적화된 게 아니기 때문에, 웹에 특화된 라이브러리 등을 활용하려면 불편해도 React DOM으로 웹앱을 별도 개발하는 수밖에 없다.

• 한편, 2022년에 Next.js와 React Native 앱을 최대한 하나의 코드로 개발할 수 있게 하는 Solito라는 서드 파티 라이브러리도 나왔다. JSX에서 사용하는 XML/HTML 태그를 Next.js와 React Native에서 함께 사용할 수 있는 wrapper 태그들을 Solito에서 제공하고, 개발자들이 이 wrapper 태그들을 이용해서 코딩한 뒤 Next.js 앱과 React Native 앱으로 각각 컴파일하는 식이다. 물론 그래도 웹과 모바일 앱의 동작 원리가 다른 탓에 실제로는 Next.js용과 React Native용으로 코드를 나눠서 따로 작성해야 하는 경우도 여전히 많긴 하다. 그리고 Solito는 아직 초기 상태의 프로젝트라 production 환경에서 쓰긴 위험하고 소규모의 프로젝트나 MVP 앱에서만 사용하는 게 권장된다.