리액트 (소프트웨어)

리액트

다른 이름	React
원저자	Jordan Walke
개발자	페이스북 및 공동체
발표일	2013년 5월 29일(2013-05-29)
안정화 버전	19.2.8  / 2026년 7월 21일 (27일 전)
저장소	github.com/react/react
프로그래밍 언어	자바스크립트
플랫폼	크로스 플랫폼
크기	109 KiB (일반용) 710 KiB (개발용)
종류	자바스크립트 라이브러리
라이선스	MIT 허가서
웹사이트	react.dev

리액트(React, React.js 또는 ReactJS)는 자유-오픈 소스 프론트엔드 자바스크립트 라이브러리로, 컴포넌트 기반의 사용자 인터페이스를 "원활하게" 구축하는 것을 목표로 한다. 이 라이브러리는 메타 (이전 페이스북)와 개별 개발자 및 기업 커뮤니티에 의해 유지보수된다. 스택 오버플로 개발자 설문조사에 따르면, 리액트는 가장 일반적으로 사용되는 웹 기술 중 하나이다.

리액트는 싱글 페이지, 모바일 또는 서버 렌더링 애플리케이션을 Next.js 및 리액트 라우터(React Router)와 같은 프레임워크와 함께 개발하는 데 사용될 수 있다. 리액트는 사용자 인터페이스와 DOM에 컴포넌트를 렌더링하는 것에만 관여하기 때문에, 리액트 애플리케이션은 종종 라우팅 및 기타 클라이언트 측 기능에 라이브러리에 의존한다. 리액트의 주요 장점은 페이지의 변경된 부분만 다시 렌더링하여, 변경되지 않은 DOM 요소의 불필요한 재렌더링을 피한다는 점이다. 리액트는 모든 웹사이트의 약 6%에서 사용되는 것으로 추정된다.

기능

선언형

리액트는 선언형 프로그래밍 패러다임을 따른다. 개발자는 애플리케이션의 각 상태에 대한 뷰를 설계하며, 데이터가 변경되면 리액트가 컴포넌트를 업데이트하고 렌더링한다. 이는 명령형 프로그래밍과 대조된다.

컴포넌트

리액트 코드는 컴포넌트라고 불리는 엔티티로 구성된다. 이 컴포넌트들은 모듈화되어 재사용될 수 있다. 리액트 애플리케이션은 일반적으로 여러 계층의 컴포넌트로 구성된다. 컴포넌트는 React DOM 라이브러리를 사용하여 DOM의 루트 요소에 렌더링된다. 컴포넌트를 렌더링할 때, 값은 props("properties"의 약어)를 통해 컴포넌트 간에 전달된다. 컴포넌트 내부에 있는 값은 해당 컴포넌트의 상태라고 불린다.

리액트에서 컴포넌트를 선언하는 두 가지 주요 방법은 함수 컴포넌트와 클래스 컴포넌트를 통하는 것이다. React v16.8부터는 함수 컴포넌트 사용이 권장되는 방법이다.

함수 컴포넌트

React Conf 2018에서 발표되어 React v16.8부터 사용 가능한 함수 컴포넌트는 단일 "props" 인수를 받고 JSX를 반환하는 함수로 선언된다. 함수 컴포넌트는 useState Hook을 사용하여 내부 상태를 사용할 수 있다.

React Hooks

2019년 2월 16일, 리액트 16.8이 공개 출시되었고, 이 버전에서 React Hooks가 도입되었다. Hooks는 개발자가 함수 컴포넌트에서 React 상태 및 생명주기 기능에 "연결"할 수 있도록 하는 함수이다. 특히 Hooks는 클래스 내부에서는 작동하지 않으며, 개발자가 클래스 없이 React의 더 많은 기능을 사용할 수 있도록 한다.

리액트는 useState, useContext, useReducer, useMemo 및 useEffect와 같은 여러 내장 Hooks를 제공한다. 다른 Hooks는 Hooks API 레퍼런스에 문서화되어 있다. 가장 일반적으로 사용되는 useState와 useEffect는 각각 상태 및 부작용을 제어한다.

Hooks의 규칙

Hooks가 의존하는 특징적인 코드 패턴을 설명하는 두 가지 Hooks 규칙이 있다.

1. "Hooks는 최상위 레벨에서만 호출" — Hooks가 각 렌더링마다 동일한 순서로 호출되도록 루프, 조건문 또는 중첩된 문장 내부에서 Hooks를 호출하지 마세요.
2. "Hooks는 React 함수에서만 호출" — 상태를 가진 로직이 컴포넌트와 함께 유지되도록 일반 자바스크립트 함수에서 Hooks를 호출하지 마세요.

이러한 규칙은 런타임에 강제할 수 없지만, 린터와 같은 코드 분석 도구를 구성하여 개발 중에 많은 실수를 감지할 수 있다. 이 규칙은 Hooks 사용 및 다른 Hooks를 호출할 수 있는 사용자 정의 Hooks 구현 모두에 적용된다.

서버 컴포넌트

React Server Components (RSC)는 서버에서만 실행되는 함수 컴포넌트이다. 이 개념은 "Data Fetching with Server Components"라는 강연에서 처음 소개되었다. 서버 사이드 렌더링과 유사한 개념이지만, RSC는 하이드레이션이 발생하지 않으므로 클라이언트에 해당 자바스크립트를 보내지 않는다. 결과적으로 Hooks에 접근할 수 없다. 그러나 이들은 비동기 함수일 수 있으므로 비동기 작업을 직접 수행할 수 있다.

async function MyComponent() {
  const message = await fetchMessageFromDb();

  return (
    <div>Message: {message}</div>
  );
}

현재 서버 컴포넌트는 Next.js와 함께 가장 쉽게 사용할 수 있다. Next.js를 사용하면 서버와 클라이언트(브라우저) 모두를 위한 컴포넌트를 작성할 수 있다. 서버 렌더링된 컴포넌트가 브라우저에 의해 수신되면, 브라우저의 React가 제어권을 넘겨받아 가상 DOM을 생성하고 이벤트 핸들러를 연결한다. 이를 하이드레이션이라고 한다.

클래스 컴포넌트

클래스 컴포넌트는 ES6 클래스를 사용하여 선언된다. 함수 컴포넌트와 동일하게 동작하지만, 상태 및 생명주기 이벤트를 관리하기 위해 Hooks를 사용하는 대신, React.Component 기반 클래스의 생명주기 메서드를 사용한다.

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

2019년 2월 React 16.8에서 React Hooks가 도입되면서 개발자들은 함수 컴포넌트 내에서 상태 및 생명주기 동작을 관리할 수 있게 되었고, 클래스 컴포넌트에 대한 의존도를 줄였다.

이러한 경향은 함수형 프로그래밍과 모듈식 디자인으로의 광범위한 산업 움직임과 일치한다. React가 계속 발전함에 따라, 개발자들은 새로운 애플리케이션을 구축하거나 기존 애플리케이션을 리팩토링할 때 함수형 컴포넌트와 React Hooks의 이점을 고려하는 것이 중요하다.

라우팅

리액트 자체는 라우팅에 대한 내장 지원을 제공하지 않는다. 리액트는 주로 사용자 인터페이스를 구축하기 위한 라이브러리이며, 즉시 사용 가능한 완전한 라우팅 솔루션을 포함하지 않는다. 리액트 라우터와 같은 서드파티 라이브러리를 사용하여 React 애플리케이션에서 라우팅을 처리할 수 있다. 이를 통해 개발자는 React 친화적인 방식으로 경로를 정의하고, 탐색을 관리하며, URL 변경을 처리할 수 있다.

실제 DOM을 구현하는 데 사용되는 가상 DOM이 있다

가상 DOM

또 다른 주목할 만한 기능은 가상 문서 객체 모델 또는 가상 DOM의 사용이다. 리액트는 브라우저 DOM과 유사한 인메모리 데이터 구조를 생성한다. 컴포넌트가 렌더링될 때마다 결과는 가상 DOM과 비교된다. 그런 다음 계산된 차이점만으로 브라우저에 표시된 DOM을 효율적으로 업데이트한다. 이 과정을 재조정(reconciliation)이라고 부른다. 이를 통해 프로그래머는 전체 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있으며, React는 실제로 변경되는 컴포넌트만 렌더링한다. 이러한 선택적 렌더링은 주요 성능 향상을 제공한다.

업데이트

동일한 컴포넌트와 대상에 대해 ReactDOM.render가 다시 호출되면, React는 가상 DOM에 새로운 UI 상태를 나타내고 라이브 DOM의 어떤 부분(있는 경우)을 변경해야 하는지 결정한다.

가상 DOM은 실제 DOM을 실시간으로 업데이트한다.

생명주기 메서드

클래스 기반 컴포넌트의 생명주기 메서드는 컴포넌트의 생명 주기 중 특정 지점에서 코드 실행을 허용하는 후킹 형태를 사용한다.

• ShouldComponentUpdate는 렌더링이 필요하지 않을 경우 false를 반환하여 개발자가 불필요한 컴포넌트 재렌더링을 방지할 수 있도록 한다.
• componentDidMount는 컴포넌트가 "마운트"된 후(컴포넌트가 사용자 인터페이스에 생성되었을 때, 종종 DOM 노드와 연결됨으로써) 한 번 호출된다. 이는 일반적으로 API를 통해 원격 소스에서 데이터를 로드하는 것을 트리거하는 데 사용된다.
• componentDidUpdate는 업데이트가 발생한 직후 호출된다.
• componentWillUnmount는 컴포넌트가 파괴되거나 "언마운트"되기 직전에 호출된다. 이는 컴포넌트가 언마운트되더라도 단순히 제거되지 않을 리소스 집약적인 종속성을 (예: 컴포넌트와 관련된 setInterval() 인스턴스를 제거하거나, 컴포넌트의 존재로 인해 "document"에 설정된 "이벤트 리스너"를 제거) 정리하는 데 일반적으로 사용된다.
• render는 가장 중요한 생명주기 메서드이며, 어떤 컴포넌트에서든 유일하게 필수적인 메서드이다. 이는 일반적으로 컴포넌트의 상태가 업데이트될 때마다 호출되며, 이는 사용자 인터페이스에 반영되어야 한다.

JSX

 이 부분의 본문은 JSX입니다.

JSX 또는 JavaScript XML은 자바스크립트 언어 구문의 확장이다. HTML과 유사한 모습을 가지고 있으며, JSX는 많은 개발자들에게 익숙한 구문을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다. React 컴포넌트는 일반적으로 JSX를 사용하여 작성되지만 (순수 자바스크립트로도 컴포넌트를 작성할 수 있음), 필수는 아니다. 컴파일하는 동안 JSX는 자바스크립트 코드로 변환된다. JSX는 페이스북이 PHP를 위해 만든 또 다른 확장 구문인 XHP와 유사하다.

JSX 코드의 예:

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

HTML을 넘어서는 아키텍처

리액트의 기본 아키텍처는 브라우저에서 HTML을 렌더링하는 것을 넘어 확장된다. 예를 들어, 페이스북은 <canvas> 태그에 렌더링되는 동적 차트를 가지고 있으며, 넷플릭스와 페이팔은 서버와 클라이언트 모두에서 동일한 HTML을 렌더링하기 위해 유니버설 로딩을 사용한다. 리액트는 또한 리액트 네이티브를 사용하여 안드로이드 및 iOS용 네이티브 앱을 개발하는 데 사용될 수 있다.

서버 사이드 렌더링

서버 사이드 렌더링 (SSR)은 클라이언트 측 자바스크립트 애플리케이션을 브라우저가 아닌 서버에서 렌더링하는 프로세스를 의미한다. 이는 특히 느린 연결이나 장치를 사용하는 사용자에게 애플리케이션의 성능을 향상시킬 수 있다.

SSR을 사용하면 클라이언트에 전송되는 초기 HTML에 애플리케이션의 완전히 렌더링된 UI가 포함된다. 이를 통해 클라이언트의 브라우저는 자바스크립트가 다운로드되어 실행되기 전까지 기다리지 않고 즉시 UI를 표시할 수 있다.

리액트는 SSR을 지원하며, 개발자가 서버에서 리액트 컴포넌트를 렌더링하고 그 결과를 HTML로 클라이언트에 보낼 수 있도록 한다. 이는 애플리케이션의 성능 향상뿐만 아니라 검색 엔진 최적화 목적에도 유용하다.

일반적인 관용구

리액트는 완전한 애플리케이션 라이브러리를 제공하려고 시도하지 않는다. 이는 사용자 인터페이스 구축을 위해 특별히 설계되었으므로 일부 개발자가 애플리케이션 구축에 필수적이라고 생각할 수 있는 많은 도구를 포함하지 않는다. 이를 통해 개발자는 네트워크 접근 또는 로컬 데이터 저장과 같은 작업을 수행하기 위해 선호하는 라이브러리를 선택할 수 있다. 라이브러리가 성숙해짐에 따라 일반적인 사용 패턴이 나타났다.

단방향 데이터 흐름

 이 부분의 본문은 단방향 데이터 흐름입니다.

리액트의 단방향 데이터 흐름 개념(이는 AngularJS의 양방향 흐름과 대조될 수 있음)을 지원하기 위해, 플럭스 아키텍처는 인기 있는 모델-뷰-컨트롤러 아키텍처의 대안으로 개발되었다. 플럭스는 중앙 디스패처를 통해 스토어로 전송되는 액션을 특징으로 하며, 스토어의 변경 사항은 뷰로 다시 전파된다. 리액트와 함께 사용될 때, 이 전파는 컴포넌트 속성을 통해 이루어진다. 플럭스는 개념화 이후 Redux 및 MobX와 같은 라이브러리에 의해 대체되었다.

플럭스는 옵서버 패턴의 변형으로 간주될 수 있다.

플럭스 아키텍처 하의 React 컴포넌트는 전달된 어떤 props도 직접 수정해서는 안 되지만, 디스패처에 의해 스토어를 수정하도록 전송되는 액션을 생성하는 콜백 함수를 전달받아야 한다. 액션은 발생한 일을 설명하는 책임을 지닌 객체이다. 예를 들어, 한 사용자가 다른 사용자를 "팔로우"하는 것을 설명하는 액션은 사용자 ID, 대상 사용자 ID, 그리고 USER_FOLLOWED_ANOTHER_USER 유형을 포함할 수 있다. 모델로 생각될 수 있는 스토어는 디스패처로부터 받은 액션에 응답하여 자신을 변경할 수 있다.

이 패턴은 때때로 "속성은 아래로 흐르고, 액션은 위로 흐른다"고 표현된다. 플럭스 생성 이후 많은 플럭스 구현이 만들어졌으며, 아마도 가장 잘 알려진 것은 단일 스토어를 특징으로 하는 Redux일 것이다. 이는 종종 단일 진실 공급원이라고 불린다.

2019년 2월, useReducer가 16.8 릴리스에서 React Hook으로 도입되었다. 이는 Redux와 일치하는 API를 제공하여 개발자가 컴포넌트 상태에 로컬인 Redux와 유사한 스토어를 생성할 수 있도록 한다.

역사

리액트는 메타의 소프트웨어 엔지니어 조던 워크(Jordan Walke)가 만들었으며, 그는 "F-Bolt"라는 프로토타입을 개발한 후 나중에 "FaxJS"로 이름을 변경했다. 이 초기 버전은 조던 워크의 깃허브 저장소에 문서화되어 있다. 이 프로젝트에 영향을 준 것 중에는 PHP용 HTML 컴포넌트 라이브러리인 XHP가 있다.

리액트는 2011년 페이스북의 뉴스 피드에 처음 배포되었고, 이어서 2012년 인스타그램에 통합되었다. 2013년 5월, JSConf US에서 이 프로젝트는 공식적으로 오픈 소스화되어, 그 채택과 성장에 중요한 전환점이 되었다.

리액트 네이티브는 React를 사용하여 안드로이드, iOS, UWP 개발을 가능하게 하며, 2015년 2월 페이스북의 React Conf에서 발표되었고 2015년 3월에 오픈 소스화되었다.

2017년 4월 18일, 페이스북은 React의 이전 렌더링 알고리즘인 Stack과 달리, 새로운 내부 렌더링 알고리즘 세트인 React Fiber를 발표했다. React Fiber는 React 라이브러리의 향후 개선 및 기능 개발의 기반이 될 예정이었다. React 프로그래밍의 실제 구문은 변경되지 않으며, 구문이 실행되는 방식만 변경되었다. React의 이전 렌더링 시스템인 Stack은 동적 변경에 대한 시스템의 초점이 이해되지 않던 시기에 개발되었다. Stack은 복잡한 애니메이션을 한 번에 모두 처리하려고 시도하는 등 느리게 그렸다. Fiber는 애니메이션을 여러 프레임에 걸쳐 분산될 수 있는 세그먼트로 분해한다. 마찬가지로, 페이지의 구조도 개별적으로 유지하고 업데이트할 수 있는 세그먼트로 분해될 수 있다. 자바스크립트 함수와 가상 DOM 객체는 "파이버(fibers)"라고 불리며, 각각 개별적으로 작동하고 업데이트될 수 있어 화면 렌더링을 더 부드럽게 만든다.

2017년 9월 26일, React 16.0이 공개 출시되었다. React 16.0은 "에러 바운더리"를 도입했는데, 이는 자식 트리 내의 어떤 자바스크립트 오류라도 잡아내고 앱이 중단되는 대신 폴백 UI를 렌더링하는 새로운 컴포넌트 유형이다.

2020년 10월 20일, React 팀은 React 개발자 대면 API에 큰 변경 사항 없이 첫 주요 릴리스인 React v17.0을 출시했다.

2022년 3월 29일, React 18이 출시되었으며, 새로운 동시성 렌더러, 자동 배치 및 Suspense를 통한 서버 사이드 렌더링 지원이 도입되었다. React 18은 인터넷 익스플로러 11에 대한 지원을 중단했다.

2024년 12월 5일, React 19가 출시되었다. 이 릴리스는 비동기 함수를 사용하여 상태 업데이트를 수동으로 보류 상태, 오류 및 낙관적 업데이트를 처리할 필요 없이 간소화하는 Actions를 도입했다. React 19는 또한 서버 컴포넌트 지원 및 향상된 정적 사이트 생성을 포함한다.

2025년 10월, 메타는 React, 리액트 네이티브, 및 JSX (JavaScript XML)를 리눅스 재단의 일부인 새로운 React Foundation에 기부할 것이라고 발표했다.

2025년 11월 29일, 원격 코드 실행을 허용하는 CVE-2025-55182 (react2shell) 취약점이 보고되었다. 이는 CVSS 최고 점수인 10.0을 받았다. 버전 19.0.1, 19.1.2, 19.2.1에서 수정 사항이 도입되었다.

2025년 12월 11일, React 팀은 React Server Components에서 추가적인 취약점을 공개했다: 서비스 거부 문제 (CVE-2025-55184 및 CVE-2025-67779, CVSS 7.5) 및 소스 코드 노출 문제 (CVE-2025-55183, CVSS 5.3). 수정 사항은 버전 19.0.3, 19.1.4, 19.2.3으로 백포트되었다.

React의 버전 역사

버전	출시일	변경 사항
0.3.0	2013년 5월 29일	최초 공개 출시
0.4.0	2013년 7월 20일	주석 노드 <div>{/* */}</div> 지원, 서버 사이드 렌더링 API 개선, React.autoBind 제거, key prop 지원, 폼 개선, 버그 수정.
0.5.0	2013년 10월 20일	메모리 사용량 개선, 선택 및 구성 이벤트 지원, mixins의 getInitialState 및 getDefaultProps 지원, React.version 및 React.isValidClass 추가, Windows 호환성 개선.
0.8.0	2013년 12월 20일	rows & cols, defer & async, <audio> & <video>의 loop, autoCorrect 속성 지원 추가. onContextMenu 이벤트 추가, jstransform 및 esprima-fb 도구 업그레이드, browserify 업그레이드.
0.9.0	2014년 2월 20일	crossOrigin, download 및 hrefLang, mediaGroup 및 muted, sandbox, seamless, srcDoc, scope 속성 지원 추가. any, arrayOf, component, oneOfType, renderable, shape를 React.PropTypes에 추가. onMouseOver 및 onMouseOut 이벤트 지원 추가. <img> 요소에 onLoad 및 onError 지원 추가.
0.10.0	2014년 3월 21일	srcSet 및 textAnchor 속성 지원 추가, 불변 데이터에 대한 업데이트 함수 추가, 모든 void 요소가 닫는 태그를 삽입하지 않도록 보장.
0.11.0	2014년 7월 17일	SVG 지원 개선, e.view 이벤트 정규화, $apply 명령 업데이트, 네임스페이스 지원 추가, 새로운 transformWithDetails API 추가, dist/ 아래에 미리 빌드된 패키지 포함, MyComponent()가 이제 인스턴스가 아닌 디스크립터를 반환.
0.12.0	2014년 11월 21일	새로운 기능 추가 Spread operator ({...})가 this.transferPropsTo를 비권장하기 위해 도입. acceptCharset, classID, manifest HTML 속성 지원 추가. React.addons.batchedUpdates API에 추가. @jsx React.DOM 더 이상 필요 없음. CSS 전환 관련 문제 수정.
0.13.0	2015년 3월 10일	0.12에서 경고했던 비권장 패턴 더 이상 작동하지 않음, ref 해결 순서 변경, this._pendingState 및 this._rootNodeID 속성 제거, ES6 클래스 지원, API React.findDOMNode(component) 추가, 이터레이터 및 immutable-js 시퀀스 지원, 새로운 기능 React.addons.createFragment 추가, React.addons.classSet 비권장.
15.0.0	2016년 4월 7일	초기 렌더링이 HTML 생성 대신 document.createElement 사용, 더 이상 추가 <span> 없음, SVG 지원 개선, ReactPerf.getLastMeasurements()는 불투명, 경고와 함께 새로운 비권장 사항 도입, 여러 작은 메모리 누수 수정, React DOM은 이제 cite 및 profile HTML 속성과 cssFloat, gridRow, gridColumn CSS 속성 지원.
15.1.0	2016년 5월 20일	배칭 버그 수정, 최신 object-assign 사용 보장, 회귀 수정, merge 유틸리티 사용 제거, 일부 모듈 이름 변경.
15.2.0	2016년 7월 1일	컴포넌트 스택 정보 포함, 마운트 시 prop 유효성 검사 중단, React.PropTypes.symbol 추가, <link>에 onLoad 처리 및 <source> 요소에 onError 처리 추가, isRunning() API 추가, 성능 회귀 수정.
15.3.0	2016년 7월 30일	React.PureComponent 추가, 중첩된 서버 렌더링 문제 수정, SVG 속성을 지원하기 위해 xmlns, xmlnsXlink 추가 및 HTML 속성에 referrerPolicy 추가, React Perf Add-on 업데이트, ref 문제 수정.
15.4.0	2016년 11월 16일	React 패키지 및 브라우저 빌드에 더 이상 React DOM 포함되지 않음, 개발 성능 개선, 간헐적인 테스트 실패 수정, batchedUpdates API, React Perf 및 ReactTestRenderer.create() 업데이트.
15.5.0	2017년 4월 7일	react-dom/test-utils 추가, peerDependencies 제거, Closure Compiler 문제 수정, React.createClass 및 React.PropTypes에 대한 비권장 경고 추가, Chrome 버그 수정.
15.6.0	2017년 6월 13일	style 속성 및 Grid 스타일 속성에서 CSS 변수 지원 추가, react에 의존하는 애드온에 대한 AMD 지원 수정, 불필요한 종속성 제거, React.createClass 및 React.DOM 팩토리 헬퍼에 대한 비권장 경고 추가.
16.0.0	2017년 9월 26일	"에러 바운더리" 도입으로 오류 처리 개선, React DOM이 비표준 속성 전달 허용, setState 동작의 사소한 변경, react-with-addons.js 빌드 제거, React.createClass를 create-react-class로, React.PropTypes를 prop-types로, React.DOM을 react-dom-factories로 추가, 스케줄링 및 생명주기 메서드 동작 변경.
16.1.0	2017년 11월 9일	Bower 릴리스 중단, UMD 빌드의 의도치 않은 추가 전역 변수 수정, onMouseEnter 및 onMouseLeave 발사 수정, <textarea> placeholder 수정, 사용되지 않는 코드 제거, 누락된 package.json 종속성 추가, React DevTools 지원 추가.
16.3.0	2018년 3월 29일	새로운 공식 지원 컨텍스트 API 추가, 새로운 패키지Prevent an infinite loop when attempting to render portals with SSR 추가, this.state 문제 수정, IE/Edge 문제 수정.
16.4.0	2018년 5월 24일	포인터 이벤트 사양 지원 추가, propTypes 지정 기능 추가, 컨텍스트 읽기 수정, getDerivedStateFromProps() 지원 수정, testInstance.parent 충돌 수정, 성능 측정을 위한 React.unstable_Profiler 컴포넌트 추가, 내부 이벤트 이름 변경.
16.5.0	2018년 9월 5일	React DevTools Profiler 지원 추가, 더 많은 예외적인 경우에 오류를 우아하게 처리, react-dom/profiling 추가, 브라우저용 onAuxClick 이벤트 추가, mouse 이벤트에 movementX 및 movementY 필드 추가, 포인터 이벤트에 tangentialPressure 및 twist 필드 추가.
16.6.0	2018년 10월 23일	contextType 지원 추가, 우선순위 레벨, 연속, 래핑된 콜백 지원, 폴백 메커니즘 개선, iOS Safari의 회색 오버레이 수정, React.lazy()를 사용하여 컴포넌트 분할 코드 추가.
16.7.0	2018년 12월 20일	지연 로드된 컴포넌트에 대한 React.lazy의 성능 수정, 메모리 누수를 피하기 위해 언마운트 시 필드 지우기, SSR 버그 수정, 성능 회귀 수정.
16.8.0	2019년 2월 6일	Hooks 추가, 업데이트 배칭을 위한 ReactTestRenderer.act() 및 ReactTestUtils.act() 추가, React.lazy()에 전달되는 동기 thenable 지원, useReducer Hook 지연 초기화 API 개선.
16.9.0	2019년 8월 9일	프로그래밍 방식으로 성능 측정치를 수집하기 위한 React.Profiler API 추가. unstable_ConcurrentMode를 unstable_createRoot 대신 제거
16.10.0	2019년 9월 27일	후크 업데이트가 메모화되지 않는 예외적인 경우 수정. 하이드레이션 시기를 결정하는 휴리스틱 수정, 업데이트 중에 잘못 하이드레이션하지 않도록 함. 메모리 절약을 위해 언마운트 중에 추가 파이버 필드를 지움. 파이어폭스에서 필수 텍스트 필드 버그 수정. 가능한 경우 인라인 폴리필 대신 Object.is 선호. Suspense와 오류 처리를 혼합할 때 버그 수정.
16.11.0	2019년 10월 22일	중첩된 React 컨테이너 내에서 mouseenter 핸들러가 두 번 실행되는 문제 수정. unstable_createRoot 및 unstable_createSyncRoot 실험적 API 제거. (이것들은 실험 채널에서 createRoot 및 createSyncRoot로 사용 가능함.)
16.12.0	2019년 11월 14일	React DOM – 다중 루트 앱에서 비활성 효과(useEffect)가 실행되지 않는 문제 수정. React Is – lazy 및 memo 유형이 컴포넌트 대신 요소로 간주되는 문제 수정.
16.13.0	2020년 2월 26일	React Concurrent 모드에 추가된 기능. React 핵심 라이브러리 및 React Dom의 회귀 수정.
16.14.0	2020년 10월 14일	새로운 JSX 변환에 대한 지원 추가.
17.0.0	2020년 10월 20일	"새로운 기능 없음"은 이전 버전에서 React 업데이트를 점진적으로 가능하게 함. 새로운 JSX Transform, 이벤트 위임 변경
18.0.0	2022년 3월 29일	동시성 React, 자동 배치, 새로운 Suspense 기능, 전환, 클라이언트 및 서버 렌더링 API, 새로운 엄격 모드 동작, 새로운 Hooks
18.1.0	2022년 4월 26일	많은 수정 및 성능 개선
18.2.0	2022년 6월 14일	더 많은 수정 및 성능 개선
18.3.0	2024년 4월 25일	React 19의 기능에 대한 비권장 경고 추가.
19.0.0	2024년 12월 5일	Actions, 새로운 Hooks (useActionState, useFormStatus, useOptimistic), use API, Server Components, Server Actions, ref를 일반 prop으로 전달, 향상된 하이드레이션 diffs, 향상된 Context API, refs를 위한 클린업 함수, 향상된 useDeferredValue API, 문서 메타데이터 지원, 스타일시트 지원, 비동기 스크립트 지원, 리소스 사전 로딩 지원, 향상된 오류 보고, 사용자 정의 요소 지원.

라이선스

2013년 5월 React의 초기 공개 릴리스는 아파치 라이선스 2.0을 사용했다. 2014년 10월, React 0.12.00은 이를 3-절 BSD 라이선스로 대체하고 소프트웨어와 관련된 페이스북 특허 사용을 허용하는 별도의 PATENTS 텍스트 파일을 추가했다.

여기에 부여된 라이선스는 자동으로 그리고 통지 없이 다음의 경우 종료된다: (a) 페이스북 또는 그 자회사 또는 계열사의 특허를 직간접적으로, 또는 기여적으로 침해하거나 침해를 유도한다고 주장하는 어떠한 청구 (소송 제기, 주장 또는 기타 행동을 포함)를 하는 자에 대해: (i) 해당 청구가 소프트웨어와 관련이 있든 없든 페이스북 또는 그 자회사 또는 계열사에 의한 경우, (ii) 해당 청구가 페이스북 또는 그 자회사 또는 계열사의 소프트웨어, 제품 또는 서비스로부터 전체 또는 일부 발생하는 경우, 해당 청구가 소프트웨어와 관련이 있든 없든 어떤 당사자에 의한 경우, 또는 (iii) 소프트웨어와 관련된 페이스북의 특허 청구의 어떠한 권리가 유효하지 않거나 집행 불가능하다고 주장하는 어떤 당사자에 의한 경우.

이러한 비전통적인 조항은 React 사용자 커뮤니티에서 약간의 논란과 논쟁을 불러일으켰는데, 이는 페이스북이 많은 시나리오에서 라이선스를 철회할 수 있는 권한을 부여하는 것으로 해석될 수 있었기 때문이다. 예를 들어, 페이스북이 라이선시를 고소하여 블로그나 다른 곳에 행동을 게시하도록 "다른 행동"을 취하도록 유도하는 경우 등이다. 많은 사람들이 페이스북이 해지 조항을 불공정하게 악용할 수 있거나, React를 제품에 통합하는 것이 스타트업 회사의 미래 인수를 복잡하게 만들 수 있다는 우려를 표명했다.

커뮤니티 피드백을 바탕으로 페이스북은 2015년 4월에 특허 허가서를 덜 모호하고 더 관대하게 업데이트했다.

여기에 부여된 라이선스는 귀하(또는 귀하의 자회사, 계열사 또는 대리인)가 직접 또는 간접적으로, 또는 직접적인 재정적 이익을 가지고 다음의 경우 특허 주장을 시작하는 경우 자동으로 그리고 통지 없이 종료됩니다: (i) 페이스북 또는 그 자회사 또는 계열사를 상대로 하는 경우, (ii) 해당 특허 주장이 페이스북 또는 그 자회사 또는 계열사의 소프트웨어, 기술, 제품 또는 서비스로부터 전체 또는 일부 발생하는 경우 어떤 당사자를 상대로 하는 경우, 또는 (iii) 소프트웨어와 관련된 어떤 당사자를 상대로 하는 경우. [...] "특허 주장"은 교차 청구 또는 반소를 포함하여 특허의 직접적, 간접적, 또는 기여적 침해 또는 침해 유도를 주장하는 모든 소송 또는 기타 행동을 의미합니다.

아파치 소프트웨어 재단은 이 라이선스 협정을 자체 라이선스 정책과 호환되지 않는 것으로 간주했는데, 그 이유는 "우리 소프트웨어의 다운스트림 소비자에게 라이선스 제공자가 아닌 라이선시에게 유리하도록 불균형하게 위험을 전가하여, 보편적 기증자라는 아파치 법적 정책을 위반한다"는 점과 "아파치 라이선스 2.0에 있는 것의 하위 집합이 아니며, 아파치 라이선스 2.0으로 재라이선스할 수 없다"는 점 때문이었다. 2017년 8월, 페이스북은 아파치 재단의 다운스트림 우려를 일축하고 라이선스 재고를 거부했다. 다음 달, 워드프레스는 Gutenberg와 Calypso 프로젝트를 React에서 다른 것으로 전환하기로 결정했다.

2017년 9월 23일, 페이스북은 다음 주에 Flow, Jest, React, Immutable.js를 표준 MIT 허가서로 재라이선스할 것이라고 발표했다. 회사는 React가 "웹을 위한 광범위한 오픈 소스 소프트웨어 생태계의 기반"이며 "비기술적인 이유로 전진을 방해하고 싶지 않다"고 밝혔다.

2017년 9월 26일, React 16.0.0이 MIT 라이선스로 출시되었다. MIT 라이선스 변경은 React 15.6.2와 함께 15.x 릴리스 라인에도 백포트되었다.

같이 보기

• 빌드 자동화
• 리덕스

관련 문헌

• Larsen, John (2021). 《React Hooks in Action With Suspense and Concurrent Mode》. Manning. ISBN 978-1-72004-399-7. 
• Schwarzmüller, Max (2018년 5월 1일). 《React – The Complete Guide (incl. Hooks, React Router and Redux)》 (미국 영어). Packt Publishing. 
• Wieruch, Robin (2020). 《The Road to React》. Leanpub. ISBN 978-1-72004-399-7. 
• Dere, Mohan (2017년 12월 21일). “How to integrate create-react-app with all the libraries you need to make a great app” (미국 영어). 《freeCodeCamp》. 2018년 6월 14일에 확인함. 
• Panchal, Krunal (2022년 4월 26일). “Angular vs React Detailed Comparison” (미국 영어). 《SitePoint》. 2023년 3월 30일에 원본 문서에서 보존된 문서. 2023년 6월 5일에 확인함. 
• Hámori, Fenerec (2022년 5월 31일). “The History of React.js on a Timeline”. 《RisingStack》. 2022년 5월 31일에 원본 문서에서 보존된 문서. 2023년 6월 5일에 확인함. 
• Lardinois, Frederic (2017년 4월 18일). “Facebook announces React Fiber, a rewrite of its React framework”. 《TechCrunch》. 2024년 12월 31일에 확인함. 

외부 링크

• 리액트 - 공식 웹사이트