1. Why React?

1-1 Web Application의 발전

브라우저를 열고 사이트에 들어가면 보여지는 것(UI) 와 할 수 있는 것(UX)이 굉장히 많습니다.
이러한 이유로 요새는 웹 페이지라는 단어보다 웹 애플리케이션이라는 단어가 많이 사용되곤 합니다.
이처럼 애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는 이전의 방법(DOM, jQuery)으로는 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌는데 그 이유는 화면에 존재하는 그 많은 DOM 요소들을 직접 접근해서 제어하고 관리하는 것이 쉽지 않기 때문입니다. jQuery 역시 좀 더 쉽게 DOM 에 접근할 뿐 직접 조작하는 것은 같기 때문에 마찬가지입니다.
규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 됩니다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 입니다.

1-2 Frontend Framework(Library)

• React
  “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것” 을 목표로 2013년 Facebook에서 개발한 Library.
  MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다. 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가한다.
• Angular
  2010년 Google에서 개발한 Framework. TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능하며 Framework답게 다양한 기능이 내장되어있다. 무겁고 배우기 어렵다는 단점이 있다.
• Vue
  2014년 Evan You라는 개인이 개발한 Framework. 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠르다.

2. React의 특징

• JSX
  JSX는 JavaScript 구문 확장입니다. 사용자 인터페이스가 어떻게 보여야 하는지를 설명하기 위해 React에서 사용되는 용어로, JSX를 활용하여 JavaScript 코드와 동일한 파일에 HTML 구조를 작성할 수 있습니다.

• Virtual DOM(가상돔)
  가상돔은 실제 Real DOM의 React 경량 버전입니다. 실제 DOM 조작은 가상 DOM 조작보다 훨씬 느립니다. 객체의 상태가 변경되면 Virtual DOM 은 전체가 아닌 실제 DOM의 해당 객체만 업데이트합니다.

• 단방향 데이터 바인딩
  

단방향 데이터 바인딩은 단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신합니다. 사용자가 UI를 통해 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신하게 됩니다. 이처럼 단방향 데이터 바인딩은 하나의 Watcher를 사용하기 때문에 양방향 데이터 바인딩이 가지는 성능적인 이슈를 해결하고 더 확실하게 데이터를 추적할 수 있게 해줍니다.

• 컴포넌트 기반
  리액트로 웹 서비스를 개발할 때, 컴포넌트라고 부르는 작고 고립된 코드를 사용하여 UI를 구성하게 됩니다.

const Title = () => {
  return <h1>Hello world</h1>;
};

const Button = () => {
  return <button>This is a Button</button>;
};

const App = () => {
  return (
    <div>
      <Title />
      <Button />
    </div>
  );
};

이렇게 각각의 컴포넌트는 재사용할 수 있으며, 이런 재사용을 통해 개발 생산성을 향상시킬 수 있습니다. 또한 이렇게 작고 고립된 컴포넌트는 테스트하기 쉬워 코드를 유지보수하는데도 크게 도움이 됩니다.