리액트 (자바스크립트 라이브러리)

위키백과, 우리 모두의 백과사전.
둘러보기로 가기 검색하러 가기
React
React-icon.svg
원저자 Jordan Walke
개발자 페이스북 및 공동체
발표일 2013년 3월 (5년 전)(2013-03)
최근 버전 16.5.0 / 2018년 9월 6일 (3달 전)(2018-09-06)[1]
프로그래밍 언어 자바스크립트
플랫폼 크로스 플랫폼
크기 109 KiB (일반용)
710 KiB (개발용)
종류 자바스크립트 라이브러리
라이선스 MIT 허가서
웹사이트 reactjs.org

컴퓨팅에서 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.[3][4][5]

리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 복잡한 리액트 애플리케이션들은 상태 관리, 라우팅, API와의 통신을 위한 추가 라이브러리의 사용이 일반적으로 요구된다.[6][7]

역사[편집]

리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 그는 PHPHTML 컴포넌트 프레임워크인 XHP에 영향을 받았다.[8] 2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램닷컴에 적용되었다.[9] 2013년 5월 JSConf US에서 오픈 소스화되었다.

기본 사용법[편집]

다음은 JSX와 자바스크립트와 함께 HTML에 사용한 기초적인 예제이다.

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component {
    render() {
      return <h1>{this.props.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 eXtension)는 자바스크립트 언어 문법의 확장이다.[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[편집]

 1 import React, { Component } from 'react';
 2 import { AppRegistry, Text } from 'react-native';
 3 
 4 export default class HelloWorldApp extends Component {
 5   render() {
 6     return (
 7       <Text>Hello world!</Text>
 8     );
 9   }
10 }
11 
12 // Skip this line if using Create React Native App
13 AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);
14 
15 // The ReactJS code can also be imported into another component with the following code:
16 
17 import HelloWorldApp from './HelloWorldApp';

비평[편집]

리액트는 "가상 DOM"의 개념을 이용하기 때문에 다량의 메모리(RAM)가 필요하다는 비평이 있다. 이는 UI의 표현이 메모리에 상주되어 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화되는 방식이다.[22]

같이 보기[편집]

각주[편집]

  1. “Releases – Facebook/React”. 《깃허브》. 
  2. “React - A JavaScript library for building user interfaces.”. 《React》. 2018년 4월 7일에 확인함. 
  3. Krill, Paul (2014년 5월 15일). “React: Making faster, smoother UIs for data-driven Web apps”. 《en:InfoWorld》. 
  4. Hemel, Zef (2013년 6월 3일). “Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews”. 《InfoQ》. 
  5. Dawson, Chris (2014년 7월 25일). “JavaScript’s History and How it Led To ReactJS”. 《The New Stack》. 
  6. 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일에 확인함. 
  7. Samp, Jon (2018년 1월 13일). “React Router to Redux First Router”. 《About Codecademy》. 2018년 6월 14일에 확인함. 
  8. “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》. 
  9. “Pete Hunt at TXJS”. 
  10. “Components and Props”. 《React》. Facebook. 2018년 4월 7일에 확인함. 
  11. “Refs and the DOM”. 《React Blog》. 
  12. “Draft: JSX Specification”. 《JSX》. Facebook. 2018년 4월 7일에 확인함. 
  13. Clark, Andrew (2017년 9월 26일). “React v16.0§New render return types: fragments and strings”. 《React Blog》. 
  14. Clark, Andrew (2017년 9월 26일). “React v16.0§Support for custom DOM attributes”. 《React Blog》. 
  15. Fischer, Ludovico (2017년 9월 6일). 《React for Real: Front-End Code, Untangled》 (영어). Pragmatic Bookshelf. ISBN 9781680504484. 
  16. “Why did we build React? – React Blog”. 
  17. “PayPal Isomorphic React”. 
  18. “Netflix Isomorphic React”. 
  19. “React Native: Bringing modern web techniques to mobile”. 
  20. “Android Release for React Native”. 
  21. Windows Apps Team (2016년 4월 13일). “React Native on the Universal Windows Platform”. 《blogs.windows.com》. 2016년 11월 6일에 확인함. 
  22. https://reactjs.org/docs/faq-internals.html

외부 링크[편집]