[React] 특징과 장단점

안세웅·2023년 4월 4일

목록 보기

1/8

React란

facebook 에서 개발한 SPA(Single Page Application)을 위한 UI(User Interface)를 구축하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다.

React는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과
단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다.
그리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화며 “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는 라이브러리입니다.

React의 특징

가상 돔(Virtual DOM)
단방향 데이터 바인딩(One-way Data Binding)
JSX(JavaScript XML)
선언형 프로그래밍 (Declarative Programming)
컴포넌트 기반

가상 돔(Virtual DOM)

React는 실제 화면에 표시되는 DOM과 동일한 가상 DOM을 메모리상에 만들고
DOM 조작이 발생하면 가상 DOM에 모든 연산을 수행 후
실제 DOM과 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 적용합니다.
해당 과정으로 필요없는 부분이 re-randering 되지 않아 성능을 향상 시킬 수 있습니다.

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

우선 양방향 데이터 바인딩 이란 사용자 UI의 데이터 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식을 말합니다.

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

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

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

JSX(JavaScript XML)

JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어 입니다.

const App = () => {
  const hello = 'Hello world!';
  return <div>{hello}</div>;
};

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

선언형 프로그래밍 (Declarative Programming)

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

명령형 프로그래밍

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이 어떻게 동작하는지는 크게 신경쓰지 않고 결과인 배열값을 두 배로 만들기에 집중하여 프로그래밍을 합니다.

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

컴포넌트 기반

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

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

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

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