React 리액트

React 탄생 배경

웹에서의 기능들이 많아지면서 사용자들과 상호작용하는 UI 역시 많아지게됩니다.

이에 개발자들은 세대별 기술의 한계를 느끼고 새로운 기술을 개발하게됩니다.

• 1세대

  기본적인 HTML, CSS, Javascript로 DOM을 조작하며 이벤트를 발생시킵니다.

• 2세대

  JQuery 기술의 등장으로 DOM 조작이 쉬워졌지만 역시 DOM을 조작하는 것일 뿐이라는 한계에 도달합니다.

• 3세대

  Angular, Vue, React 등의 패러다임을 완전히 바꾸는 새로운 프레임워크와 라이브러리가 등장합니다.

즉, JQuery로 동적인 UI를 구축하는 것은 규모가 커지고 상호작용이 많고 다양해지면서 성능이 저하되는 원인이 될 수 있었습니다.

따라서, 빠른 성능을 유지하기위한 여러 프레임워크와 라이브러리가 등장했고 그 중에는 React 라이브러리가 있습니다.

---

React

React는 2013년 Facebook에서 개발한 자바스크립트 라이브러리의 하나로서 UI (User Interface)를 구축하기 위해 사용합니다.

주로 SPA (Single Page Application)이나 모바일 앱 개발에 사용될 수 있습니다.

규모가 크거나 복잡한 어플리케이션 개발에 필요한 라우팅, API 통신 등의 기능은 추가 라이브러리를 사용해야합니다.

이는 다른 Angular, Vue 등의 다른 프레임워크와 달리 React는 View만을 담당하는 라이브러리이기 때문입니다.

다른 프레임워크 (Angular, Vue 등)과 달리 React는 라이브러리입니다.
프레임워크는 모든 환경과 도구들을 제공하기때문에 기술 활용을 위한 진입장볍이 있습니다.
라이브러리는 목적을 위한 하나의 도구를 제공받는 것이므로 여러 라이브러리를 선택해 조합할 수 있습니다.

---

React의 특징

• 가상 DOM (Virtual DOM)

  UI가 변할 때마다 실제 DOM을 직접 조작하면 그만큼 브라우저를 자주 렌더링 하게됩니다.

  렌더링을 많이할수록 레이아웃 계산(Reflow / Repaint)이 많이 수행되며 성능 저하의 원인이 됩니다.

  따라서 React는 실제 DOM을 추상화시킨 Javascript 객체인 가상 DOM을 만들어 레이아웃 계산을 일괄로 한번만 수행하여 성능 저하를 막습니다.

  

• 단방향 데이터 바인딩 (One-way Data Binding)

  데이터 바인딩

  화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)을 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 말합니다.

  Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화합니다.

  즉, 이벤트함수(onClick, onChange 등)을 주고 함수를 호출해 Javascript에서 HTML로 데이터를 변경해야합니다.

  또한, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되는 구조입니다.

• JSX (Javascript XML)

  React에서 사용하는 문법으로 Javascript와 HTML을 동시에 작성하는 방식입니다.

  JSX로 작성된 코드는 Javascript가 인식할 수 있도록 Babel이라는 패키지를 통해 자동으로 변환됩니다.

• 선언형 프로그래밍

  React는 어떻게(How)에 집중하는 명령형 프로그래밍이 아닌 무엇을(What)에 집중하여 프로그래밍합니다.

  예를 들면, 명령형 프로그래밍은 길을 찾을 때 목적지로 가기위해 ‘400m 직진 후 우회전하세요.’는 목적을 이루기 위한 과정(How)에 초점을 두고 진행합니다.

  선언형 프로그래밍은 ‘목적지 주소는 XXX입니다.’ 처럼 최종 결과물을 선언합니다.

  // 배열의 총합 구하는 코드
  
  // 명령형 프로그래밍
  function total1(arr) {
    let result = 0;
  
    for (let i = 0; i < arr.length; i++) {
      result += arr[i];
    }
  
    return result;
  }
  
  // 선언형 프로그래밍
  function total2(arr) {
    return arr.reduce((acc, x) => acc + x, 0);
  }
  

• 컴포넌트 기반 (Component)

  React는 컴포넌트라고 부르는 고립된 코드를 사용하여 UI를 구성합니다.

  독립된 컴포넌트는 재사용을 할 수 있으며 이런 재사용을 통해 개발 생산성을 향상시킬 수 있습니다.

  또한, 컴포넌트는 테스트하기 쉬워 코드를 유지보수하는데도 크게 도움이 됩니다.

---

React의 장점

• 재사용성

  광범위한 코드 재사용성이 지원되어 동시에 IOS, Android 및 웹 응용 프로그램을 만들 수 있습니다.

• Virtual DOM

  빠른 화면 전환과 같은 좋은 사용자 경험을 줄 수 있습니다.

• 단방향 데이터 바인딩

  데이터의 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능합니다.

• JSX

  HTML과 Javascript 로직을 같이 구현할 수 있으며 Javascript 문법을 그대로 사용해 HTML을 생성할 수 있으므로 기존의 DOM + Event 방식보다 간편하게 UI를 구성할 수 있습니다.

• React Native를 활용해 모바일 애플리케이션을 만드는 데 사용할 수 있습니다.