리액트 (자바스크립트 라이브러리)
![]() | |
다른 이름 | React |
---|---|
원저자 | Jordan Walke |
개발자 | 페이스북 및 공동체 |
발표일 | 2013년 5월 29일 |
안정화 버전 | 18.3.1[1] ![]() |
저장소 | |
프로그래밍 언어 | 자바스크립트 |
플랫폼 | 크로스 플랫폼 |
크기 | 109 KiB (일반용) 710 KiB (개발용) |
종류 | 자바스크립트 라이브러리 |
라이선스 | MIT 허가서 |
웹사이트 | react |
리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.[3][4][5]
리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.[6][7]
역사
[편집]리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 그는 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다.[8] 2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램닷컴에 적용되었다.[9] 2013년 5월 JSConf US에서 오픈 소스화되었다.
버전 | 출시일 |
---|---|
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에 사용한 기초적인 예제이다.
<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>
Greeter
클래스는 greeting
속성을 수용하는 리액트 컴포넌트이다.
ReactDOM.render
메서드는 Greeter
컴포넌트의 인스턴스를 생성하고 greeting
속성을 'Hello World'
로 설정하며 렌더링된 컴포넌트를 차일드 요소로서 myReactApp
id의 DOM 요소로 추가한다.
웹 브라우저에 표시될 때 결과는 다음과 같다.
<div id="myReactApp">
<h1>Hello World!</h1>
</div>
주요 특징
[편집]속성과의 단방향 데이터 바인딩
[편집]보통 props라 불리는 속성들은 부모 컴포넌트로부터 컴포넌트에 전달된다. 컴포넌트들은 props을 하나의 불변의 값(자바스크립트 객체)들로 받는다.[10]
스테이트풀 컴포넌트
[편집]상태를 컴포넌트를 통해 값을 보관하며 props를 통해 차일드 컴포넌트로 전달할 수 있다.
class ParentComponent extends React.Component {
state = { color: 'red' };
render() {
return (
<ChildComponent color={this.state.color} />
);
}
}
가상 DOM
[편집]다른 저명한 기능은 가상 문서 객체 모델, 즉 가상 DOM의 사용이다. 리액트는 인 메모리 데이터 구조 캐시를 만들고 결과 차이를 계산한 다음 브라우저에 표시되는 DOM을 효과적으로 업데이트한다.[11] 이로써 프로그래머는 마치 모든 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있는데, 실제로 리액트 라이브러리는 단지 실제로 변경되는 하위 컴포넌트만을 렌더링할 뿐이다.
라이프사이클 메서드
[편집]라이프사이클 메서드들은 컴포넌트가 생존하는 동안 셋 포인트(set point)에 코드를 실행할 수 있게 하는 훅(hook)이다.
shouldComponentUpdate
는 렌더가 불필요한 경우 false를 반환함으로써 개발자가 컴포넌트의 불필요한 재렌더링을 막을 수 있게 한다.componentDidMount
는 컴포넌트가 '마운트'(mount)되면 호출된다. (대개 컴포넌트 DOM 노드와 연결함으로써 사용자 인터페이스에서 만들어진다) API를 통해 원격 소스로부터 로드되는 데이터를 트리거(trigger)하기 위해 보통 사용된다.render
는 가장 중요한 라이프사이클 메서드이며 어떠한 컴포넌트에서도 최소한의 필요 조건이다. 컴포넌트의 상태가 업데이트될 때마다 호출되는 것이 보통이며 사용자 인터페이스의 변경사항을 반영한다.
JSX
[편집]JSX(JavaScript XML)는 XML같은 문법을 사용하는 ECMAScript의 확장이다.[12] HTML과 모습이 비슷해 보이는 JSX는 수많은 개발자들에게 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다. 리액트 컴포넌트들은 일반적으로 JSX를 사용하여 작성되지만 꼭 그렇게 할 필요는 없다. (컴포넌트들은 순수 자바스크립트로 작성할 수도 있다) JSX는 PHP를 위해 페이스북이 개발한 다른 확장 문법인 XHP와 유사하다.
JSX 코드의 예는 다음과 같다:
class App extends React.Component {
render() {
return (
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>
);
}
}
- 내재된(nested) 요소
같은 레벨의 여러 요소들은 위와 같이 <div>
요소와 같이 하나의 컨테이너 요소로 감싸거나
배열로 반환해야 한다[13].
- 속성(Attributes)
JSX는 HTML이 제공하는 것을 미러링하도록 설계된 일련의 요소 속성들을 제공한다. 사용자 지정 속성들은 컴포넌트로 전달할 수도 있다[14]. 모든 속성은 컴포넌트를 props로 받는다.
- 자바스크립트 식(JavaScript expressions)
자바스크립트 식(문은 아님)은 중괄호 {}
를 사용하여 JSX 안에 쓸 수 있다:
<h1>{10+1}</h1>
위의 예는 다음과 같이 렌더링한다.
<h1>11</h1>
- 조건문
If–else 문은 JSX 안에서 사용할 수 없으나 조건문을 대신 사용할 수 있다. 아래의 예는 { i === 1 ? 'true' : 'false' }
를 문자열 'true'
로 렌더링하는데, 그 이유는 i
는 1과 동등하기 때문이다.
class App extends React.Component {
render() {
const i = 1;
return (
<div>
<h1>{ i === 1 ? 'true' : 'false' }</h1>
</div>
);
}
}
함수와 JSX는 조건들 안에 사용이 가능하다:
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>
);
}
}
위는 다음과 같이 렌더링된다:
<div>
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
</div>
JSX로 작성된 코드는 웹 브라우저가 인식할 수 있기 전에 바벨과 같은 도구를 이용한 변환이 필요하다.[15] 이러한 처리는 일반적으로 애플리케이션이 디플로이되기 전에 소프트웨어 빌드 과정 중에 수행된다.
단순 HTML 랜더링 그 이상의 아키텍처
[편집]리액트의 기본 구조는 웹 브라우저에서 렌더링되는 HTML을 넘어서 적용된다. 이를테면 페이스북은 <canvas>
태그에 렌더링하는 동적인 차트를 가지고 있으며,[16] 넷플릭스와 페이팔은 서버와 클라이언트 쪽에 유사 HTML을 렌더링하기 위한 동일 구조의 적재(isomorphic loading)를 사용한다.[17][18]
리액트 네이티브
[편집]리액트 네이티브는 2015년에 페이스북에 의해 발표되었으며[19] 네이티브 안드로이드[20], iOS, UWP[21] 애플리케이션에 리액트 아키텍처를 적용한다.
Hello World
[편집]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';
비평
[편집]리액트는 "가상 DOM"의 개념을 이용하기 때문에 다량의 메모리(RAM)가 필요하다는 비평이 있다. 이는 UI의 표현이 메모리에 상주되어 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화되는 방식이다.[22]
같이 보기
[편집]각주
[편집]- ↑ https://registry.npmjs.com/react.
- ↑ “React - A JavaScript library for building user interfaces.”. 《React》. 2018년 4월 7일에 확인함.
- ↑ Krill, Paul (2014년 5월 15일). “React: Making faster, smoother UIs for data-driven Web apps”. 《en:InfoWorld》.
- ↑ Hemel, Zef (2013년 6월 3일). “Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews”. 《InfoQ》.
- ↑ Dawson, Chris (2014년 7월 25일). “JavaScript’s History and How it Led To ReactJS”. 《The New Stack》.
- ↑ Dere, Mohan (2018년 2월 19일). “How to integrate create-react-app with all the libraries you need to make a great app”. 《freeCodeCamp》. 2018년 6월 14일에 확인함.
- ↑ Samp, Jon (2018년 1월 13일). “React Router to Redux First Router”. 《About Codecademy》. 2018년 6월 14일에 확인함.
- ↑ “React (JS Library): How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook?”. 《Quora》.
- ↑ “Pete Hunt at TXJS”.
- ↑ “Components and Props”. 《React》. Facebook. 2018년 4월 7일에 확인함.
- ↑ “Refs and the DOM”. 《React Blog》.
- ↑ “Draft: JSX Specification”. 《JSX》. Facebook. 2018년 4월 7일에 확인함.
- ↑ Clark, Andrew (2017년 9월 26일). “React v16.0§New render return types: fragments and strings”. 《React Blog》.
- ↑ Clark, Andrew (2017년 9월 26일). “React v16.0§Support for custom DOM attributes”. 《React Blog》.
- ↑ Fischer, Ludovico (2017년 9월 6일). 《React for Real: Front-End Code, Untangled》 (영어). Pragmatic Bookshelf. ISBN 9781680504484.
- ↑ “Why did we build React? – React Blog”. 2015년 4월 6일에 원본 문서에서 보존된 문서. 2018년 11월 26일에 확인함.
- ↑ “PayPal Isomorphic React”.
- ↑ “Netflix Isomorphic React”.
- ↑ “React Native: Bringing modern web techniques to mobile”.
- ↑ “Android Release for React Native”.
- ↑ Windows Apps Team (2016년 4월 13일). “React Native on the Universal Windows Platform”. 《blogs.windows.com》. 2016년 11월 6일에 확인함.
- ↑ https://reactjs.org/docs/faq-internals.html
외부 링크
[편집]- 리액트
- 공식 웹사이트