{{위키데이터 속성 추적}}
{{소프트웨어 정보
|이름 = 리액트
|다른이름 = React
|로고 = React-icon.svg
|로고크기 = 200px
|로고설명 = 
|화면 = 
|화면크기 =
|설명 = 
|원저자 = Jordan Walke
|개발자 = [[페이스북]] 및 공동체
|발표일 = {{시작 날짜와 나이|2013|5|29}}
|최근 버전 = {{wikidata|property|reference|edit|P348}}
|최근 버전 출시일 = {{wikidata|qualifier|P348|P577}} ({{Time ago| {{wikidata|qualifier|raw|P348|P577}} }})
|미리보기 버전 = 
|미리보기 버전 출시일 = 
|지원중단 = 
|상태 = 
|저장소 = 
|프로그래밍 언어 = [[자바스크립트]]
|엔진 = 
|운영체제 = 
|플랫폼 = [[크로스 플랫폼]]
|기본포함 = 
|대체함 = 
|대체됨 = 
|서비스이름 = 
|크기 = 109 KiB (일반용)<br />710 KiB (개발용)
|표준 = 
|언어 = 
|언어수 = 
|언어각주 = 
|종류 = [[자바스크립트 라이브러리]]
|라이선스 = [[MIT 허가서]]
|허가 = 
|웹사이트 = {{공식 URL}}
|기준 = 
}}
'''리액트'''('''React''', '''React.js''' 또는 '''ReactJS''')는 [[자바스크립트 라이브러리]]의 하나로서<ref name="react">{{웹 인용|url= https://reactjs.org|title=React - A JavaScript library for building user interfaces.|website=React|access-date=7 April 2018}}</ref> [[사용자 인터페이스]]를 만들기 위해 사용된다. [[페이스북]]과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.<ref>{{웹 인용|url=https://www.infoworld.com/article/2608181/javascript/react--making-faster--smoother-uis-for-data-driven-web-apps.html |title=React: Making faster, smoother UIs for data-driven Web apps |last=Krill |first=Paul |date=May 15, 2014 |website=[[:en:InfoWorld]]}}</ref><ref>{{웹 인용|url=https://www.infoq.com/news/2013/06/facebook-react |title=Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews |last=Hemel |first=Zef |date=June 3, 2013 |website=InfoQ}}</ref><ref>{{웹 인용|url=https://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/ |title=JavaScript’s History and How it Led To ReactJS |last=Dawson |first=Chris |date=July 25, 2014 |website=The New Stack}}</ref>

리액트는 [[싱글 페이지 애플리케이션]]이나 모바일 애플리케이션 개발에 사용될 수 있다.  대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 [[웹 프레임워크|라우팅]], [[API]]통신 등의 기능이 요구되는데  리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.<ref>{{뉴스 인용|url=https://www.freecodecamp.org/news/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0/ |title=How to integrate create-react-app with all the libraries you need to make a great app|last=Dere|first=Mohan|date=2018-02-19|work=freeCodeCamp|access-date=2018-06-14}}</ref><ref>{{웹 인용|url=https://medium.com/about-codecademy/react-router-to-redux-first-router-2fea05c4c2b7|title=React Router to Redux First Router|last=Samp|first=Jon|date=2018-01-13|website=About Codecademy|access-date=2018-06-14}}</ref>

== 역사 ==
리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 그는 [[PHP]]용 [[HTML]] 컴포넌트 프레임워크인 {{임시링크|XHP|en|XHP}}에 영향을 받았다.<ref>{{웹 인용|title=React (JS Library): How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook?|url=https://www.quora.com/React-JS-Library/How-was-the-idea-to-develop-React-conceived-and-how-many-people-worked-on-developing-it-and-implementing-it-at-Facebook/answer/Bill-Fisher-17|website=Quora}}</ref>
2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 [[인스타그램|인스타그램닷컴]]에 적용되었다.<ref>{{웹 인용|url=https://www.youtube.com/watch?v=A0Kj49z6WdM|title=Pete Hunt at TXJS}}</ref> 2013년 5월 JSConf US에서 오픈 소스화되었다.

{| class="wikitable"
|+버전
|- style="position:sticky; top:0"
!버전
!출시일
|-
|0.3.0
|2013년 5월 29일
|-
|0.4.0
|2013년 7월 20일
|-
|0.5.0
|2013년 10월 20일
|-
|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년 11월 21일
|-
|0.13.0
|2015년 3월 10일
|-
|0.14.1
|2015년 10월 29일
|-
|15.0.0
|2016년 4월 7일
|-
|15.1.0
|2016년 5월 20일
|-
|15.2.0
|2016년 7월 1일
|-
|15.3.0
|2016년 7월 30일
|-
|15.3.1
|2016년 8월 19일
|-
|15.4.0
|2016년 11월 16일
|-
|15.4.1
|2016년 11월 23일
|-
|15.4.2
|2017년 1월 6일
|-
|15.5.0
|2017년 4월 7일
|-
|15.5.4
|2017년 4월 11일
|-
|15.6.0
|2017년 6월 13일
|-
|16.0.0
|2017년 9월 26일
|-
|16.1.0
|2017년 11월 9일
|-
|16.3.0
|2018년 3월 29일
|-
|16.3.1
|2018년 4월 3일
|-
|16.3.2
|2018년 4월 16일
|-
|16.4.0
|2018년 5월 24일
|-
|16.5.0
|2018년 9월 5일
|-
|16.6.0
|2018년 10월 23일
|-
|16.7.0
|2018년 12월 20일
|-
|16.8.0
|2019년 2월 6일
|-
|16.8.6
|2019년 3월 27일
|-
|16.9.0
|2019년 8월 9일
|-
|16.10.0
|2019년 9월 27일
|-
|16.10.1
|2019년 9월 28일
|-
|16.10.2
|2019년 10월 3일
|-
|16.11.0
|2019년 10월 22일
|-
|16.12.0
|2019년 11월 14일
|-
|16.13.0
|2020년 2월 26일
|-
|16.13.1
|2020년 3월 19일
|-
|16.14.0
|2020년 10월 14일
|-
|17.0.0
|2020년 10월 20일
|-
|17.0.1
|2020년 10월 22일
|-
|17.0.2
|2021년 3월 22일
|-
|18.0.0
|2022년 3월 29일
|-
|18.1.0
|2022년 4월 26일
|-
|18.2.0
|2022년 6월 14일
|}

== 기본 사용법 ==
다음은 JSX와 자바스크립트와 함께 HTML에 사용한 기초적인 예제이다.
<syntaxhighlight lang="html">
<div id="myReactApp"></div>

<script type="text/babel">
  const Greeter = ({ greeting }) => {
    return <h1>{ greeting }</h1>
  }

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>
</syntaxhighlight>
<code>Greeter</code> 클래스는 <code>greeting</code> 속성을 수용하는 리액트 컴포넌트이다.
<code>ReactDOM.render</code> 메서드는 <code>Greeter</code> 컴포넌트의 인스턴스를 생성하고 <code>greeting</code> 속성을 <code>'Hello World'</code>로 설정하며 렌더링된 컴포넌트를 차일드 요소로서 <code>myReactApp</code> id의 DOM 요소로 추가한다.

웹 브라우저에 표시될 때 결과는 다음과 같다.
<syntaxhighlight lang="html">
<div id="myReactApp">
  <h1>Hello World!</h1>
</div>
</syntaxhighlight>

== 주요 특징 ==
=== 속성과의 단방향 데이터 바인딩 ===
보통 ''props''라 불리는 속성들은 부모 컴포넌트로부터 컴포넌트에 전달된다. 컴포넌트들은 props을 하나의 불변의 값(자바스크립트 객체)들로 받는다.<ref>{{웹 인용|url=https://reactjs.org/docs/components-and-props.html#props-are-read-only|website=React|title=Components and Props|publisher=Facebook|accessdate=7 April 2018}}</ref>

=== 스테이트풀 컴포넌트 ===
상태를 컴포넌트를 통해 값을 보관하며 props를 통해 차일드 컴포넌트로 전달할 수 있다.
<syntaxhighlight lang="js">
class ParentComponent extends React.Component {
  state = { color: 'red' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}
</syntaxhighlight>

=== 가상 DOM ===
다른 저명한 기능은 가상 [[문서 객체 모델]], 즉 가상 DOM의 사용이다. 리액트는 인 메모리 데이터 구조 캐시를 만들고 결과 차이를 계산한 다음 브라우저에 표시되는 DOM을 효과적으로 업데이트한다.<ref name=workingwiththebrowser>{{웹 인용|url=https://reactjs.org/docs/refs-and-the-dom.html |title=Refs and the DOM |website=React Blog}}</ref> 이로써 프로그래머는 마치 모든 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있는데, 실제로 리액트 라이브러리는 단지 실제로 변경되는 하위 컴포넌트만을 렌더링할 뿐이다.

=== 라이프사이클 메서드 ===
라이프사이클 메서드들은 컴포넌트가 생존하는 동안 셋 포인트(set point)에 코드를 실행할 수 있게 하는 [[후킹|훅]](hook)이다.

* <code>shouldComponentUpdate</code>는 렌더가 불필요한 경우 false를 반환함으로써 개발자가 컴포넌트의 불필요한 재렌더링을 막을 수 있게 한다.
* <code>componentDidMount</code>는 컴포넌트가 '마운트'(mount)되면 호출된다. (대개 컴포넌트 [[문서 객체 모델|DOM]] 노드와 연결함으로써 사용자 인터페이스에서 만들어진다) [[API]]를 통해 원격 소스로부터 로드되는 데이터를 트리거(trigger)하기 위해 보통 사용된다.
* <code>render</code>는 가장 중요한 라이프사이클 메서드이며 어떠한 컴포넌트에서도 최소한의 필요 조건이다. 컴포넌트의 상태가 업데이트될 때마다 호출되는 것이 보통이며 사용자 인터페이스의 변경사항을 반영한다.

=== JSX ===
JSX(JavaScript XML)는 XML같은 문법을 사용하는 ECMAScript의 확장이다.<ref>{{웹 인용|title=Draft: JSX Specification|url=https://facebook.github.io/jsx/|website=JSX|publisher=Facebook|accessdate=7 April 2018}}</ref> HTML과 모습이 비슷해 보이는 JSX는 수많은 개발자들에게 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다. 리액트 컴포넌트들은 일반적으로 JSX를 사용하여 작성되지만 꼭 그렇게 할 필요는 없다. (컴포넌트들은 순수 자바스크립트로 작성할 수도 있다) JSX는 PHP를 위해 페이스북이 개발한 다른 확장 문법인 [[XHP]]와 유사하다.

JSX 코드의 예는 다음과 같다:
<syntaxhighlight lang="js">
class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}
</syntaxhighlight>
; 내재된(nested) 요소
같은 레벨의 여러 요소들은 위와 같이 <code><nowiki><div></nowiki></code> 요소와 같이 하나의 컨테이너 요소로 감싸거나
배열로 반환해야 한다<ref>{{웹 인용|url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings |title=React v16.0§New render return types: fragments and strings |last=Clark |first=Andrew |date=September 26, 2017 |website=React Blog}}</ref>.

;속성(Attributes)
JSX는 HTML이 제공하는 것을 미러링하도록 설계된 일련의 요소 속성들을 제공한다. 사용자 지정 속성들은 컴포넌트로 전달할 수도 있다<ref>{{웹 인용|url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes |title=React v16.0§Support for custom DOM attributes |last=Clark |first=Andrew |date=September 26, 2017 |website=React Blog}}</ref>. 모든 속성은 컴포넌트를 props로 받는다.

;자바스크립트 식(JavaScript expressions)
자바스크립트 식(문은 아님)은 중괄호 <code>{}</code>를 사용하여 JSX 안에 쓸 수 있다:
<syntaxhighlight lang="js">
  <h1>{10+1}</h1>
</syntaxhighlight>

위의 예는 다음과 같이 렌더링한다.
<syntaxhighlight lang="html">
  <h1>11</h1>
</syntaxhighlight>

;조건문
[[조건문|If–else 문]]은 JSX 안에서 사용할 수 없으나 조건문을 대신 사용할 수 있다. 아래의 예는 <code>{ i === 1 ? 'true' : 'false' }</code>를 문자열 <code>'true'</code>로 렌더링하는데, 그 이유는 <code>i</code>는 1과 동등하기 때문이다.
<syntaxhighlight lang="js">
class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
        <h1>{ i === 1 ? 'true' : 'false' }</h1>
      </div>
    );
  }
}
</syntaxhighlight>
함수와 JSX는 조건들 안에 사용이 가능하다:
<syntaxhighlight lang="js">
class App extends React.Component {
  render() {
    const sections = [1, 2, 3];
    return (
      <div>
        {
          sections.length > 0
            ? sections.map(n => <div>Section {n}</div>)
            : null
        }
      </div>
    );
  }
}
</syntaxhighlight>
위는 다음과 같이 렌더링된다:
<syntaxhighlight lang="html">
<div>
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>
</syntaxhighlight>

JSX로 작성된 코드는 웹 브라우저가 인식할 수 있기 전에 [[바벨 (컴파일러)|바벨]]과 같은 도구를 이용한 변환이 필요하다.<ref>{{서적 인용|url=https://books.google.com/books?id=Tg9QDwAAQBAJ|title=React for Real: Front-End Code, Untangled|last=Fischer|first=Ludovico|date=2017-09-06|publisher=Pragmatic Bookshelf|isbn=9781680504484|language=en}}</ref> 이러한 처리는 일반적으로 애플리케이션이 [[소프트웨어 개발|디플로이]]되기 전에 [[소프트웨어 빌드]] 과정 중에 수행된다.

=== 단순 HTML 랜더링 그 이상의 아키텍처 ===
리액트의 기본 구조는 웹 브라우저에서 렌더링되는 HTML을 넘어서 적용된다. 이를테면 페이스북은 <code><nowiki><canvas></nowiki></code> 태그에 렌더링하는 동적인 차트를 가지고 있으며,<ref>{{웹 인용|url=https://facebook.github.io/react/blog/2013/06/05/why-react.html|title=Why did we build React? – React Blog|publisher=|확인날짜=2018-11-26|archive-date=2015-04-06|archive-url=https://web.archive.org/web/20150406072833/http://facebook.github.io/react/blog/2013/06/05/why-react.html|url-status=}}</ref> 넷플릭스와 [[페이팔]]은 서버와 클라이언트 쪽에 유사 HTML을 렌더링하기 위한 동일 구조의 적재(isomorphic loading)를 사용한다.<ref name=paypal-isomorphic-reactjs>{{웹 인용|title=PayPal Isomorphic React|url=https://www.paypal-engineering.com/2015/04/27/isomorphic-react-apps-with-react-engine/}}</ref><ref name=netflix-isomorphic-reactjs>{{웹 인용|title=Netflix Isomorphic React|url=http://techblog.netflix.com/2015/01/netflix-likes-react.html}}</ref>

== 리액트 네이티브 ==
{{본문|리액트 네이티브}}
리액트 네이티브는 2015년에 페이스북에 의해 발표되었으며<ref name="initial_rn_post">{{웹 인용|url=https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/|title=React Native: Bringing modern web techniques to mobile|publisher=}}</ref> 네이티브 [[안드로이드 (운영 체제)|안드로이드]]<ref>{{웹 인용|url=https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/|title=Android Release for React Native}}</ref>, [[iOS]], [[유니버설 윈도우 플랫폼|UWP]]<ref>{{웹 인용|author=Windows Apps Team |date=April 13, 2016 |title=React Native on the Universal Windows Platform |url=https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/ |website=blogs.windows.com |accessdate=2016-11-06}}</ref> 애플리케이션에 리액트 아키텍처를 적용한다.

===Hello World===
<syntaxhighlight lang="js" line="1">
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

// Skip this line if using Create React Native App
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

// The ReactJS code can also be imported into another component with the following code:

import HelloWorldApp from './HelloWorldApp';
</syntaxhighlight>

== 비평 ==
리액트는 "가상 DOM"의 개념을 이용하기 때문에 다량의 메모리(RAM)가 필요하다는 비평이 있다. 이는 UI의 표현이 메모리에 상주되어 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화되는 방식이다.<ref>https://reactjs.org/docs/faq-internals.html</ref>

== 같이 보기 ==
* [[빌드 자동화]]
* [[리덕스]]

== 각주 ==
{{각주}}

== 외부 링크 ==
* {{공식 웹사이트}}

{{메타 둘러보기}}
{{리치 인터넷 애플리케이션}}
{{웹 프레임워크}}
{{ECMA스크립트}}

{{전거 통제}}

[[분류:자바스크립트 라이브러리]]
[[분류:Ajax]]
[[분류:2015년 소프트웨어]]
[[분류:페이스북 소프트웨어]]
[[분류:MIT 라이선스 소프트웨어]]