React.js
리액트의 공식 홈페이지에 의한 설명으로 리액트는 UI를 만들기 위한 자바스크립트 라이브러리이다.
페이스북 및 몇 공동체에 의해 개발되어 SPA를 제작하기위해 사용된다.
JSX라는 javascript와 xml을 확장한 문법을 사용하며, 컴포넌트라는 개념을 사용한다.
특징
라이브러리.
SPA를 위해 사용되는 웹 프레임워크로 Vue와 Angular가 있지만, React는 독특하게도 라이브러리이다.
둘을 간단하게 비교하자면 프레임워크는 갖추어진 형식에 코드를 대입하면 프레임워크가 개발자의 코드를 가지고 작업을 진행한다.
라이브러리는 반대로 개발자가 라이브러리의 자신의 코드에 필요한 라이브러리 코드를 사용해 작업을 진행한다.
따라서 프레임워크는 일정 수준 개발을 위해 라이브러리보다 더 쉽고 빠를 수 있지만, 범용성이 보다 떨어지게 된다.
라이브러리는 프레임워크와 함께 사용가능할 정도로 범용성이 높아, 필요한 부분부터 점진적인 도입이 가능하다.
또, 러닝커브는 프레임워크와 라이브러리 자체의 특징일 수 있기에 무조건 라이브러리보다 쉽고 빠르지도 못하다.
컴포넌트 사용.
React.js의 소개에서 언급하였듯, 컴포넌트라는 개념이 React에서 사용된다.
컴포넌트는 상태와 동작을 캡슐화한 모듈화된 부분을 의미하는데, 쉽게 말해 웹에서 동작하는 부분의 작은 단위를 컴포넌트로 볼 수 있다.
선언형.
선언형 프로그래밍이란 명령형에 반대되는 개념으로 가독성과 예측이 편리한 개발 방식이다.
'어떻게'보다는 '무엇을'에 초점을 맞춘 개발 방식으로, 결과물에 집중하고 복잡한 과정은 추상화한다.
컴포넌트를 통한 캡슐화로 인해, React는 선언형의 특징을 가질 수 있다.
Virtual DOM 사용.
Virtual DOM은 가상 돔이라고 불리며, DOM의 구조를 흉내낸 메모리에 존재하는 JS객체이다.
실제 브라우저는 DOM의 변경사항이 있을 때마다 리랜더링을 하는데, 이는 속도가 매우 느려지게 되므로 등장하게 되었다.
가상 DOM의 리렌더링 과정은 변경된 사항을 가상 DOM에 리렌더링 후, 가상 DOM끼리 비교해 변경된 부분만 실제 DOM에 적용하는 순서이다.
이 모든 과정은 JS객체로 실행되기에 리소스를 적게 차지하며, 실제 DOM에 적용이 적어 브라우저의 부담이 적다는 장점이 있다.
하지만 DOM트리가 수정될 때마다 렌더 트리가 계속해서 갱신된다는 단점이 있다.
Hook.
hook은 React v16.8부터 도입된 기능으로, Class기반의 프로그래밍에서 함수형 프로그래밍으로 변화하는 과정을 위해 생성되었다.
함수형에서는 기존에 컴포넌트 작성 및 유지에 상태 로직을 재사용하기 어렵고, 복잡한 컴포넌트의 이해가 어렵다는 단점들이 발견되었다.
점차 함수형을 지향하고 Class를 지양하던 리액트를 위해 고안되었으며,
상태에 관련된 함수인 Hook이 존재하고 그를 사용한 함수를 custom hook, 그렇지 않은 함수는 일반 함수로 판단하면 이해하기 편하다.
단방향 데이터 바인딩.
데이터 바인딩이란 제공자와 소비자의 두 데이터를 일치하는 기법으로 UI와 UI가 표현하는 데이터를 연결하는 프로세스이다.
이는 단방향과 양방향으로 나뉘는데, 단방향 데이터 바인딩이란 데이터측에서 UI 방향으로만 데이터를 동기화하는 것을 의미한다.
따라서 사용자의 값을 입력받아 업데이트하기 위해서는 이벤트를 설정해 변경해주어야 한다.
이는 데이터 흐름이 명확해 추적 및 디버깅이 용이하고, 성능 저하없이 DOM객체 갱신이 가능하다는 장점이 있지만,
이벤트에 따라 화면을 업데이트하는 코드를 매번 작성해야한다는 단점이 있다.
SPA
SPA와 관련된 다른 프레임워크로는 Vue와 Angular가 대표적인데 이 둘을 간략하게 비교해보면 아래와 같다.
React 중심으로 서술하겠다.
Vue
공통점
- Virtual Dom을 공통적으로 사용하고 있다.
- 단방향 데이터 바인딩을 지원한다.
- Typescript를 지원한다.
차이점
- 컴포넌트를 사용하지만 React와 사용법이 전혀 다르다.
- 양방향 데이터 바인딩또한 지원한다.
- MVVM패턴이라는 새로운 구조를 가진다.
- 속도는 React보다 근소하게 빠르고, 러닝커브가 React보다 낮다.
- 유연성이 React보다 낮다.
Angular
공통점
- Typescript를 지원한다.
차이점
- 양방향 데이터 바인딩만 지원한다.
- 가상DOM이 아닌 증가형 DOM(Incremental DOM)을 사용한다.
- 그 자체로 완전한 프레임워크이다보니, 러닝 커브가 가장 높다.
결론
결론적으로 React관점에서 서술하였기 때문에 왜 React를 사용하는가, 다른 프레임워크와 차이점은 무엇인가를 묻는다면
아무래도 라이브러리라는 이유 한 가지밖에 떠오르지 않는다.
커뮤니티가 가장 활발하기에 관련된 라이브러리가 많고 활용방안이 뛰어나다라는 장점이나 그 외에 점도 물론 가지고있다.
하지만 라이브러리이기에 자유도가 높다는 점이 개인이나 기업의 입장에서 보다 자신에게 맞는 환경을 구축하고 활용할 수 있기에
가장 큰 차이점이자 장점으로 생각된다.
