유저 인터페이스를 만드는 데 사용되는 오픈 소스 자바스크립트 라이브러리. 페이스북에서 개발하였다. 프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. 참고로 Github Star 수는 Vue가 가장 많으며, npm package 다운로드 수는 react가 가장 많다. 이와 더불어 타입스크립트나 Sass 같은 언어들도 지원해준다.

import React from 'react';
import ReactDOM from 'react-dom';

//"Hello, 홍길동!"을 출력하는 코드

const App = ({name}) => <h1>Hello, {name}!</h1> //함수형 문법

class App extends React.Component { //클래스형 문법
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    )
  }
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));

해당 코드는 최신 브라우저에서 막 지원하기 시작한 import문과, JS 표준 문법이 아닌 JSX를 사용했기 때문에 이 코드가 그대로 브라우저상에 작동되는 것은 아니다. Babel을 통해 대부분의 브라우저가 사용할 수 있는 JS 코드로 변환한 후 사용할 수 있다.

const App = ({ name }) => <h1>Hello, {name}!</h1>

({ name }) 은, JavaScript 또는 TypeScript에서 사용할 수 있는 destructuring(구조 분해 할당)이라는 문법을 사용한 부분이다. 즉, App이라는 함수가 정의되어 있는데, 이 함수의 parameter가 1개 있으며, 이 parameter안에는 'name'이라는 속성이 있다고 알고있으며, 그 값을 가져온다는 뜻이다. 또한 Arrow 뒤에 바로 HTML태그처럼 보이는것이 나오는데, 이는 이 함수가 JSX를 리턴한다는 뜻이다. JSX를 리턴하지 않으면 React의 컴포넌트로써 동작할 수 없다. 풀어쓰면 다음과 같다.

const App = (props) => {
  const name = props.name;
  return (<h1>Hello, {name}!</h1>)
}

<header>
  <h1>Logo</h1>
</header>
<nav>
 <ul>
   <li><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
 </ul>
</nav>
 <section>
  <p>Hello World!</p>
</section>
 

import React, {Component} from 'react';

class Hlogo extends Component{
  render(){
    return (
    <header>
      <h1>Logo</h1>
    </header>
    )}};

class Anav extends Component{
  render(){
    return (
    <nav>
      <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
      </ul>
    </nav>
    )}};

class Bsection extends Component{
  render(){
    return (
    <section>
      <p>{this.props.amumal}</p>
    </section>
    )}};

class App extends Component{
  render(){
    return (
      <div className="App">
        <Hlogo></Hlogo>
        <Anav></Anav>
        <Bsection amumal="Hello World!"></Bsection>
      </div>
    )}};

export default App;

 

(위에서 보는 것처럼 컴포넌트 클래스 값은 대문자로 시작되어야 한다.)

위와 같이 컴포넌트(부품)로 나누어서 정리가 가능하다. 이렇게 코드가 짧을 때에는 별로 의미가 없지만 한 페이지의 코드가 길 때에는 코드를 나누어 담을 수 있어서 유용하다. 또한 각 컴포넌트들은 js 파일로 만들어서 공유가 가능하기 때문에 이미 만들어진 컴포넌트들을 조립하여 웹페이지를 만들 수 있어서 가능성이 무궁무진해진다.

참고로 페이스북에서는 크롬 개발자 도구를 이용해서 리액트로 만들고 있는 페이지의 리액트 컴포넌트들을 볼 수 있는 툴을 제공하고 있다.

서버와의 데이터 통신과는 별개로 DOM 객체를 직접적으로 조작해야하는 기존의 웹 화면 개발 방식과 달리, React는 DOM 객체를 직접적으로 조작하지 않고 데이터가 변화할때 변경사항이 적용된 VirtualDOM을 만든다. 그 다음 실제 DOM과 VirtualDOM의 차이점을 비교하고, 변경된 부분을 실제 DOM에 적용한다. 보여지는 데이터의 잦은 변경이 필요한 웹앱의 경우 이러한 방식을 통해 성능을 크게 향상시킬 수 있다. 실제 동적인 웹일 수록 Angular 등과 비교해서 성능이 훨씬 더 빠른 편이다. 데이터가 자주 변경되지 않는 비교적 정적인 웹 페이지에 이를 적용할 경우 오히려 성능면에서 손해를 볼 수 있다.

const element = <h1>Hello, world!</h1>;

JavaScript eXtension

React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.

HTML과 매우 흡사하긴 하지만, Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다.

Node.js를 설치해서 npm이 함께 설치되게 한 다음에 터미널에서

    npm i -g create-react-app
    

를 입력하여 준다. 그 뒤에는 리액트를 돌릴 폴더를 만들어서 그 폴더로 터미널에서 이동한 다음에

    create-react-app .
    

을 입력하면 설치가 완료된다.

-g는 글로벌 설치를 의미한다. 따라서 글로벌로 설치하지 않고 프로젝트 생성 시에만 리액트 개발환경을 만드려면 다음과 같이 설치 가능하다.

    npx create-react-app [project name]
    

참고로 npx 설치는 npm -g 처럼 노드 환경을 사용하는 pc 자체에 깔리는 것이 아니고 node module이 설치된 프로젝트 내부에만 설치되는 것도 아니다. create-react-app은 처음 프로젝트를 생성할 때만 필요하고 그 이후에는 있을 필요가 없기 때문에 npx를 사용해 1회성으로 설치 후 자동 삭제하는 것을 추천한다. npm 5버전 이상부터는 npx가 자동으로 지원된다. 그렇지 못한 경우에는 다음과 같이 npx를 설치할 수 있다.

     npm install npx -g

참고로 자바스크립트가 아닌 타입스크립트를 사용하려면

     create-react-app . --template typescript

를 입력하면 된다.

     npm start
     

를 터미널에서 입력하면 리액트가 실행된다. 실행을 종료하고 싶다면 Ctrl+C를 터미널에서 누르면 된다.

실행되면 리액트 폴더의 src/app.js 파일을 통해 페이지 수정을 하고, 자동으로 실행되는 웹브라우저에서 확인이 가능하다.

     npm run build
     

를 입력하면 리액트 폴더의 내용물이 압축되어 웹상에 올리기 적합한 형태로 build 폴더 안에 생성 된다.

     serve -s build
     

를 입력한다면 build 폴더의 내용물을 볼 수 있는 서버가 생성된다. 중지는 Ctrl+C를 통해 할 수 있다.

React의 문법으로 안드로이드/iOS 앱을 개발할 수 있는 프레임워크이다. React를 배웠던 개발자라면 몇시간만에 익숙해질 수 있을만큼 React와 거의 유사한 문법을 가지고 있으며, 실제로 차이나는 부분은 브라우저의 HTML Element를 사용하는 것이 아니라 View, Text 등의 자체 태그를 사용하는점과 CSS를 사용하지 않고 오직 CreateStyleSheet를 이용한 스타일만 지원하고, 일부 속성이 가감되었다는 점을 제외하면 너무 많은데일치한다고도 볼 수 있다.

공식 지원 플랫폼

비공식 지원

거의 모든(Windows Phone을 제외한) 플랫폼을 지원한다.

Flutter는 React Native와 비슷한 성격을 가지고 있으나 개발자나 패키지의 수 측면에서는 아직 React Native가 우위를 점하고 있는 상황이다. 또한 Xamarin과 비교했을 때도 모든 부분에서 우위를 차지하고 있다. 구글 트렌드 검색 결과에 의하면 Xamarin과 React Native는 하락하는 추세이고, Flutter는 상승하는 추세이다.

현재는 전혀 관련없는 이야기이지만 초기 라이선스는 특이한 BSD + Patent 라이선스였으며[1], 핵심은 페이스북에 특허 소송을 제기하는 순간 React 사용권한을 상실한다는 내용이었다. 페이스북 측은 React의 보호를 위해 특별히 만든 라이선스라고 했지만 오히려 페이스북 측이 React를 인질삼아 React를 핵심으로 개발한 서비스의 특허를 무단으로 사용하기 위함이라는 의혹까지 생겨났을 정도였으니. 때문에 아차피 재단에서는 아예 React 라이선스가 적용된 소스코드의 사용을 금지한다고 발표했으며 오픈소스 생태계에서 배제되는 사건이 발생했었다. 이후 지금의 MIT 라이선스로 리라이선싱 되면서 사건은 종료.