[React] React에 대하여

React는 메타(구 페이스북)에서 개발한 오픈소스 자바스크립트 라이브러리입니다.

React는 서버가 담당하던 화면 처리 작업들을 자바스크립트를 통해서 브라우저가 처리하는 SPA(Single Page Application)의 형식을 전제로 하고 있습니다. 비슷한 기능을 하는 프레임워크들은 Vue.js나 Angular.js가 있으나, 현재는 React가 가장 많이 쓰입니다.

 

React의 장점

1) 컴포넌트(Component) 재사용 가능

React는 UI를 독립적인 부품인 컴포넌트로 분리한 뒤, 이 컴포넌트들을 조합하는 컴포넌트 기반 구조를 따릅니다. 화면의 각 부분들이 구분되어져 있기 때문에 전체 코드를 파악하기가 쉽습니다. 그리고 각 컴포넌트를 별개의 파일로 저장할 수도 있기 때문에 코드를 재사용하기에도 유리합니다. 

 

다음의 코드는 React의 컴포넌트 구조를 보여주는 예시입니다.

import React from "react";

// Header component
const Header = ({ title }) => {
  return (
    <header>
      <h1>{title}</h1>
    </header>
  );
};

// Content component
const Content = ({ content }) => {
  return (
    <div>
      <p>{content}</p>
    </div>
  );
};

// App component (Parent component)
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "Component-Based Architecture Example",
      content: "This is the content of our React application.",
    };
  }

  render() {
    const { title, content } = this.state;

    return (
      <div>
        <Header title={title} />
        <Content content={content} />
      </div>
    );
  }
}

export default App;

 

2) Virtual DOM

React는 Virtual DOM을 활용해서 렌더링 과정을 최적화합니다. 먼저, DOM이란 Document Object Model의 약자로 기존에는 직접 DOM을 조작했기 때문에, 데이터의 변경이 발생하면 전체 페이지가 다시 렌더링되야만 했습니다. 하지만 React는 이벤트가 발생할 때 가상의 DOM(Virtual DOM)을 만들어서 데이터를 변경한 뒤, 실제 DOM과 Virtual DOM을 비교해서 필요한 부분만 변경합니다. 

=> 따라서 React는 전체 페이지가 아닌 최소한의 필요한 부분만 업데이트하기 때문에 효율이 높아지게 됩니다.

 

3) 단방향 데이터 흐름 

React는 단방향의 데이터 흐름을 유지합니다. 즉, 데이터의 변경이 UI의 변경으로 이어지는 단순한 구조를 유지하는 것입니다. 반대의 경우인 양방향 데이터 흐름(ex. Angular.js)은, 데이터의 변경과 UI의 변경이 서로 영향을 주어서 데이터의 흐름을 파악/예측하기가 어려워집니다. 

 

4) 대중성

React가 가지는 대중성 또한 큰 장점 중 하나입니다. 많은 사용자와 다양한 생태계를 바탕으로 다양한 라이브러리를 사용할 수 있고, 공부하거나 코드를 유지보수하는 과정에서도 도움을 많이 받을 수 있습니다.