React 장단점 분석 정리

728x90

안녕하세요 프론트엔드개발자 웹코기입니다.

React 공부를 계속하면서 실무에서 사용해왔지만, 장단점을 직접 말로 해보려고 하니 제 머릿속이 정리가 안돼서 난잡해지더라고요. 그래서 오늘은 스스로 정리도 할 겸 React 장단점에 대해 분석해보겠습니다!!

React 장점

1. Virtual DOM 사용

DOM 이란?

문서 객체모델 (Document Object Model)
말이 어려워서 쉽게 머리에 들어오지 않으실 텐데요, 쉽게 생각하면 html 태그 하나하나의 요소를 지칭한다고 생각하시면 되겠습니다.

Real DOM 이란?

Real DOM = 실제 DOM 처리
기존 Javascript & jQuery는 real DOM을 사용합니다. ~~(최근 떠오르는 스벨트도 Real DOM을 사용한다고 합니다...)~~
DOM을 다시 그린다는 것은, HTML, CSS DOM 트리를 다시 구성한다는 것이고, 이는 성능에 있어서 매우 비효율적입니다. 예를 들어 10개의 노드를 수정해야 할 경우, 10번의 리 랜더링이 필요하기 때문이죠.
저는 개인적으로 오픈마켓 프로젝트에서 JS & jQuery를 이용한 real DOM 사용으로 인해 프로젝트가 커질수록 속도 차이가 1~3초 차이 이상이 나는 것을 경험했습니다. 제가 react를 선택한 결정적 계기이기도 하죠.

Virtual DOM 이란?

Virtual DOM = 가상 DOM 처리
가상에서 DOM을 처리하므로 실제 HTML, CSS DOM 트리에 영향을 주지 않습니다.
Vitual DOM은 리 랜더링 과정이 필요 없기 때문에 연산 비용이 Real DOM보다 적습니다.
연산이 끝난 후, 최종적인 변화만 딱 한번 전달해줍니다.
참조 : 토스 SLASH21 컨퍼런스 영상중에서...

2. 프런트엔드와 백엔드의 확실한 분리로 협업이 용이

물론 기존 기술로도 프론트엔드와 백엔드 분리작업을 진행할 수 있긴 하지만, React는 작업 구조 자체가 분리되어 있기 때문에, 보다 확실한 분리가 가능합니다.

3. 다른 라이브러리와 혼용 가능

리액트는 프레임워크가 아닌 라이브러리기 때문에 다른 라이브러리와 혼용 가능합니다.

4. 글로벌 IT 기업을 포함한 여러 기업에서 사용되는 라이브러리

Airbnb, Twitch, facebook, kakao, naver등에서 모두 사용 중입니다. 그렇기 때문에 React 시장은 더 커질 것이고, 사용성도 높아지는 것은 당연하겠죠?

5. 웹, 앱, 응용 프로그램 등 다양한 기기 환경에 맞춰 서비스 가능

리액트 = PC 웹사이트
리액트 & 일렉트론 = 응용 프로그램
리액트 네이티브 = Android, ios

React 단점

1. 러닝 커브

React는 라이브러리입니다. 이 말은 react는 최소한의 기능만을 제공한다는 것이고, 프로젝트 하나를 완성하려면 다른 라이브러리로 함께 조합해 사용하게 됩니다. 이것은 장점이기도 하지만, 다른 말로는 react 외에도 다른 라이브러리도 계속 학습해야 한다는 뜻이 됩니다. 더욱더 편리하고 효율성 높은 앱을 만들기 위한 새로운 재료가 끝없이 쏟아져 나오므로 더 좋은 서비스를 위해서 (=더 좋은 재료의 올바른 사용을 위해서) 꾸준한 학습이 필요합니다.

2. 큰 규모의 프로젝트가 아니라면

마찬가지로 러닝 커브에 대한 얘기인데요 ~ 만약 큰 규모의 프로젝트가 아닌 간단한 웹사이트를 만드는 것이라면, 성능이나 협업을 위한 정리된 코드의 필요성이 크진 않겠죠? 리액트는 초기 진입장벽이 높진 않습니다만 기존 작업방식을 고수하던 개발자들에게는 본인들에게 익숙한 방식이 생산적인 면에서 훨씬 뛰어나기 때문에 반갑진 않을 겁니다.

실제로 제가 일하고 있는 회사에서는 리액트 개발자가 없습니다. 이번에 도입을 부분적으로 시행하고 있는데요! 기존 방식이 생산적인 면에서 뛰어나고, 큰 규모의 서비스나 프로젝트가 없다 보니 리액트를 도입하려던 부분에서도 다시 기존 방식으로 돌아가고 있습니다...ㅜㅡㅜ

이 글이 도움이 되셨으면 좋겠고, 혹시 맞지 않는 부분이 있다면 지적 부탁드려요! 감사합니다.