최근 10년동안 리액트 (React)는 최첨단의 UI를 만들어 주는 강력한 기능으로 여러 방면의 개발자들에게 유명세를 탔습니다. 이 포스팅에서는 많은 개발자들에게 사랑 받고있는 리액트의 장단점에 대하여 알아보겠습니다.
React JS란?
React JS는 Facebook이 정확히 10년 전에 출시한 컴포넌트 기반의 라이브러리입니다. 이 라이브러리는 인터렉티브한 UI를 쉽게 구현하고 효율적으로 각 컴포넌트의 상태관리를 합니다. 복잡한 애플리케이션에 다수의 컴포넌트를 구현하며 브라우저의 DOM (Document Object Model)의 상태를 잃지않는 것이 아주 큰 이점입니다.
웹 뿐만아니라 리액트 네이티브 (React Native)를 사용하여 모바일 앱을 구현하기도 합니다. 이 오픈소스 라이브러리는 Android, iOS 그리고 Windows 앱을 개발할 수 있어서 리액트의 유연성을 보여줍니다.
리액트의 생태계 (Ecosystem)
리액트의 최대 자산 중 한가지는 리액트의 기능을 확장시키는 충만한 서드파티 라이브러리와 툴로 방대한 생태계입니다. 이 한가지 만으로도 여러 외부서비스를 연결하는 복잡한 라우팅 프로젝트에 적격입니다.
리액트의 유연성과 방대한 서드파티 서비스와의 호환성은 개발자들이 과도한 오버헤드 없이도 고도의 기능을 갖추면서 애플리케이션을 향상시키는 통합 프로세스를 쉽게 하여줍니다.
코어 파트로는 리액트 라우터 (React Router)같은 툴이 SPA (single-page application)의 유저에게 자연스러운 UX 트랜지션을 돕고 있습니다. 중요한 상태관리 툴인 리덕스 (Redux)는 상태의 중앙 스토어를 만들어 각각 다른 컴포넌트가 접근하여 업데이트를 하게 합니다. 이 부분이 대규모의 애플리케이션에 적합한 이유입니다.
React.js: 단순한 복잡성을 뛰어넘다
리액트가 UI 구현에 뛰어나다면 취약한 부분은 상태관리나 SEO (search engine optimization)입니다. 다행이도 방대한 JS 생태계에 이런 취약점을 보완하는 툴들이 존재합니다. 스트림라인화한 상태관리나 SEO의 향상하는 서버사이드 렌더링이나 데이터베이스 관리 툴들이죠. 이런 중요한 옵션들을 좀 더 알아보겠습니다.
MobX는 최소의 보일러플레이트를 이용하여 직관적인 상태관리를 하도록 도와주는 툴입니다. Next.js는 클라이언트 사이드 렌더링으로 인한 SEO의 문제를 서버사이드 렌더링과 정적 사이트를 구현하여 해결해 줍니다. 개발과 테스팅으로는 CRA (create react app)이 새로운 프론트엔드 빌드의 파이프라인을 별도의 설정 없이도 쉽게 구축하여 줍니다.
그리고 Storybook은 개발자들이 UI 컴포넌트의 여러가지 상태를 시각화하게 하여 UI 개발 환경을 도와줍니다. 유명한 단위와 스냅샷 테스팅 툴인 Jest는 리액트와 호환이 됩니다. Airbnb가 개발한 Enzyme은 테스팅 유틸리티로 asserting, manipulating과 output traversing 을 쉽게 도와줍니다.
추가적인 라이브러리나 유틸리티는 다음과 같습니다. Material-UI와 Ant Design은 기능과 미를 겸비하여 포괄적인 UI 프레임워크를 제공합니다. Axios는 프로미스 기반의 HTTP 클라이언트를 제공합니다. React Query는 비동기 데이터를 fetching, caching과 업데이트하는 것을 쉽게 도와 주고, React Helmet은 문서의 헤드를 수정하여 SEO의 최적화를 도와줍니다.
Node.js나 Django 그리고 상태관리 라이브러리인 Apollo for GraphQL과 같이 리액트와 다른 기술과 통합은 리액트의 유연성을 강화시킵니다. 지금은 PDF 뷰어마저도 임베드를 할 수 있습니다.
그렇지만, 지속적인 진화는 개발자들이 새로운 체인지나 발전 부분에 관하여 업데이트 되어야한다는 챌린지를 접합니다.
리액트의 장점
다이나믹하고 반응형의 웹애플리케이션을 구현하는 키 라이브러리인 리액트의 장점은 아래와 같습니다.
컴포넌트 기반의 아키텍쳐
기존의 자바스크립트 애플리케이션들은 규모가 커지먄 상태관리에 문제가 많았습니다. 리액트는 개발자가 웹페이지의 다른 부분에 영향을 미치지 않고 일정 부분만 업데이트 할 수 있는 정교하고, 독립적으로 관리되고 재사용 가능한 컴포넌트를 제공합니다.
당연히 이 콘셉트는 리액트에만 존재하는 것이 아닙니다. 앵귤러 (Angular)도 컴포넌트를 기본 빌딩 블록으로 사용합니다. 하지만 리액트의 큰 커뮤니티와 메타 (Meta)의 서포트 그리고 입문하는 벽이 높지 않는 것이 큰 이점이죠.
향상된 개발환경의 커스터마이징
리액트의 다재다능함은 각각의 비즈니스 니즈를 위한 맞춤형 개발을 할 수 있다는데에서 빛을 발합니다. 컴포넌트 기반의 아키텍쳐는 복잡한 구조으 애플리케이션을 만들수 있습니다.
예를 들어 통합 대시보드를 구축한다면, 리액트의 생태계는 차트, 위젯,이나 실시간 데이터 피드같이 여러 다양한 모듈의 통합을 용이하게 하여 기능적이고, 직관적이며 미적으로 결합력있는 인터페이스로 만들어 줍니다
개발자를 위한 미래 지향적인 초이스
리액트의 미래 지향적인 부분이 개발자들에게 상당한 이점이 됩니다. 리액트의 유연한 아키텍쳐는 현재의 웹 개발의 요구사항을 맞춰주고 있고 떠오르는 새 기술에 적을을 합니다.
특히나 머신러닝 (machine learning)은 2022년의 미국의 ML 시장 210억 달러 가치를 보이면서 웹개발에 상당한 급습을 하고 있습니다. 이는 리액트의 미래 지향적인 면에 밑줄을 긋습니다.
중요한 예제중 하나는 TensorFlow.js라는 ML 라이브러리입니다. 그리고 리액트는 ML 기반의 챗봇과도 통합이 가능합니다. 게다가 WebAssembly는 Rust, Python 이나 C++ 같이 다른 언어로 코딩된 ML 앱과도 호환이 가능하게 합니다.
상태관리를 위한 Redux
다양하고 수많은 컴포넌트가 한 페이지에 존재하는 SPA (single page applications)에서는 상태나 컴포넌트간의 소통이 챌린지가 됩니다. 이 이유로 리액트를 빛나게하는 Redux가 존재합니다.
리액트의 완전한 파트로서 상태의 중앙화와 컴포넌트의 독립성을 취하며 컴포넌트 사이의 일관되고 정확한 데이터 플로우를 관리합니다. 이로써 데이터 안정화고 UX를 향상 시킵니다.
리액트의 단점
리액트는 여러 레벨의 개발자에게 이점도 많지만 단점이 없지는 않습니다.
복잡한 컨셉트와 고 난이도의 패턴
리액트는 신규 개발자에게 압도적일 수도 있는 여러가지의 고도화된 컨셉트와 패턴을 선보입니다. JSX, 컴포넌트, props, 상태 관리, 라이프사이클 메소드 그리고 hooks는 자바스크립트의 완전한 기본 습득을 요구합니다.
다른 기술과의 복잡한 통합성
리액트는 Redux, React Router 그리고 여러 미들웨어 같은 다른 툴이나 테크놀로지와 연동하여 사용됩니다. 통합하는 방법을 이해하는데 신규 개발자들은 어렵게 생각될 수 있습니다.
자바스크립트를 사용하지 않는 개발자들에게는 높은 벽
자바스크립트에게 의존하는 리액트는 자바스크립트에 능숙하지 않은 개발자에게는 높은 벽입니다. 자바스크립트가 많이 사용되고 있지만 다른 언어의 백그라운드를 가진 개발자들에게는 자바스크립트의 패러다임에 적응하며 리액트 방식으로 사용하기에는 난이도가 높습니다.
완전하지 않은 프레임워크
리액트는 MVC (model view controller)의 View 파트를 책임지고 있습니다. Model이나 Controller 부분은 추가적인 라이브러리가 필요합니다. 이런 경우에는 완전한 Angular와는 달리 구조화가 떨어지고 혼란스러운 코드가 될 수 있습니다.
부풀어진 코드
리액트는 방대한 라이브러리와 종속성의 요구사항으로인해 부풀어진 애플리케이션으로 악명이 높습니다. 이 부풀림은 특히나 복잡한 프로젝트에서 긴 로딩타임으로 나타나게 됩니다. Virtual DOM에 의존하는 프레임워크의 구조는 아주 마이너한 기능을 위해서도 라이브러리 전체를 로딩해야합니다. 그래서 디지털 발자국을 극대화 시키면서 효율성은 낮아지는 단점이 있습니다.
레거시 장치와 약한 네트워크에게는 감소된 성능
오래된 장치와 인터넷 속도가 느린 장소에서는 리액트의 성능이 현저히 감소될 수 있습니다. 이유는 클라이언트 사이드 렌더링 기반의 모델이고 강도가 높은 자바스크립트 프로세싱입니다. 이러한 점들은 인터렉티브 환경을 렌더링하기에는 기기의 계산 기능이 낮거나 인터넷 속도가 느리다면 UX를 저하시키는 결과를 가져오는 딜레이가 심하게 보입니다.
최종 평가
웹 개발이 나날이 진화하면서 리액트의 유연성과 기반이 잘 다져진 생태계는 잘 이겨내고 있습니다. 리액트는 지속적으로 개발자들에게 최첨단 기능을 애플리케이션에 도입을 하게 해 줄것입니다. 그럼에도 불구하고 취약점도 있죠.
리액트의 복잡성과 고도의 자바스크립트 컨셉트에 의존하는 면은 자바스크립트에 익숙하지 않은 신규 개발자들에게는 러닝커브가 높습니다. MVC중 View에 몰두된 프레임워크에 다른 툴들을 어렵게 도입해야하는 문제점들도 가지고 있습니다.
이런 챌린지에도 불구하고 아주 크고 활동적인 리액트 커뮤니티는 프레임워크의 발전에 아주 중요한 역할을 합니다. 현 시점으로 예측가능한 미래까지 리액트는 아직도 웹과 모바일 애플리케이션 개발에 중요한 라이브러리로 계속 설 것 입니다
참고:
