대응(소프트웨어)

React (software)
오픈 소스 모바일 애플리케이션 프레임워크는 기본 응답을 참조하십시오.
반응
원본 작성자조던 워크
개발자메타 및 커뮤니티
초기 출시2013년 5월 29일; 9년 전 (2013-05-29)[1]
안정적 방출
18.2.0[2] / 2022년 6월 14일, 11개월 전(2022년 6월 14일)
저장소
작성 위치자바스크립트
플랫폼웹 플랫폼
유형자바스크립트 라이브러리
면허증.MIT 라이선스
웹사이트react.dev Edit this on Wikidata

반응(React.js 또는 React라고도 함)JS)는 구성 요소를 기반으로 사용자 인터페이스를 구축하기 위한 자유 및 오픈 소스 프론트엔드 JavaScript[3][4] 라이브러리입니다.Meta(구 Facebook)와 개별 개발자 및 [5][6][7]기업 커뮤니티에 의해 유지됩니다.

React는 Next.js와 같은 프레임워크를 사용하여 단일 페이지, 모바일 또는 서버 렌더링 애플리케이션을 개발하는 데 사용할 수 있습니다.React는 사용자 인터페이스와 DOM에 대한 렌더링 구성 요소에만 관련되므로 React 응용 프로그램은 라우팅 및 기타 클라이언트 측 [8][9]기능을 위해 라이브러리에 의존하는 경우가 많습니다.

기본 용법

다음은 JSX 및 JavaScript로 작성된 웹용 React를 사용하는 기본적인 예입니다. 

수입품 반응 부터 '''비공식'''; 수입품 리액트DOM 부터 'client-dom/client';  메시지를 표시하는 순수 구성 요소 */ 컨스 인사 = () => {   돌아가다 (     <디브 className="안녕-세상">       <h1>안녕하세요., 세계!</h1>     </div>   ); };  주요 앱 구성 요소 */ 컨스 앱. = () => {   돌아가다 <인사 />; };  HTML 페이지의 루트 요소에 React가 렌더링됩니다 */ 컨스 뿌리 = 리액트DOM.루트 생성(문서.요소 가져오기 기준이드('뿌리')); 뿌리.렌더(<앱. />);

아래 HTML 문서를 기반으로 합니다. 

<!DOCTYPE html> <context lang="en"> <head> <context charset="utf-8" /> <title> 반응앱 </title> <body> <noscript>이 앱을 실행하려면 JavaScript를 활성화해야 합니다.</noscript> <div id="root"> </div> </body> </noscript>

그Greeting함수는 유명한 도입부 ''Hello, world''를 표시하는 React 구성 요소입니다.

웹 브라우저에 표시되는 결과는 다음과 같습니다.

<div class="hello-world"> <h1> 안녕, 세상!</h1> </div>

주목할 만한 특징

선언적

React는 선언적 프로그래밍 패러다임을 고수합니다.개발자는 응용프로그램의 각 상태에 대한 보기를 설계하고, React는 데이터가 변경될 때 구성요소를 업데이트하고 렌더링합니다.이것은 명령형 [10]프로그래밍과는 대조적입니다.

구성 요소들

대응 코드는 구성 요소라고 하는 엔티티로 만들어집니다.이러한 구성 요소는 모듈식이며 재사용할 수 있습니다.반응 응용 프로그램은 일반적으로 여러 계층의 구성 요소로 구성됩니다.구성 요소는 React DOM 라이브러리를 사용하여 DOM의 루트 요소로 렌더링됩니다.구성요소를 렌더링할 때 값은 "속성"의 줄임말인 "속성"을 통해 구성요소 간에 전달됩니다.구성 요소 내부의 값을 구성 요소 [11]상태라고 합니다.

React에서 구성 요소를 선언하는 두 가지 주요 방법은 함수 구성 요소와 클래스 구성 요소를 통해서입니다. 

수입품 반응 부터 "스캐너덜너덜;  현재 개수 */의 메시지를 표시하는 순수 구성 요소 컨스 개수 표시 = 소품 => {   카운트 값이 이 구성 요소에 소품으로 전달됩니다.   컨스 { 세어보세요 } = 소품;   돌아가다 (<디브>그 현재의 세어보세요 이라 {세어보세요}.</div>; }  버튼을 클릭할 때마다 업데이트되는 메시지를 표시하는 구성요소 */ 컨스 계산대 = () => {   React use State Hook은 여기서 다음을 저장하고 업데이트하는 데 사용됩니다.   버튼을 클릭한 총 횟수입니다.   컨스 [세어보세요, set Count] = 반응.상태 사용(0);    돌아가다 (     <디브 className="카운터">       <개수 표시 세어보세요={세어보세요} />       <단추를 채우다 클릭 시={() => set Count(세어보세요 + 1)}>더하다 하나.!</버튼>     </div>   ); };

함수 구성요소

함수 구성 요소는 단일 "props" 인수를 수락하고 JSX를 반환하는 함수(JavaScript 함수 구문 또는 화살표 함수 표현식 사용)로 선언됩니다.React v16.8 이후에는 기능 구성 요소가 다음과 같이 상태를 사용할 수 있습니다.useState훅.

함수 구문 기능. 그리터() {   돌아가다 <디브>안녕하세요. 세계</div>; }  화살표 함수식 컨스 그리터 = () => <디브>안녕하세요. 세계</div>;

반응 후크

2019년 2월 16일 리액트 16.8이 공개되었으며, 리액트 [12]훅스가 소개되었습니다.후크는 개발자가 기능 [13]구성 요소에서 React 상태 및 라이프사이클 기능을 "훅"할 수 있도록 하는 기능입니다.특히 Hooks는 클래스 내에서 작동하지 않습니다. 개발자가 클래스 [14]없이 React의 더 많은 기능을 사용할 수 있도록 합니다.

React는 다음과 같은 몇 가지 기본 제공 후크를 제공합니다.useState,[15] useContext,useReducer,useMemo그리고.useEffect기타[16] 사항은 Hooks API [17]Reference에 설명되어 있습니다. useState그리고.useEffect가장 일반적으로 사용되는 것은 각각 상태와 부작용을 제어하기 위한 것입니다.

후크 규칙

후크에는 후크가 의존하는 특성 코드 패턴을 설명하는 두 가지 후크[18] 규칙이 있습니다.

  1. "최상위 수준의 호출 후크만" - 각 렌더링 순서와 동일하게 호출되도록 내부 루프, 조건 또는 중첩된 문에서 후크를 호출하지 않습니다.
  2. "React Functions의 Call Hooks만" — 상태 저장 논리가 구성 요소와 함께 유지되도록 일반 JavaScript 함수의 Hooks를 호출하지 않습니다.

런타임에 이러한 규칙을 적용할 수는 없지만, 개발 중에 많은 오류를 탐지하도록 린터와 같은 코드 분석 도구를 구성할 수 있습니다.이 규칙은 후크 사용과 다른 후크를 호출할 수 있는 사용자 지정 [19]후크 구현 모두에 적용됩니다.

클래스 구성 요소

클래스 구성 요소는 ES6 클래스를 사용하여 선언됩니다.이들은 기능 구성 요소와 동일한 방식으로 동작하지만 Hooks를 사용하여 상태 및 라이프사이클 이벤트를 관리하는 대신에 에서 라이프사이클 방법을 사용합니다.React.Component 기본 계급 

학급 상위 구성 요소 확장된 반응.요소 {   주 = { 색.: '녹색' };   렌더() {     돌아가다 (       <하위 구성 요소 색.={이것..주.색.} />     );   } }
실제 DOM을 구현하는 데 사용되는 가상 DOM이 있습니다.

가상 DOM

또 다른 주목할 만한 기능은 가상 문서 개체 모델 또는 가상 DOM의 사용입니다.React는 메모리 내 데이터 구조 캐시를 만들고 결과 차이를 계산한 다음 브라우저의 표시된 DOM을 [20]효율적으로 업데이트합니다.이 과정을 조정이라고 합니다.이를 통해 프로그래머는 각 변경사항에 대해 전체 페이지가 렌더링되는 것처럼 코드를 작성할 수 있으며, React는 실제로 변경된 구성요소만 렌더링합니다.이 선택적 렌더링은 성능을 크게 [21]향상시킵니다.

업데이트

언제ReactDOM.render[22] 동일한 구성 요소 및 대상에 대해 다시 호출되며, React는 Virtual DOM의 새 UI 상태를 나타내며, 실제 DOM의 어떤 부분([23]있는 경우)을 변경해야 하는지 결정합니다.

Updates to realDOM are subject to virtualDOM
가상의DOM은 실시간으로 손쉽게 실제 DOM을 업데이트합니다.

라이프사이클 방법

클래스 기반 구성 요소의 수명 주기 방법은 구성 요소의 수명 동안 설정된 지점에서 코드를 실행할 수 있는 후크 형식을 사용합니다.

  • ShouldComponentUpdate개발자가 렌더가 필요하지 않은 경우 false를 반환하여 구성 요소의 불필요한 재실행을 방지할 수 있습니다.
  • componentDidMount구성 요소가 "마운트"되면(사용자 인터페이스에서 종종 DOM 노드와 연결하여 구성 요소가 생성됨) 호출됩니다.일반적으로 API를 통해 원격 소스에서 데이터 로드를 트리거하는 데 사용됩니다.
  • componentWillUnmount구성 요소를 해체하거나 "장착 해제"하기 직전에 호출됩니다.이는 일반적으로 구성 요소의 마운트 해제(예: 제거)와 함께 단순히 제거되지 않는 구성 요소에 대한 리소스 요구 종속성을 제거하는 데 사용됩니다.setInterval()구성 요소와 관련된 인스턴스 또는 구성 요소의 존재로 인해 "문서"에 설정된 "eventListener")
  • render는 가장 중요한 라이프사이클 방법이며 모든 구성요소에서 유일하게 필요한 방법입니다.일반적으로 구성 요소의 상태가 업데이트될 때마다 호출되며, 이는 사용자 인터페이스에 반영되어야 합니다.

JSX

주요 기사: JSX

JSX 또는 JavaScript 구문 확장은 JavaScript 언어 [24]구문의 확장입니다.HTML과 비슷하게 JSX는 많은 개발자에게 익숙한 구문을 사용하여 구성 요소 렌더링을 구성하는 방법을 제공합니다.리액트 구성 요소는 일반적으로 JSX를 사용하여 작성되지만, 그럴 필요는 없습니다(구성 요소가 순수 자바스크립트로 작성될 수도 있음).JSX는 Facebook에서 PHP용으로 만든 XHP라는 확장 구문과 유사합니다.

JSX 코드의 예:

학급 앱. 확장된 반응.요소 {   렌더() {     돌아가다 (       <디브>         <p>머리글</p>         <p>내용물</p>         <p>바닥글</p>       </디브>     );   } }

HTML을 뛰어넘는 아키텍처

React의 기본 아키텍처는 브라우저에서 HTML을 렌더링하는 것 이상으로 적용됩니다.예를 들어, Facebook에는 다음과 같은 동적 차트가 있습니다.<canvas>태그 [25]및 Netflix와 PayPal은 범용 로딩을 사용하여 서버와 클라이언트 [26][27]모두에서 동일한 HTML을 렌더링합니다.

서버 측 렌더링

SSR(Server-side rendering)은 브라우저가 아닌 서버에서 클라이언트 측 JavaScript 응용프로그램을 렌더링하는 프로세스를 말합니다.이렇게 하면 특히 연결이나 장치 속도가 느린 사용자의 경우 응용 프로그램의 성능이 향상될 수 있습니다.

SSR을 사용하면 클라이언트로 전송되는 초기 HTML에는 응용 프로그램의 완전한 렌더링된 UI가 포함됩니다.이를 통해 클라이언트의 브라우저는 UI를 렌더링하기 전에 JavaScript가 다운로드되고 실행될 때까지 기다릴 필요 없이 UI를 즉시 표시할 수 있습니다.

React는 SSR을 지원하므로 개발자는 서버에서 React 구성요소를 렌더링하고 결과 HTML을 클라이언트로 보낼 수 있습니다.이것은 검색 엔진 최적화 목적뿐만 아니라 응용 프로그램의 성능을 향상시키는 데 유용할 수 있습니다.

컨스 표현 = 요구하다('''비공식'''); 컨스 반응 = 요구하다('''비공식'''); 컨스 { 렌더ToString } = 요구하다('sys-dom/server');  컨스 앱. = 표현();  앱..얻다('/', (리크, res) => {   컨스 html = 렌더ToString(<내 앱 />);   res.보내세요(` <!doctype html> <<고객명> <본체> <div id="root">${html}</div> <script src="/slot.js"></script> </body> </cisco> `); });  앱..들어봐(3000, () => {   콘솔.로그.('포트 3000에서 서버 수신 중'); });

관용구

React는 전체 응용 프로그램 라이브러리를 제공하지 않습니다.사용자 인터페이스를[3] 구축하기 위해 특별히 설계되었기 때문에 일부 개발자가 애플리케이션을 구축하는 데 필요하다고 생각할 수 있는 도구는 많이 포함되어 있지 않습니다.따라서 개발자가 네트워크 액세스 또는 로컬 데이터 저장 수행과 같은 작업을 수행하기 위해 선호하는 라이브러리를 선택할 수 있습니다.도서관이 성숙해짐에 따라 일반적인 사용 패턴이 나타났습니다.

단방향 데이터 흐름

React의 단방향 데이터 흐름 개념 지원(Angular와 대조될 수 있음)JS의 양방향 흐름), Flux 아키텍처는 널리 사용되는 모델-뷰-컨트롤러 아키텍처의 대안으로 개발되었습니다.플럭스는 중앙 디스패처를 통해 저장소로 전송되는 작업을 특징으로 하며 저장소에 대한 변경 사항은 다시 [28]보기로 전파됩니다.React와 함께 사용할 경우 이 전파는 구성 요소 속성을 통해 수행됩니다.Flux의 개념 이후로, Flux는 Redux와 MobX와 [29]같은 라이브러리로 대체되었습니다.

플럭스는 관찰자 [30]패턴의 변형으로 간주될 수 있습니다.

Flux 아키텍처 아래의 React 구성 요소는 전달된 모든 속성을 직접 수정해서는 안 되며, 스토어를 수정하기 위해 디스패처에 의해 전송되는 동작을 생성하는 콜백 함수를 전달해야 합니다.작업은 발생한 작업을 설명하는 역할을 하는 개체입니다. 예를 들어, 한 사용자가 다른 사용자를 "따라가는" 작업에는 사용자 ID, 대상 사용자 ID 및 유형이 포함될 수 있습니다.USER_FOLLOWED_ANOTHER_USER모델로 생각할 수 있는 매장은 파견자로부터 받은 조치에 따라 자체적으로 변경할 수 있습니다[31].

이 패턴은 때때로 "속성은 아래로, 작업은 위로 이동"으로 표현됩니다.플럭스의 많은 구현은 그것의 시작 이후 만들어졌으며, 아마도 가장 잘 알려진 것은 종종 단일 진실 [32]소스라고 불리는 단일 저장소를 특징으로 하는 리덕스일 것입니다.

2019년 2월에.useReducer16.8 릴리스에서 React 후크로 도입되었습니다.Redux와 일치하는 API를 제공하여 개발자가 구성 요소 [33]상태에 로컬인 Redux와 유사한 저장소를 만들 수 있습니다.

미래 개발

핵심 팀 토론 [34]포럼을 통해 프로젝트 상태를 추적할 수 있습니다.그러나 React의 주요 변경 사항은 React 저장소의 미래 문제와 요청 [35][36]꺼내기를 거칩니다.이를 통해 React 커뮤니티는 새로운 잠재적 기능, 실험적 API 및 JavaScript 구문 개선에 대한 피드백을 제공할 수 있습니다.

역사

리액트는 메타의 소프트웨어 엔지니어인 Jordan Walke에 의해 만들어졌으며, 그는 "팩스JS"[37][38]라고 불리는 리액트의 초기 프로토타입을 출시했습니다.그는 PHP용 HTML 구성 요소 라이브러리인 XHP의 영향을 받았습니다.그것은 2011년에 페이스북의 뉴스 피드에 처음 배포되었고, [citation needed]이후 2012년에 인스타그램에 배포되었습니다.2013년 [38]5월 미국 JS Conf에서 오픈 소스로 제공되었습니다.

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

2017년 4월 18일 페이스북은 리액트의 기존 렌더링 알고리즘인 [39]스택과 달리 새로운 렌더링 내부 알고리즘 세트인 리액트 파이버를 발표했습니다.React Fiber는 React [40][needs update]라이브러리의 향후 개선 및 기능 개발의 토대가 될 예정이었습니다.React를 사용한 프로그래밍의 실제 구문은 변경되지 않으며 구문이 실행되는 방식만 [41]변경되었습니다.React의 오래된 렌더링 시스템인 Stack은 동적 변화에 대한 시스템의 초점이 이해되지 않는 시기에 개발되었습니다.스택은 복잡한 애니메이션을 그리는 속도가 느렸습니다. 예를 들어, 모든 것을 하나의 청크에서 수행하려고 했습니다.섬유는 애니메이션을 여러 프레임에 걸쳐 분산될 수 있는 세그먼트로 분할합니다.마찬가지로, 페이지의 구조는 별도로 유지관리되고 업데이트될 수 있는 세그먼트로 분할될 수 있습니다.JavaScript 함수와 가상 DOM 객체는 "fiber"라고 불리며, 각각 개별적으로 작동하고 업데이트할 수 있어 화면에서 [42]더 부드러운 렌더링이 가능합니다.

2017년 9월 26일 [43]리액트 16.0이 공개되었습니다.

2020년 8월 10일, 리액트 팀은 리액트 v17.0의 첫 번째 릴리스 후보를 발표했으며, 리액트 개발자 대면 [44]API에 큰 변화가 없는 첫 번째 주요 릴리스로 주목받고 있습니다.

2022년 3월 29일, 리액트 18은 새로운 동시 렌더러, 자동 배치 및 [45]서스펜스를 포함한 서버 측 렌더링 지원을 도입했습니다.

버전
버전 출시 날짜 변화들
0.3.0 2013년 5월 29일 초기 공개 릴리스
0.4.0 2013년 7월 20일 주석 노드 지원<div>{/* */}</div>향상된 서버 측 렌더링 API, Removed React.autoBind, 키 프롭 지원, 폼 개선, 버그 수정.
0.5.0 2013년 10월 20일 메모리 사용량, 선택 및 구성 이벤트 지원, mixins에서 getInitialState 및 getDefaultProps 지원, React.version 및 React.isValidClass 추가, Windows 호환성 향상
0.8.0 2013년 12월 20일 행 & 콜, 지연 & 비동기, 루프에 대한 지원이 추가되었습니다.<audio>&<video>autoCorrect 속성.ContextMenu 이벤트, 업그레이드된 jstransform 및 esprima-fb 도구, 업그레이드된 browserify에 추가되었습니다.
0.9.0 2014년 2월 20일 crossOrigin, download and hrefLang, mediaGroup and muted, 샌드박스, 심리스 및 srcDoc, 스코프 속성, 추가됨, arrayOf, 구성 요소, 하나의 OfType, 렌더링 가능, React에 대한 지원이 추가되었습니다.PropTypes, onMouseOver 및 onMouseOut 이벤트에 대한 지원 추가, onLoad 및 onError에 대한 지원 추가<img>요소들.
0.10.0 2014년 3월 21일 srcSet 및 textAnchor 특성에 대한 지원 추가, 불변 데이터에 대한 업데이트 기능 추가, 모든 void 요소가 닫는 태그를 삽입하지 않도록 합니다.
0.11.0 2014년 7월 17일 향상된 SVG 지원, 정규화된 e.view 이벤트, $apply 명령 업데이트, 네임스페이스 지원 추가, 새로운 변환 추가dist/에 사전 빌드된 패키지를 포함하는 Details API를 사용하면 MyComponent()가 인스턴스가 아닌 설명자를 반환합니다.
0.12.0 2014년 11월 21일 이를 폐지하기 위해 도입된 새 기능 스프레드 연산자({...})가 추가되었습니다.transferPropsTo, acceptCharset, 클래스에 대한 지원이 추가되었습니다.ID, 매니페스트 HTML 특성, API에 추가된 React.addons.batchedUpdates, @jsxReact.DOM은 더 이상 필요하지 않습니다. CSS 전환 문제를 해결했습니다.
0.13.0 2015년 3월 10일 0.12에서 경고한 사용되지 않는 패턴이 더 이상 작동하지 않습니다. 참조 순서가 변경되었습니다. 속성이 제거되었습니다._보류 중인 주와 이것._rootNodeID, ES6 클래스 지원, API React.findDOMNode(구성 요소) 추가, 반복기 및 불변-js 시퀀스 지원, 새로운 기능 추가React.addons.createFragment, 더 이상 사용되지 않는 React.addons.classSet.
0.14.1 2015년 10월 29일 srcLang, 기본, 종류 특성 및 색상 특성에 대한 지원 추가, DOM 노드에서 레거시 .props 액세스 보장, Fixed scryRenderedDOMComponents클래스를 사용하여 react-dom.js를 추가했습니다.
15.0.0 2016년 4월 7일 초기 렌더에서 HTML을 생성하는 대신 document.createElement를 사용합니다. 더 이상 추가하지 않습니다.<span>s, 향상된 SVG 지원,ReactPerf.getLastMeasurements()불투명합니다. 경고와 함께 도입된 새로운 권장 사항입니다. 여러 개의 작은 메모리 누수를 수정합니다. React DOM은 이제 인용 및 프로필 HTML 특성과 cssFloat, gridRow 및 gridColumn CSS 속성을 지원합니다.
15.1.0 2016년 5월 20일 배치 버그 수정, 최신 개체 할당 사용 확인, 회귀 분석 수정, 병합 유틸리티 사용 제거, 일부 모듈 이름 변경.
15.2.0 2016년 7월 1일 구성 요소 스택 정보를 포함하고, 마운트 시간에 프롭 유효성 검사 중지, 반응 추가를 수행합니다.PropTypes.symbol, 부하 처리 추가<link>및 오류 처리 시<source>요소, 추가isRunning()API, 성능 회귀 분석을 수정합니다.
15.3.0 2016년 7월 30일 반응 추가.PureComponent, 중첩된 서버 렌더링 문제 수정, xmlns, xmlnsXlink를 추가하여 SVG 특성 및 HTML 특성에 대한 referrerPolicy를 지원하고 Ref를 사용하여 React Perf Add-on, Fixed 문제를 업데이트합니다.
15.3.1 2016년 8월 19일 개발 빌드 성능 향상, 내부 후크 정리, fbjs 업그레이드, React 시작 시간 개선, 서버 렌더링 시 메모리 누수 수정, React 테스트 렌더러 수정, 변경 추적console.error에 Count 불변을 누릅니다.
15.4.0 2016년 11월 16일 React 패키지 및 브라우저 빌드에는 React DOM, 향상된 개발 성능, 수정된 간헐적 테스트 실패, 업데이트 배치된 업데이트 API, React Perf 및ReactTestRenderer.create().
15.4.1 2016년 11월 23일 변수 할당, 고정 이벤트 처리, AMD 환경과 브라우저 빌드의 고정 호환성을 재구성합니다.
15.4.2 2017년 1월 6일 빌드 문제 수정, 누락된 패키지 종속성 추가, 오류 메시지 개선.
15.5.0 2017년 4월 7일 react-dom/test-utils 추가, 피어 종속성 제거, Closure 컴파일러 문제 수정, React.createClass 및 React에 대한 사용 중지 경고 추가.PropTypes, Fixed Chrome 버그.
15.5.4 2017년 4월 11일 얕은 렌더러에 배치된 업데이트를 노출하여 효소와의 호환성을 수정합니다. 프로프타입 버전 업데이트, 느슨한 환경 변환을 포함하도록 리액트-addons-create-fragment 패키지 수정.
15.6.0 2017년 6월 13일 스타일 특성 및 그리드 스타일 속성에서 CSS 변수에 대한 지원 추가, 반응에 따라 추가 기능에 대한 AMD 지원 수정, 불필요한 종속성 제거, React.createClass 및 React에 대한 사용 중지 경고 추가.DOM 공장 도우미.
16.0.0 2017년 9월 26일 "오류 경계"의 도입으로 향상된 오류 처리, React DOM은 비표준 특성 전달, setState 동작에 대한 사소한 변경, react-with-addons.js 빌드 제거, AddReact.createClass as create-react-class, React를 허용합니다.PropTypes as prop-type, React.반응 돔 공장으로서의 DOM은 스케줄링 및 라이프사이클 방법의 동작에 대한 변경 사항입니다.
16.1.0 2017년 11월 9일 바우어 릴리스 중단, UMD 빌드에서 실수로 추가된 추가 글로벌 변수 수정, 마우스 입력 및 마우스 탈퇴 수정, 수정 <텍스트 영역> 자리 표시자 수정, 사용하지 않은 코드 제거, 누락된 패키지 추가.json 종속성, React DevTools에 대한 지원 추가.
16.3.0 2018년 3월 29일 공식적으로 지원되는 새 컨텍스트 API 추가, 새 패키지 추가SSR로 포털을 렌더링할 때 무한 루프 방지, 이 .state 문제 해결, IE/Edge 문제 해결.
16.3.1 2018년 4월 3일 private API 접두사 지정, 개발 모드에서 성능 회귀 및 오류 처리 버그 수정, 피어 종속성 추가, fragment 사용 시 IE11에서 잘못된 긍정 경고 수정.
16.3.2 2018년 4월 16일 IE 충돌 수정, 사용자 타이밍 측정에서 레이블 수정, UMD 빌드 추가, 중첩으로 unsible_observedBits API의 성능 향상.
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 추가, 브라우저용 Add on AuxClick 이벤트, 마우스 이벤트에 이동 X 및 이동 Y 필드 추가, 접선 압력 및 트위스트 필드 추가를 포인터 이벤트에 추가합니다.
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일 후크 추가, 추가ReactTestRenderer.act()그리고.ReactTestUtils.act()일괄 업데이트의 경우 React.lazy(), 사용 개선Reducer Hook lazy 초기화 API에 전달된 동기식 활성화를 지원합니다.
16.8.6 2019년 3월 27일 useReducer(), Safari DevTools에서 프레임 경고 수정, contextType이 Context로 설정된 경우 경고에서 잘못된 구제금융을 수정합니다.컨텍스트 대신 소비자, contextType이 잘못된 값으로 설정된 경우 경고.
16.9.0 2019년 8월 9일 더하다성능 측정을 프로그래밍 방식으로 수집하기 위한 React.Profiler API.unsible_createRoot 대신 unsible_ConcurrentMode 제거
16.10.0 2019년 9월 27일 후크 업데이트가 메모되지 않은 에지 케이스를 수정합니다.업데이트 중에 수분 공급을 잘못하지 않도록 수분 공급 시기를 결정하기 위한 휴리스틱을 수정합니다.메모리를 절약하기 위해 마운트 해제 중에 추가 섬유 필드를 지웁니다.Firefox에서 필수 텍스트 필드로 버그를 수정합니다.사용 가능한 경우 인라인 폴리필 대신 Object.is 을 선호합니다.서스펜스와 오류 처리를 혼합할 때 버그를 수정합니다.
16.10.1 2019년 9월 28일 수화 중 서스펜스 불일치가 자동으로 진행되도록 하여 Next.js 앱에서 회귀 수정
16.10.2 2019년 10월 3일 이벤트 플러그인 추출기의 인수 순서를 복원하여 react-native-web에서 회귀 분석 수정
16.11.0 2019년 10월 22일 중첩된 대응 컨테이너 내에서 마우스 입력 처리기가 두 번 실행되지 않도록 수정합니다.unsible_createRoot 및 unsible_createSyncRoot 실험 API를 제거합니다.(이들은 실험 채널에서 createRoot 및 createSyncRoot로 사용할 수 있습니다.
16.12.0 2019년 11월 14일 DOM 반응 - 수동 효과 수정(useEffect) 다중 루트 앱에서 실행되지 않습니다.

대응 - 수정lazy그리고.memo유형:구성요소 대신 요소로 간주됨

16.13.0 2020년 2월 26일 동시 대응 모드에서 추가된 기능입니다.

React core 라이브러리 및 React Dom에서 회귀 분석을 수정합니다.

16.13.1 2020년 3월 19일 레거시 모드 서스펜스에서 버그를 수정합니다.

클래스 렌더 수명 주기 내에서 발생하는 구성 요소 간 업데이트에 대한 되돌리기 경고

16.14.0 2020년 10월 14일 새로운 JSX 변환에 대한 지원을 추가합니다.
17.0.0 2020년 10월 20일 "새로운 기능 없음"은 이전 버전에서 점진적인 React 업데이트를 활성화합니다.

새 JSX 변환 추가, 이벤트 위임에 대한 변경 사항

17.0.1 2020년 10월 22일 React DOM - IE11의 충돌을 해결합니다.
17.0.2 2021년 3월 22일 DOM 대응 - 사용되지 않는 종속성을 제거하여 다음을 해결합니다.SharedArrayBuffer교차 격리 경고입니다.
18.0.0 2022년 3월 29일 동시 대응, 자동 배치, 새로운 서스펜스 기능, 전환, 클라이언트 및 서버 렌더링 API, 새로운 엄격 모드 동작, 새로운 후크
18.1.0 2022년 4월 26일 다양한 수정 및 성능 향상
18.2.0 2022년 6월 14일 더 많은 수정 및 성능 향상

라이센싱

2013년 5월 리액트의 초기 공개 릴리스는 Apache 라이센스 2.0을 사용했습니다.2014년 10월, React 0.12.00은 이 라이센스를 3-clause BSD 라이센스로 대체하고 소프트웨어와 [46]관련된 Facebook 특허의 사용을 허용하는 별도의 PENTES 텍스트 파일을 추가했습니다.

본 계약에 따라 부여된 라이센스는 (a) 직접적, 간접적 또는 기여적 침해 또는 특허 침해 유도를 주장하는 (소송, 주장 또는 기타 조치를 포함하여) 청구를 하는 모든 사람에 대해 자동으로 예고 없이 종료됩니다. (i) 페이스북 또는 그 자회사 또는 계열사,이러한 청구가 소프트웨어와 관련이 있는지 여부, (ii) Facebook 또는 그 자회사나 계열사의 소프트웨어, 제품 또는 서비스에서 전체 또는 일부 청구가 발생한 경우, 이러한 청구가 소프트웨어와 관련이 있는지 여부,또는 (iii) 소프트웨어와 관련된 모든 당사자에 의한, 또는 (b) Facebook의 특허 클레임에 대한 권리가 무효이거나 집행 불가능한 것.

이 파격적인 조항은 리액트 사용자 커뮤니티에서 논란과 논쟁을 일으켰는데, 예를 들어 페이스북이 블로그나 다른 곳에 조치를 게시하여 "다른 조치"를 취하도록 촉구하는 라이센스 소유자를 고소하는 경우 등 많은 시나리오에서 페이스북이 라이센스를 취소할 수 있는 권한을 부여하는 것으로 해석될 수 있기 때문입니다.페이스북이 해지 조항을 부당하게 악용하거나 리액트를 제품에 통합하면 스타트업 기업의 미래 [47]인수가 복잡해질 수 있다는 우려가 많았습니다.

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

본 계약에 따라 부여된 라이센스는 귀하(또는 귀하의 자회사, 법인 계열사 또는 대리인)가 직간접적으로 특허 주장을 개시하거나 (i) 페이스북 또는 자회사 또는 법인 계열사에 대한 특허 주장에 직접적인 재정적 이익을 취하는 경우 자동으로 예고 없이 종료됩니다.(ii) 이러한 특허 주장이 Facebook 또는 그 자회사 또는 기업 계열사의 소프트웨어, 기술, 제품 또는 서비스의 전부 또는 일부로부터 발생한 경우 또는 (iii) 소프트웨어와 관련된 모든 당사자에 대해 발생한 경우, [...] "특허 주장"은 직접적, 간접적,또는 교차 특허권 또는 [49]반청구권을 포함하여 특허권을 침해하거나 침해하도록 유도하는 행위.

Apache Software Foundation은 이 라이센스 계약이 라이센스 정책과 호환되지 않는다고 판단했습니다. "라이센스 계약자가 아닌 라이센스 계약자에게 유리하게 불균형한 소프트웨어의 다운스트림 소비자에게 위험을 전달하여 범용 기부자가 되는 Apache 법적 정책을 위반합니다."및 "[Apache License 2.0]에 있는 하위 집합이 아니며 [Apache License 2.0][50]으로 하위 라이센스를 부여할 수 없습니다."2017년 8월, 페이스북은 아파치 재단의 다운스트림 우려를 일축하고 [51][52]라이선스 재검토를 거부했습니다.그 다음 달, 워드프레스는 구텐베르크와 칼립소 프로젝트를 [53]리액트에서 바꾸기로 결정했습니다.

2017년 9월 23일, 페이스북은 다음 주에 표준 MIT 라이선스로 Flow, Jest, React 및 Imputable.js를 재라이센스할 [54]것이라고 발표했습니다.

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

참고 항목

레퍼런스

  1. ^ Occhino, Tom; Walke, Jordan. "JS Apps at Facebook". YouTube. Retrieved 22 Oct 2018.
  2. ^ "18.2.0 (June 14, 2022)". Retrieved 23 June 2022.
  3. ^ a b "React - A JavaScript library for building user interfaces". reactjs.org. Retrieved 7 April 2018.{{cite web}}CS1 유지보수: url-status(링크)
  4. ^ "Chapter 1. What Is React? - What React Is and Why It Matters [Book]". www.oreilly.com. Retrieved 2023-05-06.{{cite web}}CS1 유지보수: url-status(링크)
  5. ^ Krill, Paul (May 15, 2014). "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld. Retrieved 2021-02-23.{{cite web}}CS1 유지보수: url-status(링크)
  6. ^ Hemel, Zef (June 3, 2013). "Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews". infoq.com. Retrieved 2022-01-11.{{cite web}}CS1 유지보수: url-status(링크)
  7. ^ Dawson, Chris (July 25, 2014). "JavaScript's History and How it Led To ReactJS". The New Stack. Retrieved 2020-07-19.{{cite web}}CS1 유지보수: url-status(링크)
  8. ^ Dere, Mohan (2018-02-19). "How to integrate create-react-app with all the libraries you need to make a great app". freeCodeCamp. Retrieved 2018-06-14.{{cite news}}CS1 유지보수: url-status(링크)
  9. ^ Panchal, Krunal (2018-02-19). "Angular vs React Detailed Comparison". Groovy Web. Retrieved 2022-04-25.{{cite news}}CS1 유지보수: url-status(링크)
  10. ^ Schwarzmüller, Max (2018-05-01). "React - The Complete Guide". O'Reilly. Packt Publishing. Retrieved 19 February 2022.{{cite web}}CS1 유지보수: url-status(링크)
  11. ^ "Components and Props". React. Facebook. Retrieved 7 April 2018.{{cite web}}CS1 유지보수: url-status(링크)
  12. ^ "Introducing Hooks". react.js. Retrieved 2019-05-20.
  13. ^ "Hooks at a Glance – React". reactjs.org. Retrieved 2019-08-08.
  14. ^ "What the Heck is React Hooks?". Soshace. 2020-01-16. Retrieved 2020-01-24.
  15. ^ "Using the State Hook – React". reactjs.org. Retrieved 2020-01-24.
  16. ^ "Using the Effect Hook – React". reactjs.org. Retrieved 2020-01-24.
  17. ^ "Hooks API Reference – React". reactjs.org. Retrieved 2020-01-24.
  18. ^ "Rules of Hooks – React". reactjs.org. Retrieved 2020-01-24.
  19. ^ "Building Your Own Hooks – React". reactjs.org. Retrieved 2020-01-24.
  20. ^ "Refs and the DOM". React Blog. Retrieved 2021-07-19.{{cite web}}CS1 유지보수: url-status(링크)
  21. ^ "React: The Virtual DOM". Codecademy. Retrieved 2021-10-14.{{cite web}}CS1 유지보수: url-status(링크)
  22. ^ "ReactDOM – React". reactjs.org. Retrieved 2023-01-08.
  23. ^ "Reconciliation – React". reactjs.org. Retrieved 2023-01-08.
  24. ^ "Draft: JSX Specification". JSX. Facebook. 2022-03-08. Retrieved 7 April 2018.{{cite web}}CS1 유지보수: url-status(링크)
  25. ^ Hunt, Pete (2013-06-05). "Why did we build React? – React Blog". reactjs.org. Retrieved 2022-02-17.{{cite web}}CS1 유지보수: url-status(링크)
  26. ^ "PayPal Isomorphic React". medium.com. 2015-04-27. Archived from the original on 2019-02-08. Retrieved 2019-02-08.
  27. ^ "Netflix Isomorphic React". netflixtechblog.com. 2015-01-28. Retrieved 2022-02-14.{{cite web}}CS1 유지보수: url-status(링크)
  28. ^ "In Depth OverView". Flux. Facebook. Retrieved 7 April 2018.
  29. ^ "Flux Release 4.0". Github. Retrieved 26 February 2021.
  30. ^ Johnson, Nicholas. "Introduction to Flux - React Exercise". Nicholas Johnson. Retrieved 7 April 2018.
  31. ^ Abramov, Dan. "The History of React and Flux with Dan Abramov". Three Devs and a Maybe. Retrieved 7 April 2018.
  32. ^ "State Management Tools - Results". The State of JavaScript. Retrieved 29 October 2021.
  33. ^ v16.8 대응:훅이 달린 사람
  34. ^ "Meeting Notes". React Discuss. Retrieved 2015-12-13.
  35. ^ "reactjs/react-future - The Future of React". GitHub. Retrieved 2015-12-13.
  36. ^ "facebook/react - Feature request issues". GitHub. Retrieved 2015-12-13.
  37. ^ Walke, Jordan. "FaxJS". Retrieved 11 July 2019.
  38. ^ a b Papp, Andrea (4 April 2018). "The History of React.js on a Timeline". RisingStack. Retrieved 11 July 2019.
  39. ^ Lardinois, Frederic (18 April 2017). "Facebook announces React Fiber, a rewrite of its React library". TechCrunch. Retrieved 19 April 2017.
  40. ^ "React Fiber Architecture". Github. Retrieved 19 April 2017.
  41. ^ "Facebook announces React Fiber, a rewrite of its React framework". TechCrunch. Retrieved 2018-10-19.
  42. ^ "GitHub - acdlite/react-fiber-architecture: A description of React's new core algorithm, React Fiber". github.com. Retrieved 2018-10-19.
  43. ^ "React v16.0". react.js. 2017-09-26. Retrieved 2019-05-20.
  44. ^ url=https://reactjs.org/blog/2020/08/10/react-v17-rc.html
  45. ^ a b "React v18.0". reactjs.org. Retrieved 2022-04-12.
  46. ^ "React CHANGELOG.md". GitHub.
  47. ^ Liu, Austin. "A compelling reason not to use ReactJS". Medium.
  48. ^ "Updating Our Open Source Patent Grant".
  49. ^ "Additional Grant of Patent Rights Version 2". GitHub.
  50. ^ "ASF Legal Previously Asked Questions". Apache Software Foundation. Retrieved 2017-07-16.
  51. ^ "Explaining React's License". Facebook. Retrieved 2017-08-18.
  52. ^ "Consider re-licensing to AL v2.0, as RocksDB has just done". Github. Retrieved 2017-08-18.
  53. ^ "WordPress to ditch React library over Facebook patent clause risk". TechCrunch. Retrieved 2017-09-16.
  54. ^ "Relicensing React, Jest, Flow, and Immutable.js". Facebook Code. 2017-09-23.
  55. ^ Clark, Andrew (September 26, 2017). "React v16.0§MIT licensed". React Blog.
  56. ^ Hunzaker, Nathan (September 25, 2017). "React v15.6.2". React Blog.

외부 링크