리액트를 사용하는 이유

1. 컴포넌트 기반의 화면구성

리액트는 화면의 한 부분을 컴포넌트 라는 단위로 나눌 수 있으며 독립적으로 관리할 수 있습니다. 대규모 웹 애플리케이션에서 컴포넌트는 역할과 기능에 따라 따로 관리하기 용이하며, 반복되는 부분을 대체할 수 있게 해주어서 코드 재사용성을 높여줍니다. 또 컴포넌트 기반의 화면을 구성한다면 블록 쌓기처럼 컴포넌트를 쌓아서 빠르고 효율적으로 화면을 구성할 수 있습니다.

 

2. Virtual DOM으로 인한 충분히 빠른 속도

Virtual DOM은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다. 이 접근방식이 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.

+) 리액트가 빠르다고 생각하지 않는 의견도 있음

가상 DOM을 사용하여 변경된 내용을 찾고 이를 통해 전체 DOM을 바꾸는 대신 변경 사항만 실제 DOM에 적용하는 virtual DOM의 방식은 DOM을 직접 건드는 방식보다 효율적으로 보이지만, virtual DOM은 실제 DOM보다 무조건 빠르다고는 할 수 없다. 가상 DOM을 만드는 과정, 비교하는 과정, 실제 DOM에 적용하는 과정도 다 비용이기 때문에 직접 DOM을 변경하는 방식이 더 효율적일 때가 있다. 
Redux 창시자이자 React 개발팀원인 Dan Abramov 는 트윗에서 React가 DOM보다 빠르다는 것은 잘못된 사실이라고 얘기했다. 덧붙여 리액트는 유지보수가 가능한 애플리케이션을 만드는 것을 도와주고 대부분은 충분히 빠르다고 얘기했다. 
즉 리액트는 유지보수에 강점이 있고 속도도 충분히 빠르므로 페이스북에서 채택하고 사용한다는 것이다. 
virtual DOM이라고 무조건 DOM보다 빠르다는 것은 아니라는 것이다.
노드의 변화가 많이 없는 정적인 사이트에서는 굳이 리액트를 사용할 필요가 없다는 사람들도 많다. 
그리고 최적화 작업을 (제대로) 손수 했을 때 리액트를 사용했을 때보다 빠르다고 한다. 
하지만 이 작업을 자동화한 리액트는 생산성에서 우위가 있고 충분히 빠르므로 사람들에게 사랑받는 것 같다. 

 

3. SPA(싱글 페이지 애플리케이션)

• 장점 : 서버의 자원을 아낄 수 있다. & 더 좋은 사용자 경험을 누릴 수 있다.
• 단점 : 사용자와 인터렉션이 많은 경우에는 서버의 자원이 많이 사용되고 불필요한 트레픽이 낭비 될 수 있다.

 

[요약] 리액트의 장점

• component를 사용해서 유지보수가 용이 (필요한 부분의 component만 렌더링 된다. 최적화된 렌더링이 가능)
• 생태계가 넓고, 다양한 라이브러리 사용 가능
• virtual DOM을 활용하여 빠른 렌더링이 가능
• 리액트 네이티브를 활용하여 앱 개발 가능

 

---

출처

https://dont-stay-hungry.tistory.com/3