[React] React란?

오늘은 React에 대해 알아봅시다.

 

 

 

[ 리액트 React ] 

리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. 리액트는 자바스크립트에 HTML을 포함하는 JSX(Javascript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔 (Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.

 

리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다 보니, 싱글 페이지 애플리케이션을 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있습니다. 예를 들어 리액트는 페이지 전환 기능을 제공하지 않기 때문에, 리액트를 사용하여 페이지 전환을 해야 한다면, react-router와 같은 추가적인 라이브러리를 사용해야 합니다.

 

 

[ 프레임워크, 라이브러리 ] 

 

Framework	Library
Angular	React
Vue

 

Angular
2010년 Google에서 개발한 프레임워크로 TypeScript 기반으로 매우 안정적이고 잘 설계된 구조 내에서 개발이 가능합니다. 프레임워크답게 다양한 기능이 내장되어 있지만 무겁고 배우기 어렵습니다.

Vue
2014년 Evan You라는 개인이 개발한 프레임워크로 Angular와 마찬가지로 Vue만의 문법과 규칙이 있습니다. Angular와 React가 개발되고 나서 장점을 흡수해 만들었기 때문에 문법과 규칙을 쉽게 만들어서 비교적 러닝 커브가 낮습니다. 마찬가지로 프레임워크답게 다양한 기능이 내장되어 있습니다.

React
2013년 Facebook에서 개발한 라이브러리로 "지속적으로 데이터가 변화하는 대규모 애플리케이션 구축"하는 것을 목표로 개발되었습니다. Angular, Vue 등 다른 프레임워크와는 달리 리액트는 오로지 view만을 담당하는 라이브러리입니다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(react-router-dom, redux)를 함께 사용합니다.

 

프레임워크와 라이브러리는 기술을 분류하는 하나의 카테고리입니다.

	Framework	Library
공통점	다른 사람이 만들어 둔 코드
차이점	다른 사람이 만든 틀(Frame)안으로 들어가서 작업하는 것	내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것

 

쉽게 풀어서 설명하면 프레임워크는 모든 환경과 도구들을 제공해주는 대신에 그것들만 사용해야 하며 해당 기술을 새롭게 익혀야 하므로 기술 활용을 하기 위한 러닝커브가 높습니다. 라이브러리는 목적을 위한 하나의 도구를 제공받는 것으로 우리가 원하는 내용을 선택할 수 있지만 다른 도구들은 기본적으로 제공하고 있지 않기 때문에 본인이 스스로 선택해서 조합해야 합니다.

[리액트의 장점]

리액트는 자기만의 문법을 가진 Angular, Vue와 달리 자바스크립트 문법을 그대로 사용합니다. 오픈 소스 프로젝트이면서 페이스북의 지속적인 관리가 이루어지고 있으며, 많은 사용자수를 기반으로 생태계가 활성화되어 있습니다. 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있고, React Native 등의 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장하였기 때문입니다.

[ 리액트의 특징 ]

리액트는 가상 돔, 단방향 데이터 바인딩 등 여러 특징을 갖고 있습니다. 

 

 

[ 가상 돔 ]

 

리액트는 가상 돔을 사용하여 웹 애플리케이션의 성능을 극대화 시켰습니다. 가상 돔을 이해하기 위해서는 우선 HTML과 CSS가 렌더링(Rendering) 되는 과정을 이해할 필요가 있습니다.

 

 

웹 브라우저가 네트워크를 통해 HTML을 전달 받으면 브라우저의 렌더링 엔진은 HTML을 파싱하고 돔 노드(DOM Node)로 이루어진 트리를 만듭니다. 또한 CSS 파일과 HTML의 요소(Element)의 인라인 스타일을 파싱 하여 스타일 정보를 가진 스타일 트리도 생성합니다. 

 

 

 

이렇게 렌더 트리가 완성되면 브라우저는 Attachment라는 과정을 통해 스타일 정보를 계산합니다. 렌더 트리로 생성된 모든 노드들은 attach라는 함수를 가지고 있는데, 이 Attachment라는 과정에서 이 메소드들이 호출되게 되며, 해당 메서드는 스타일 정보를 계산하고 결괏값을 객체 형태로 반환하게 됩니다.

 

이때 이 계산 과정은 모두 동기적(Synchronous)으로 동작하게 되며, 만약 렌더 트리에 새로운 노드가 추가된다면 해당 노드의 attach 메소드가 실행되어 계산 과정을 거치게 됩니다. 렌더 트리는 Attachment 과정을 거친 후 레이아웃이라는 과정을 거치게 됩니다. 이 레이아웃 과정에서는 브라우저가 렌더 트리의 각 노드들에 좌표를 부여하고 정확히 어디에 어떻게 표시되는지를 결정합니다.

 

마지막으로 브라우저는 페인팅(Painting)이라는 과정을 거치게 됩니다. 이 페인팅 과정에서는 각 노드들에 paint 함수를 호출하여 렌더링된 요소들에 색상을 입히게 됩니다.

 

이런 과정을 거쳐 표시된 HTML을 자바스크립트를 사용하여 DOM을 조작하게 되면 각 노드의 좌표를 계산하기 위해 레이아웃 과정이 다시 실행되고, 그 이후 색상을 입히기 위한 페인팅 과정이 다시 진행되게 됩니다. 이렇게 DOM 조작으로 레이아웃 과정이 다시 진행되는 것을 리플로우(Reflow)라고 하며, 페인팅 과정이 다시 진행되는 것을 리페인트(Repaint)라고 합니다. 이 리플로우와 리페인트는 DOM의 각 노드에 대한 연산 과정을 다시 수행함으로 이 과정이 많이 수행될수록 웹 서비스의 성능이 저하되는 문제가 발생하게 됩니다.

 

리액트는 이 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 화면에 표시되는 DOM과 동일한 DOM을 메모리상에 만들고 DOM 조작이 발생하면 메모리상에 생성한 가상 돔에 모든 연산을 수행한 후, 실제 DOM을 갱신하여 리플로우/리페인트의 연산을 최소화하였습니다.

 

[ 단방향 데이터 바인딩 ]

단방향 데이터 바인딩을 알아보기전에 양방향 데이터 바인딩에 대해서 알아보겠습니다. 양방향 데이터 바인딩은 사용자 UI의 데이터 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트 데이터를 자동으로 동기화시켜주는 방식을 말합니다. 이를 통해 프로그래머는 자바스크립트내에 데이터 변경과 사용자 UI에 데이터 변경에 관한 동기화를 신경 쓰지 않고 프로그램을 작성할 수 있습니다.

 

하지만, 하나에 데이터 동기화에 두 개의 Watcher가 사용되고, 데이터 많아지게 되면 이 데이터의 동기화를 위한 수많은 Watcher가 생성되므로, 반대로 성능 저하가 발생할 수 있습니다.

이런 문제들 때문에, 리액트에서는 다른 프레임워크와는 다르게 단방향 데이터 바인딩을 사용합니다.

 

 

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

 

[ JSK ] 

리액트에서는 JSX라는 독특한 문법을 가지고 있습니다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어(Template language)입니다.

 

const app = () => {
    const hello = "Hello World!!";
    return <div>{hello}</div>;
};

 

리액트는 위와 같이 자바스크립트에서 HTML 태그를 사용할 수 있으며, 자바스크립트 변수를 HTML 태그에서 바로 호출하여 사용할 수 있습니다.

 

프로그래밍은 선언형 프로그래밍과 명령형 프로그래밍으로 구분할 수 있습니다.

 

[ 명령형 프로그래밍 ]

명령형 프로그래밍은 어떻게(How)에 집중하여 프로그래밍하는 것을 말합니다.

 

같은 예시로 광화문으로 가는 방법을 예로 들자면 "집에서 나와 버스를 타고 xx 역까지 간 후, 지하철을 타고 환승하여 x호선으로 갈아타세요"와 같이 목적을 이루기 위해서 어떻게(How)의 측면에 맞추어 진행하는 것을 말합니다. 

 

만일 목적이 제대로 이루어지지 않는 문제가 발생했다면 어떤 과정에서 문제가 생겼는지 모든 과정을 되짚어 보아야 하기 때문에 코드가 길수록 유지보수가 어렵다는 단점이 있습니다.

 

[ 선언형 프로그래밍 ]

선언형 프로그래밍은 무엇(What)에 집중하여 프로그래밍하는 것을 말합니다.  

 

예를 들어 광화문으로 가는 방법을 예로 들자면, 선언형 프로그래밍은 광화문의 주소는 "서울 종로구 효자로 12 국립고궁박물관입니다."와 같이 선언하는 것입니다. 무엇이 되면 되는지 우리가 원하는 최종 선언을 하고 리액트에게 전달하면 어떻게 해야 하는지는 리액트에서 알아서 처리합니다. 개발 과정에서도 최종 결과물이 어떻게 되는지에 대한 부분에만 신경 쓰면 되기 때문에 선언형 프로그래밍이 개발할 때 훨씬 편리합니다. 

 

 

---

 

 

간단한 예시

 

 

명령형 프로그래밍 

 

const double = (arr) => {
  let results = [];
  for (let i = 0; i < arr.length; i ++) {
    results.push(arra[i] * 2);
  }
  return results;
}

 

 

선언형 프로그래밍

 

const double = (arr) => {
  return arr.map((elem) => elem * 2);
}

 

위에 두 함수는 같은 동작을 하는 함수로써, 주어진 배열의 값을 두 배로 만드는 동작을 수행합니다. 

 

첫 번째 함수는 명령형 프로그래밍으로써 주어진 배열의 값을 두 배로 늘리기 위해, for 문을 사용했으며, i변수와 배열의 크기를 사용하여 배열의 값을 하나씩 가져와 두 배로 만든 후, result라는 새로운 배열에 값을 추가한 후, 결괏값으로 반환합니다. 이렇게 명령형 프로그래밍은 과정을 중심으로 프로그래밍을 하게 됩니다.

 

두 번째 함수는 선언형 프로그래밍으로써 map 함수를 사용하여 주어진 배열값을 두 배로 만들어 반환합니다. map이 어떻게 동작하는지는 크게 신경 쓰지 않고 결과인 배열값을 두 배로 만들기에 집중하여 프로그래밍을 합니다.

 

이처럼 라이브러리나 프레임워크 등을 사용하여 비선언형적인 부분을 캡슐화함으로써 명령형 프로그래밍 언어로 선언형 프로그래밍을 할 수 있습니다. 리액트에서는 특히 JSX를 사용하기 때문에 선언형 프로그래밍을 더욱 활용하고 있음을 알 수 있습니다.