리액트의 장점과 단점

 

리액트의 장점

 

빠른 업데이트 & 렌더링 속도

 

 

여기서 말하는 업데이트는 웹 사이트를 탐색할 때 화면의 내용이 바뀌는걸 의미함!

 

=> 메뉴에서 마이페이지를 선택했을 때 현재 보고있는 화면에서 마이페이지 화면으로 전환되는걸 생각하면 됨

 

리액트는 빠른 업데이트를 위해 내부적으로 Virtual DOM을 사용함

 

Virtual DOM은 말 그대로 가상의 DOM임

📌 DOM이란 Document Of Model로 하나의 웹사이트를 정의하는 객체이다
(= 하나의 웹사이트 정보를 모두 담고있는 큰 그릇)

 

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

 

일반적으로 사용자와 상호작용을 하는 웹페이와 같은 경우 화면의 업데이트가 수시로 이뤄짐

 

=> 화면이 업데이트 된다는 말은 곧 DOM이 수정된다는 말과 동일함

 

=> 화면을 업데이트 하려면 DOM을 업데이트해야하고 성능, 비용적으로 많은 영향을 끼침

(수정할 부분을 DOM의 데이터에서 모두 찾아야하기 때문)

 

반면 리액트는 DOM을 직접 수정하는 것이 아니라 업데이트해야할 최소한의 부분만을 업데이트함

 

어떤 상태의 변경 (State Change) 가 일어나면 Virtual DOM에서는 업데이트할 최소한의 부분을 검색 (compute diff) 하고

검색된 부분만을 업데이트하여 다시 랜더링하면서 빠르게 사용자에게 보여줄 수 있음 (Re-render)

 

 Component-Based

 

 

리액트는 Component-Based이다

컴포넌트는 구성요소라는 뜻을 가지고 있다

 

리액트에서는 모든 페이지가 컴포넌트로 구성되어있고 컴포넌트는 또 다른 컴포넌트의 조합으로 구성될 수 있다!

 

=> 재사용성 (Reusability)이 좋음

 

재사용성은 말 그대로 다시 사용이 가능한 성질을 의미한다

 

모든 소프트웨어에서 재사용이 가능한것이 아니다

 

=> A 프로그램에서 사용하던 모듈을 B 프로그램에서 사용하려고 할 때 의존성이 있는 모듈이 없어서 사용이 불가능한 경우가 있고 여러가지 호환성 문제도 있음

 

재사용성이 좋게 개발을 하게 되면 좋은점은

 

1. 개발 시간이 단축됨!

 

기준에 개발해둔 모듈을 곧바로 재사용해서 사용하면 되기 때문에 개발 시간이 많이 줄어듬

 

2. 유지보수가 용이함

 

여러 소프트웨어에서 공통으로 사용하는 모듈에 문제가 생기면 해당 모듈만 수정해서 다시 배포하면 되기 때문

 

=> 재사용성이 높다는 것은 결국 여러 모듈 간의 의존성이 낮다는 뜻이기 때문에 각 부분들이 잘 분리되어 있고 쉽게 버그를 찾아서 수정할 수 있음

 

활발한 지식공유 & 커뮤니티

 

생태계가 굉장히 좋음!

 

어떤 새로운 기술을 배우다가 모르는 것이 등장하여 막히는 경우가 있는데

생태계가 잘 갖춰져있지 않으면 원하는 답을 얻기 어려움

 

=> 리액트의 활발한 지식공유와 커다란 커뮤니티는 모르는 것을 바로 찾아볼 수 있음

 

React를 공부하면 추후에 React Native를 사용하여 자바스크립트로도 모바일 앱을 개발할 수 있음

(크로스 플랫폼으로 진입장벽이 높은 안드로이드와 ios 개발을 동시에 할 수 있음)

 

리액트의 단점

 

방대한 학습량

 

모든 라이브러리가 그렇지만 특히 React의 경우 기존과는 다른 방식의 UI 라이브러리이기 때문에 배워야할 것이 많음

 

특정 기술을 한 번 배웠다고 끝나는 것이 아니라 버전 업데이트로 새로운 버전이 나오면 이에 대한 내용을 학습하고 이해하고 있어야 개발이 가능함!

 

높은 상태관리 복잡도

 

리액트에는 state라는 개념이 있는데

 

앞서 Virtual DOM을 설명할 때 바뀐 부분만을 찾아서 업데이트한다고 했었는데

여기서 바뀐 부분이라는 것은 state가 바뀐 컴포넌트를 의미함

 

=> 성능 최적화를 위해 이 state를 잘 관리하는 것이 중요한데 처음에는 굉장히 어렵게 느껴짐

(실제 큰 규모의 프로젝트의 경우 상태 관리가 어려워지기 때문에 외부 상태관리 라이브러리를 사용하는 경우가 많음)

 

이런 상태관리 라이브러리도 공부를 해야함 (방대한 학습량)