상위 질문
타임라인
채팅
관점

리액트 (소프트웨어)

자바스크립트 라이브러리의 하나 위키백과, 무료 백과사전

리액트 (소프트웨어)
Remove ads

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

간략 정보 다른 이름, 원저자 ...

리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.[6][7]

Remove ads

역사

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

자세한 정보 버전, 출시일 ...
Remove ads

기본 사용법

다음은 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>
Remove ads

주요 특징

요약
관점

속성과의 단방향 데이터 바인딩

보통 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]

Remove ads

리액트 네이티브

리액트 네이티브는 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';
Remove ads

비평

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

같이 보기

각주

관련 문헌

외부 링크

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads