😄리액트의 장점

➕빠른 업데이트와 렌더링 속도

여기서 업데이트란 웹 사이트를 탐색 시 화면에 나타나는 내용이 바뀌는 것이다. 리액트에서는 빠른 업데이트를 위해 내부적으로 Virtual DOM이라는 것을 사용한다.

📌Virtual DOM이란?

가상의 DOM이다. DOM은 Document Object Model의 약자로 웹페이지를 정의하는 하나의 객체이다.

Virtual DOM은 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 한다.

📌Virtual DOM이 어떻게 업데이트를 빠르게 할 수 있을까?

화면이 업데이트 된다는 말은 DOM이 수정된다는 말이다.

기존의 방식으로 화면을 업데이트 하려면 DOM을 직접 수정해야하는데, 이것은 수정해야할 부분을 DOM의 데이터에서 모두 찾아야 하기 때문에 성능에 큰 영향을 미치고 비용도 굉장히 많이 든다.

반면에 리액트는 DOM을 직접 수정하는 것이 아니라 업데이트 해야할 최소한의 부분만을 찾아서 업데이트 한다. Virtual DOM에서 업데이트 해야할 최소한의 부분만을 검색하고, 검색된 부분만을 업데이트 하고 다시 렌더링하면서 변경된 내용을 사용자에게 빠르게 보여줄 수 있다.

➕컴포넌트 기반의 구조

📌컴포넌트란?

컴포넌트는 구성요소라는 뜻을 가지고 있다. 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러개의 컴포넌트의 조합으로 구성될 수 있다.

리액트로 개발된 웹사이트는 수많은 컴포넌트의 조합으로 구성되어 있어 재사용성이 높다.

📌재사용성이란?

재사용성은 말 그대로 다시 사용이 가능한 성질이다.
소프트웨어를 개발할 때 재사용성이 높게 개발해야 한다는 말은 해당 소프트웨어(모듈)가 다른 곳에도 쉽게 적용될 수 있도록 개발하는 것을 의미한다. 즉, 다른 모듈의 의존성을 낮추고 호환성 문제가 발생하지 않도록 개발해야한다.
재사용성이 높아지면 전체 소프트웨어의 개발 기간이 단축되며, 유지 보수가 용이하다는 장점이 있다.

리액트는 컴포넌트 기반의 구조로 되어 있기 때문에 각 컴포넌트들은 웹사이트의 여러 곳에서 반복적으로 사용될 수 있다. 즉, 하나의 컴포넌트가 계속해서 재사용될 수 있다는 말이다.

➕모바일 앱 개발

리액트를 배우면 리액트 네이티브라는 모바일 환경 UI 프레임워크를 사용해서 모바일 앱도 개발할 수 있다.

보통 모바일 앱을 개발하기 위해선 안드로이드 앱은 Kotlin, iOS 앱은 Swift라는 언어를 배우고 각각의 개발 프레임워크에 대해서도 학습해야한다. 하지만 리액트 네이티브를 사용하면 자바스크립트로 안드로이드 앱과 iOS 앱을 동시에 만들 수 있다.

😢리액트의 단점

➖방대한 학습량

모든 라이브러리가 그렇지만 특히 리액트의 경우 기존과는 다른 방식의 UI 라이브러리이기 때문에 배워야할 것들이 많다. Virtual DOM, JSX, Component, State, Props 등 새로운 개념들도 많이 등장한다.

특정 기술을 한 번 배웠다고 끝나는 것이 아니라 바뀌는 부분에 대해서도 꾸준히 공부해야한다. 리액트 같은 경우에도 계속해서 버전 업데이트가 이뤄지고 있어 새로운 내용들이 계속해서 등장한다. 따라서 계속해서 새로운 버전에 대한 학습과 이해가 필요하다.

➖높은 상태관리 복잡도

리액트에는 State라는 컴포넌트 상태를 의미하는 개념이 있다. State는 리액트에서 굉장히 중요한 역할을 담당하고 있기에, State를 잘 관리하는 것이 중요하다. 처음엔 간단할 수 있어도 웹사이트의 규모가 커져 컴포넌트의 개수가 많아지면 상태 관리의 복잡도도 증가한다.

보통 큰 규모의 프로젝트의 경우 상태 관리를 위해 Redux, MobX, Recoil 같은 외부 상태 관리 라이브러리를 사용하는 경우가 많다.