React 리액트 장점과 단점

■ React 리액트 장점과 단점

- 리엑트의 장점

• 빠른 업데이트
  # 웹 사이트를 탐색할 때 화면에 나타나는 내용이 변경되는 것
  # Virtual DOM 사용
  : Virtual DOM은 가상의 DOM이다.
  : DOM은 Document Object Model의 약자로 웹페이지를 정의하는 하나의 객체
  # 하나의 웹 사이트에 대한 정보를 모두 담고있는 큰 그릇
• 랜더링 속도

 

일반적으로 사용자와 상호작용을 하는 웹페이지 같은 경우 업데이트가 수시로 이루어진다.

그래서 화면이 업데이트된다는 말은 곧 DOM이 수정된다는 말과 동일하다.

 

기존 방식으로 화면을 업데이트할 경우 DOM을 직접 수정해야하는데 이 경우

선응에 영향을 크게 미치고 비용도 많이드는 작업이다.

수정할 데이터를 DOM에서 모두 찾아야하기 때문..!

 

하지만 React는 DOM을 직접 수정하는 것이 아닌 업데이트 해야할 최소한의 부분만을 찾아 업데이트한다.

 

위 그림처럼 어떤 상태의 변경, state Change가 일어나면 Vertual DOM에서는

업데이트해야 될 최소한의 부분을 검색, 컴퓨트 딥 한다.

이후 검색 된 부분만을 업데이트하고 다시 랜더링하면서 변경된 내용을 사용자에게 빠르게 제공할 수 있다.

 

• 컴포넌트 기반의 구조 (Component-Based)
  컴포넌트는 구성 요소라는 뜻을 가지고 있으며, 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고
  하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다.
  # 작은 레고 블록들이 모여 하나의 완성된 모형이 되는 것과 비슷하다.
  
  
• 재사용성(Reusability)
  다시 사용이 가능한 성질

 

※ 재사용 시에는 의존성 문제 외에 다양한 호환성 문제가 발생할 수 있다.

 

재사용성이 높게 개발해야 한다는 말은 소프트웨어 또는

모듈이 다른 곳에도 쉽게 적용하여 곧바로 쓸 수 있도록 개발하는 것을 의미

다른 모듈의 의존성을 낮추고 호환성 문제가 발생하지 않도록 개발해야한 다는 의미이기도 하다.

 

• 재사용성이 높아지면?
  개발 기간이 단축된다.
  # 비슷한 소프트웨어를 개발한다고 할 때 기존에 개발해둔 모듈을 곧바로 재사용하여 개발하면 된다.
  
  
• 유지보수 용이
  # 여러 소프트웨어에서 공통으로 사용하는 모듈에 문제가 생기면 해당 모듈만 수정하면 되기 때문!
  # 개발 시 예상치 못한 버그를 마주치는 상황이 빈번하나 재사용성이 높을 시 버그 원인을 찾기 쉽다.
  # 리엑트 컴포넌트를 개발할 때 항상 쉽고 재사용 가능한 형태로 개발하는 것이 좋다
  
  
• 활발한 지식공유 & 커뮤니티
  # 모르는 것을 바로 찾아 볼 수 있다.
  # 오픈소스 깃 허브 프로젝트를 통해 확인 가능
  # stack overflow에서도 확인 가능
  
  
• React Native
  # 모바일 앱 개발 가능
  # 안드로이드 Kotlin / iOS Swift를 배워야하나 React Native를 통해 두 앱을 동시에 만들 수 있다.

---

■ 리엑트 단점

• 방대한 학습량
  # 기존과는 다른 방식의 UI 라이브러리이기 때문에 배워야할게 많다.
  : Virtual DOM, JSX, Component State Props 등의 새로운 개념..
  
  
• 버전 업데이트가 꾸준히 나오고 있어 이에 대한 내용 학습 및 이해 필요
  
  
• 높은 상태관리 복잡도
  state는 리액트 컴포넌트의 상태를 의미한다.
  # Virtual DOM에서 바뀐 부분만 찾아 업데이트한다고 했는데 바뀐 부분이 state 컴포넌트를 의미한다.
  # 큰 규모의 프로젝트는 상태 관리를 위해 리덕스, 보백스, 리코일 같은 외부 상태관리 라이브러리를 사용한다.