React

페이스북에서 개발 및 관리하는 프론트엔드를 개발하기 위한 자바스크립트 라이브러리로 2021년 기준으로 가장 많이 사용되고 있다.(StateOfJS2021 참고)

특징

1. 컴포넌트 기반 라이브러리

컴포넌트란 리액트 개발 시 화면을 구성하는 단위이다. 리액트는 이러한 컴포넌트를 생성 및 조합하여 개발을 한다. 컴포넌트는 재사용 가능하기에 개발 및 유지보수하기 쉽다.

2. 가상 돔(Virtual DOM)

DOM이란 웹 페이지를 이루는 태그들을 자바스크립트가 사용 가능하도록 트리 구조로 만든 객체 모델이다. DOM에서 변화가 발생하면 웹 브라우저는 CSS를 연산하고 레이아웃을 구성하는 등 렌더링이 발생하여 생기는 낭비를 방지하기 위해 만든 것이 가상 돔(Virtual DOM)이다. 가상 돔은 DOM을 추상화한 자바스크립트 객체이며 변경이 있을 시 전과 후의 가상 돔을 비교하여 바뀐 부분만 실제 DOM에 적용하는 방식으로 진행되기 때문에 DOM을 사용하는 것보다 성능이 향상된다.

3. 단방향 데이터 바인딩

데이터의 흐름이 (부모 -> 자식)으로 단방향이기 때문에 코드 이해가 쉬우며 디버깅 및 추적에도 쉽다. 또한 데이터의 변환에 따른 성능 저하가 없이 DOM의 갱신이 가능한 장점이 있다.

4. JSX

Javascript + XML을 확장한 문법으로 브라우저에서 실행되기 전에 바벨을 통해 자바스크립트 형태의 코드로 변경된다.

5. 선언형 프로그래밍

선언형 프로그래밍은 과정을 기술하는 것이 아닌 필요한 것이 무엇인지를 기술하는데 중점을 두고 개발하는 프로그래밍 구조이다.