반응(JavaScript 라이브러리)

React (JavaScript library)
오픈 소스 모바일 애플리케이션 프레임워크에 대해서는 React Native를 참조하십시오.
반응
React-icon.svg
원저작자조던 월크
개발자메타 및 커뮤니티
초기 릴리즈2013년 5월 29일, 9년 전(2013년 5월 29일)[1]
안정된 릴리스
20[2].2.0 / 2022년 6월 14일; 50일 전 (2022년 6월 14일)
저장소
기입처자바스크립트
플랫폼웹 플랫폼
유형자바스크립트 라이브러리
면허증.MIT 라이선스
웹 사이트reactjs.org Edit this on Wikidata

반응(React.js 또는 반응이라고도 함)JS)는 UI 컴포넌트를 기반으로 사용자 인터페이스를 구축하기 위한 무료 오픈 소스 프런트 엔드 JavaScript[3] 라이브러리입니다.Meta(구 Facebook)와 개인 개발자 및 [4][5][6]기업 커뮤니티에 의해 관리된다.React는 Next.js와 같은 프레임워크를 사용하여 단일 페이지, 모바일 또는 서버 렌더링 애플리케이션을 개발할 때 기반으로 사용할 수 있습니다.그러나 React는 상태 관리 및 DOM에 대한 렌더링에만 관여하므로 React 응용 프로그램을 만들려면 일반적으로 라우팅에 추가 라이브러리를 사용해야 하며 특정 클라이언트 [7][8]측 기능도 필요합니다.

기본 사용법

다음은 JSX 및 JavaScript로 작성된 웹의 React 사용 방법의 기본적인 예입니다. 

수입품 반응 부터 '실패'; 수입품 리액트돔 부터 'block-dom/client';  컨스턴트 인사 = () => {     돌아가다 (         < >나누다 클래스명="헬로월드'>             < >h1>안녕, 세계!</h1>         < >/div>     ); };  컨스턴트 앱. = () => {     돌아가다 < >인사 />; };  컨스턴트 뿌리 = 리액트돔.createRoot(문서.요소 취득 기준아이디('root'));  뿌리.표현하다(     < >반응.엄밀한 모드>         < >앱. />     < >/React.Strict Mode > );

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

<!DOSCTYPE html>  < >html언어="en"> < >머리>     < >메타문자 집합='utf-8'/>   <title> 어플리케이션 대응 </title> </머리> < >몸>   <noscript>이 앱을 실행하려면 JavaScript를 활성화해야 합니다.</noscript>    < >나누다아이디="루트"</>나누다> </몸> </html>

그Greeting함수는 유명한 소개 "Hello, world"를 표시하는 React 컴포넌트입니다.

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

<div class="hello-world"> <h1> 안녕, 월드!</h1> </div>

특장점

선언적

리액션은 선언적 프로그래밍 패러다임을 고수합니다.개발자는 애플리케이션의 각 상태에 대한 보기를 설계하고, React는 데이터가 변경되면 구성요소를 업데이트 및 렌더링합니다.이것은 필수 프로그래밍과는 [9]대조적입니다.

구성 요소들

리액트 코드는 컴포넌트라고 불리는 엔티티로 구성됩니다.이러한 구성 요소는 재사용 가능하며 명명 규칙(camelCase 대문자)으로 Pascal 대문자 뒤에 SRC 폴더에 생성되어야 합니다.React DOM 라이브러리를 사용하여 DOM의 특정 요소에 구성요소를 렌더링할 수 있습니다.컴포넌트를 렌더링할 때 "props"[10]를 통해 컴포넌트 간의 값을 전달할 수 있습니다.

수입품 반응 부터 "실패"; 수입품 도구. 부터 ".툴"; 컨스턴트 예 = () => {   돌아가다 (     << 고객명 >>님       < >나누다 클래스명="앱">         < >도구. 이름.=굴산 />       < >/div>     < >/>   ); };    수출. 체납 예;

위의 예에서는name'굴산'의 가치가 있는 재산이 양도되었습니다.Example의 컴포넌트Tool요소.

또,return이 섹션은 태그로 둘러싸여 있습니다.이는 에 제한이 있기 때문입니다.return하나의 값만 반환할 수 있습니다.따라서 모든 JSX 요소 및 구성요소는 단일 태그에 바인딩됩니다.

React에서 컴포넌트를 선언하는 두 가지 주요 방법은 함수 컴포넌트와 클래스 기반 컴포넌트입니다.

기능 컴포넌트

함수 컴포넌트는 함수에서 선언되어 일부 JSX를 반환합니다.

컨스턴트 인사말 = () => < >나누다>안녕 세계< >/div>;

클래스 베이스 컴포넌트

클래스 기반 컴포넌트는 ES6 클래스를 사용하여 선언됩니다. 

학급 부모 컴포넌트 확장 반응.요소 {   주 = { 색.: '녹색 };   표현하다() {     돌아가다 (       < >아이 컴포넌트 색.={이것..주.색.} />     );   } }
클래스 컴포넌트가 클래스 및 라이프 사이클 메서드의 사용에 관한 것이라면 기능 컴포넌트에는 상태 관리 및 React에서 코드를 작성할 때 발생하는 기타 문제에 대처하기 위한 후크가 있습니다.

가상 DOM

또 다른 주목할 만한 기능은 가상 문서 객체 모델 또는 가상 DOM을 사용하는 것입니다.React는 메모리 내 데이터 구조 캐시를 생성하여 그 차이를 계산하고 브라우저에 표시되는 DOM을 [11]효율적으로 업데이트합니다.이 과정을 화해라고 합니다.이렇게 하면 프로그래머는 각 변경에 대해 페이지 전체가 렌더링되는 것처럼 코드를 작성할 수 있으며, 리액트 라이브러리는 실제로 변경된 하위 구성요소만 렌더링합니다.이 선택적인 렌더링을 통해 성능이 크게 [12]향상됩니다.이것에 의해, CSS 스타일, [12]페이지의 레이아웃, 및 페이지 전체의 렌더링을 재계산할 필요가 없어집니다.

라이프 사이클 방법

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

  • shouldComponentUpdate개발자는 렌더가 필요하지 않은 경우 false를 반환함으로써 컴포넌트의 불필요한 재검출을 방지할 수 있습니다.
  • componentDidMount컴포넌트가 「마운트」되면(컴포넌트가 유저 인터페이스로 작성되어 있는 경우가 많아 DOM 노드와 관련지어 호출됩니다).이것은 일반적으로 API를 통해 원격 소스에서 데이터 로드를 트리거하기 위해 사용됩니다.
  • componentWillUnmount컴포넌트가 해체되거나 "마운트 해제"되기 직전에 호출됩니다.이는 컴포넌트 마운트 해제(예를 들어 컴포넌트 마운트 해제)로 간단히 제거되지 않는 컴포넌트에 대한 자원 요구 의존성을 해소하기 위해 일반적으로 사용됩니다.setInterval()컴포넌트와 관련된 인스턴스 또는 컴포넌트의 존재로 인해 "문서"에 설정된 "eventListener")
  • render는 가장 중요한 라이프 사이클 방법이며 컴포넌트에서 필요한 유일한 방법입니다.일반적으로 컴포넌트 상태가 갱신될 때마다 호출되며 이는 사용자 인터페이스에 반영되어야 합니다.

JSX

주요 기사: JSX

JSX 또는 JavaScript Syntax Extension은 JavaScript 언어 [13]구문의 확장입니다.HTML과 외관상 유사한 JSX는 많은 개발자들에게 익숙한 구문을 사용하여 구성요소 렌더링을 구조화하는 방법을 제공합니다.리액트 컴포넌트는 일반적으로 JSX를 사용하여 작성되지만 반드시 작성될 필요는 없습니다(컴포넌트는 순수한 JavaScript로 작성될 수도 있습니다).JSX는 Facebook이 PHP용 확장 구문인 XHP와 유사합니다.

JSX 코드의 예:

학급 앱. 확장 반응.요소 {   표현하다() {     돌아가다 (       < >나누다>         < >p>헤더</p>         < >p>내용</p>         < >p>바닥글</p>       </나누다>     );   } }

HTML 이외의 아키텍처

React의 기본 아키텍처는 브라우저에서 HTML을 렌더링하는 것 외에 적용됩니다.예를 들어, 페이스북은 다음을 렌더링하는 동적 차트를 가지고 있습니다.<canvas>태그와 [14]Netflix와 PayPal은 서버와 [15][16]클라이언트 모두에서 동일한 HTML을 렌더링하기 위해 범용 로딩을 사용합니다.

리액트 훅

후크는 개발자가 기능 컴포넌트에서 [17]반응 상태와 라이프 사이클 기능을 "후크"할 수 있도록 하는 기능입니다.후크는 클래스 내에서 작동하지 않습니다. 후크를 사용하면 클래스 [18]없이 React를 사용할 수 있습니다.

React는 다음과 같은 몇 가지 내장 후크를 제공합니다.useState,[19] useContext,useReducer,useMemo그리고.useEffect기타는 Hooks API [21]Reference에 기재되어 있습니다.[20] useState그리고.useEffect가장 일반적으로 사용되는 것은 상태와 부작용을 조절하기 위한 것입니다.

후크 규칙

후크가 의존하는 특징적인 코드 패턴을 설명하는 후크 규칙이[22] 있습니다.이것은 React로 상태를 처리하는 현대적인 방법입니다.

  1. 훅은 최상위 레벨에서만 호출해야 합니다(루프 내부 또는 문이 아닌 경우).
  2. 후크는 React 함수 컴포넌트와 커스텀 후크에서만 호출해야 하며 일반 함수나 클래스 컴포넌트는 호출하지 않습니다.

런타임에는 이러한 규칙을 적용할 수 없지만 개발 중에 많은 오류를 감지하도록 린터 등의 코드 분석 도구를 구성할 수 있습니다.이 규칙은 후크의 사용과 다른 후크를 호출할 수 있는 커스텀 [23]후크의 실장 모두에 적용됩니다.

일반적인 관용구

React는 완전한 "어플리케이션 라이브러리"를 제공하려고 하지 않습니다.사용자 인터페이스를[3] 구축하기 위해 특별히 설계되었기 때문에 일부 개발자가 애플리케이션 구축에 필요하다고 간주할 수 있는 툴은 많이 포함되어 있지 않습니다.이것에 의해, 네트워크 액세스나 로컬 데이터 스토리지등의 태스크를 실행하기 위해서 개발자가 선호하는 라이브러리를 선택할 수 있습니다.도서관이 성숙함에 따라 일반적인 사용 패턴이 나타났다.

단방향 데이터 흐름

React의 단방향 데이터 흐름 개념을 지원하기 위해(각도와 대조될 수 있음)JS의 양방향 흐름)) 플럭스 아키텍처는 인기 있는 모델 뷰 컨트롤러 아키텍처의 대안으로 개발되었습니다.플럭스는 중앙 디스패처를 통해 스토어로 전송되는 액션을 특징으로 하며 스토어의 변경은 [24]뷰로 전파됩니다.React와 함께 사용할 경우 이 전파는 구성 요소 속성을 통해 수행됩니다.개념 이후, 플럭스는 Redux나 MobX와 [25]같은 라이브러리로 대체되었습니다.

플럭스는 관찰자 [26]패턴의 변종으로 간주할 수 있습니다.

플럭스 아키텍처의 리액트 컴포넌트는 전달된 소품을 직접 변경하지 않고 디스패처가 스토어를 변경하기 위해 전송하는 액션을 작성하는 콜백 함수를 전달해야 합니다.액션은 발생한 내용을 설명하는 역할을 하는 객체입니다.예를 들어, 한 사용자를 "팔로우"하는 액션은 사용자 ID, 타깃 사용자 ID 및 유형을 포함할 수 있습니다.USER_FOLLOWED_ANOTHER_USER모델이라고 생각할 수 있는 점포는, 디스패처로부터 받은 액션에 따라, 스스로 변경할 수 있습니다.[27]

이 패턴은 "속성은 아래로, 액션은 위로"로 표현될 수 있습니다.플럭스의 많은 구현이 시작부터 만들어졌으며, 아마도 가장 잘 알려진 것은 단일 스토어를 특징으로 하는 Redux일 것입니다. 이 스토어는 종종 단일 [28]진실의 원천이라고 불립니다.

장래의 발전

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

역사

React는 Facebook의 소프트웨어 엔지니어 Jordan Walke에 의해 개발되었으며, 그는 "FaxJS"[32][33]라고 불리는 React의 초기 프로토타입을 출시했다.그는 PHP용 HTML 컴포넌트 라이브러리인 XHP의 영향을 받았다.2011년 페이스북 뉴스피드에 처음 배포된 [34]후 2012년 Instagram에 배포되었습니다.2013년 [33]5월에 JSConf US에서 오픈 소스되었습니다.

React로 안드로이드, iOS, UWP 네이티브 개발을 가능하게 하는 React Native는 2015년 2월 Facebook React Conf에서 발표되었으며 2015년 3월 오픈 소스되었다.

2017년 4월 18일 Facebook은 React의 이전 렌더링 알고리즘인 [35]Stack과는 달리 렌더링용 내부 알고리즘의 새로운 세트인 React Fiber를 발표했습니다.React Fiber는 React [36][needs update]라이브러리의 향후 개선 및 기능 개발의 기반이 되었습니다.React를 사용한 프로그래밍의 실제 구문은 변경되지 않으며 구문이 실행되는 방식만 변경됩니다.[37]React의 이전 렌더링 시스템인 Stack은 동적 변화에 대한 시스템의 초점을 이해할 수 없었던 시기에 개발되었습니다.스택이 복잡한 애니메이션을 그리는 속도가 느렸습니다. 예를 들어, 모든 애니메이션을 하나의 청크로 그리려고 했습니다.파이버는 애니메이션을 여러 프레임에 걸쳐 전개할 수 있는 세그먼트로 분할합니다.마찬가지로 페이지 구조는 별도로 유지 및 업데이트할 수 있는 세그먼트로 나눌 수 있습니다.JavaScript 함수와 가상 DOM 오브젝트를 "파이버"라고 하며, 각각 개별적으로 작동 및 업데이트할 수 있어 화면 [38]렌더링이 원활해집니다.

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

2019년 2월 16일 리액트 16.8이 [40]일반에 공개되었습니다.React [41]Hooks는 릴리즈에서 도입되었습니다.

2020년 8월 10일 React 팀은 React v17.0의 첫 번째 릴리스 후보를 발표했습니다.이는 React 개발자용 [42]API에 큰 변화가 없는 첫 번째 메이저 릴리스로 주목됩니다.

버전
버전 발매일 변화들
0.3.0 2013년 5월 29일 최초 공개
0.4.0 2013년 7월 20일 코멘트 노드 지원<div>{/* */}</div>서버측 렌더링 API의 개량, React.autoBind 삭제, 주요 프로포트의 지원, 폼의 개량, 버그 수정.
0.5.0 2013년 10월 20일 메모리 사용량 향상, 선택 및 구성 이벤트 지원, mixin의 getInitialState 및 getDefaultProps 지원, React.version 및 React.isValidClass 추가, Windows 호환성 향상
0.8.0 2013년 12월 20일 행 및 콜, 지연 및 비동기, 루프 지원 추가<audio>&<video>, autoCorrect 속성.onContextMenu 이벤트, 업그레이드된 jstransform 및 esprima-fb 도구, 업그레이드된 browserify 추가.
0.9.0 2014년 2월 20일 crossOrigin, 다운로드 및 hrefLang, mediaGroup 및 뮤트, 샌드박스, 심리스 및 srcDoc, 스코프 속성, any, arrayOf, 컴포넌트, oneOfType, 렌더링 가능, 쉐이핑 지원이 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를 사용하면 My Component()는 인스턴스가 아닌 디스크립터를 반환합니다.
0.12.0 2014년 11월 21일 새로운 기능 추가 this.transferPropsTo, acceptCharset 지원 추가, 클래스 사용을 중지하기 위해 확산 연산자({...})가 도입되었습니다.ID, 매니페스트 HTML 속성, React.addons.batchedUpdates가 API, @jsxReact에 추가되었습니다.DOM은 불필요하게 되어, CSS 트랜지션의 문제가 해결되었습니다.
0.13.0 2015년 3월 10일 0.12에서 경고한 사용되지 않는 패턴이 더 이상 작동하지 않습니다. 참조 해결 순서가 변경되었습니다. 속성 제거됨._pendingState 및 이것._rootNode(루트 노드)ID, 지원 ES6 클래스, 추가 API React.findDOMName(컴포넌트), 반복자 및 불변js 시퀀스 지원, 새로운 기능 React.addons.createFragment 추가, 폐지된 React.addons.classSet.
0.14.1 2015년 10월 29일 srcLang, 기본, 종류 속성 및 색상 속성 지원 추가, DOM 노드에서 레거시 .props 액세스 보장, 고정 scryRenderedDOM 컴포넌트With Class, 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, 추가 onLoad 처리 대상<link>및 onError 처리<source>요소, 추가isRunning()API, 성능 회귀 수정.
15.3.0 2016년 7월 30일 리액트를 추가합니다.PureComponent, 중첩된 서버 렌더링 문제 수정, SVG 속성을 지원하기 위한 xmlns, xmlnsXlink 및 referrerPolicy to HTML 속성 업데이트, Refact Perf Add-on, refixed 문제 수정
15.3.1 2016년 8월 19일 개발 빌드 성능 향상, 내부 후크 청소, fbj 업그레이드, 리액트 시작 시간 향상, 서버 렌더링 메모리 누수 수정, 리액트 테스트 렌더러 수정, 추적 변경console.error에 touchCount 불변수를 입력합니다.
15.4.0 2016년 11월 16일 React 패키지 및 브라우저 빌드에는 더 이상 React DOM, 개발 성능 향상, 간헐적 테스트 실패 수정, batchedUpdates 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 추가, peerDependency 삭제, Closure 컴파일러 문제 수정, React.createClass 및 React 권장 해제 경고 추가.PropTypes, Chrome 오류 수정.
15.5.4 2017년 4월 11일 얕은 렌더러에서 batchedUpdates를 노출하여 효소와의 호환성을 수정하고, prop-type의 업데이트 버전, loose-envify 변환을 포함하도록 react-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 빌드 삭제, react.createClass as create-react-class, react-class를 허용합니다.PropTypes를 Prop-type으로 리액트합니다.리액트 돔 팩터로서의 DOM, 스케줄링 동작 및 라이프 사이클 방식 변경.
16.1.0 2017년 11월 9일 Bower Releases 중단, UMD 빌드에서 우발적인 추가 글로벌 변수 수정, OnMouseEnter 및 onMouseLeave 부팅 수정, <textarea> 플레이스 홀더 수정, 사용하지 않는 코드 삭제, 누락된 패키지 추가.json 종속성, React DevTools 지원 추가.
16.3.0 2018년 3월 29일 공식적으로 지원되는 컨텍스트 API를 새로 추가, 새 패키지 추가 SSR로 포털을 렌더링할 때 무한 루프 방지, this.state 문제 수정, IE/Edge 문제 수정.
16.3.1 2018년 4월 3일 prefix private API, 개발 모드의 성능 회귀 및 오류 처리 버그 수정, 피어 종속성 추가, fragment 사용 시 IE11에서 false positive warning 수정.
16.3.2 2018년 4월 16일 IE 크래시 수정, 사용자 타이밍 측정 라벨 수정, UMD 빌드 추가, 네스팅을 통한 불안정_obervedBits API 성능 향상.
16.4.0 2018년 5월 24일 포인터 이벤트 사양 지원 추가, propTypes 지정 기능 추가, 읽기 컨텍스트 수정, 수정 및 수정getDerivedStateFromProps()지원, testInstance.parent crash 수정, 성능 측정을 위한 React.unstable_Profiler 컴포넌트 추가, 내부 이벤트 이름 변경.
16.5.0 2018년 9월 5일 React DevTools Profiler 지원 추가, 추가 에지 사례 오류 처리, react-dom/profiling 추가, 브라우저용 Add onAuxClick 이벤트, 마우스 이벤트에 movementX 및 movementY 필드 추가, 포인터 이벤트에 접선 압력 추가 및 트위스트 필드 추가
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()배치 업데이트의 경우 Support synchronous thenables를 React.lazy()로 전달하고 useReducer Hook lazy 초기화 API를 개선합니다.
16.8.6 2019년 3월 27일 useReducer()에서 잘못된 구제금융 수정, Safari DevTools에서 iframe 경고 수정, contextType이 Context로 설정된 경우 경고.ContextType이 잘못된 값으로 설정된 경우 Context 대신 Consumer를 선택합니다.
16.9.0 2019년 8월 9일 더하다성능 측정을 프로그래밍 방식으로 수집하기 위한 React.Profiler API입니다.불안정_createRoot 대신 불안정_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일 중첩된 React 컨테이너 내에서 마우스 입력 핸들러가 두 번 실행되지 않도록 수정합니다.unsible_createRoot 및 unsible_createSyncRoot 실험 API를 삭제합니다(이러한 API는 Experimental 채널에서 createRoot 및 createSyncRoot로 사용할 수 있습니다).
16.12.0 2019년 11월 14일 리액트 DOM - 패시브 효과 수정(useEffect)가 멀티루트 앱에서 실행되지 않습니다.

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

16.13.0 2020년 2월 26일 React Concurrent 모드에서 추가된 기능.

리액트 코어 라이브러리와 리액트 돔에서 회귀를 수정합니다.

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

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

16.14.0 2020년 10월 14일 새 JSX 변환 지원을 추가합니다.
17.0.0 2020년 10월 20일 "No New Features"를 통해 이전 버전에서 점진적으로 React 업데이트를 수행할 수 있습니다.

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

17.0.1 2020년 10월 22일 리액트 DOM - IE11 크래시 수정
17.0.2 2021년 3월 22일 Response DOM - 사용되지 않는 의존관계를 제거하여SharedArrayBuffer교차 교차 분리 경고
18.0.0 2022년 3월 29일 동시 반응, 자동 배치, 새로운 보류 기능, 전환, 클라이언트 및 서버 렌더링 API, 새로운 엄격한 모드 동작, 새로운 후크
18.1.0 2022년 4월 26일 많은 수정 및 성능 향상
18.1.2 2022년 6월 14일 기타 수정 및 성능 향상

라이선스

2013년 5월 React의 최초 공개 릴리스에는 Apache License 2.0이 사용되었습니다.2014년 10월 React 0.12.0은 이를 3개 조항 BSD 라이센스로 대체하고 소프트웨어와 [44]관련된 Facebook 특허를 사용할 수 있는 별도의 특허 텍스트 파일을 추가했습니다.

본 계약에 의거하여 부여된 라이선스는 (a) 직접적, 간접적 또는 기여적 침해 또는 유인을 주장하는 (소송, 주장 또는 기타 소송을 포함) 청구를 하는 모든 사람에 대해 자동으로 통지 없이 종료됩니다. (i) Facebook 또는 그 자회사 또는 계열사에 의한 (c)laim은 (ii) 이러한 클레임이 Facebook 또는 그 자회사 또는 계열사의 소프트웨어, 제품 또는 서비스 전체 또는 일부로부터 발생하는 경우, 해당 클레임이 소프트웨어와 관련된 것인지 여부 또는 (iii) Facebook의 특허 클레임 중 어느 한 당사자에 의한 권리도 무효라는 당사자에 의해 소프트웨어와 관련이 있습니다.또는 강제할 수 없습니다.

이 파격적인 조항은 리액트 사용자 커뮤니티에서 약간의 논란과 논쟁을 불러일으켰는데, 이는 페이스북이 많은 시나리오에서 라이선스를 취소할 수 있도록 하는 것으로 해석될 수 있기 때문이다.예를 들어 페이스북이 이 액션을 블로그나 다른 곳에 게시함으로써 라이선스를 "다른 액션"하도록 촉구할 경우이다.많은 사람들은 페이스북이 부당하게 종료 조항을 악용하거나 React를 제품에 통합하는 것이 스타트업 회사의 미래 [45]인수를 복잡하게 할 수 있다고 우려했다.

커뮤니티의 피드백을 바탕으로 Facebook은 2015년 4월 특허 부여를 보다 모호하고 관대하게 [46]갱신했다.

본 계약에 따라 부여된 라이선스는 사용자(또는 귀하의 자회사, 기업 계열사 또는 대리인)가 직접 또는 간접적으로 특허 주장을 개시하거나 직접 금전적 이익을 취하는 경우 자동으로 종료됩니다. (i) Facebook 또는 그 자회사 또는 기업 계열사에 대해 (ii) 해당 당사자에 대해 (ii)텐트 주장의 전부 또는 일부는 Facebook 또는 그 자회사 또는 기업 계열사의 소프트웨어, 기술, 제품 또는 서비스 또는 (iii) 본 소프트웨어와 관련된 모든 당사자에 대해 발생합니다.[... "특허 주장"은 직접, 간접 또는 기여 침해 또는 침해를 유도하는 소송 또는 기타 행위입니다.NY 특허(교차 청구 또는 [47]반소 포함)

Apache Software Foundation은 이 라이선스 계약이 라이선스 정책과 양립할 수 없다고 간주했습니다.이는 "라이선시가 아닌 라이선스 계약자에게 불균형한 당사 소프트웨어의 하류 소비자에게 위험을 전가함으로써 범용 기부자가 되는 Apache 법적 정책을 위반하는 것"이며 "이러한 라이센싱 계약과 양립할 수 없습니다.e [Apache License 2.0][48]로 서브라이선스는 할 수 없습니다.2017년 8월 페이스북은 아파치 재단의 하류 우려를 [49][50]일축하고 라이선스 재고를 거부했다.다음 달, Word Press는 구텐베르크와 칼립소 프로젝트를 [51]React에서 전환하기로 결정했습니다.

2017년 9월 23일, Facebook은 그 다음 주에 Flow, Jest, React 및 Imputable.js를 표준 MIT 라이선스로 재라이센스할 것이라고 발표했습니다.이 회사는 React가 "웹용 오픈 소스 소프트웨어의 광범위한 에코시스템 기반"이며, "기술적이지 [52]않은 이유로 발전을 보류하고 싶지 않다"고 말했습니다.

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

55. 리액션을 선택하는 이유다음 프로젝트를 위한 JS

외부 링크