새로운 개발에 필요한 라이브러리나 프레임워크를 선택할 때는 해당 제품의 사용 이유를 심도 있게 고려해야 합니다.
‘왜 이 제품을 사용하는가?’, ‘어떤 장점이 있고, 어떤 단점이 존재하는가?’
이러한 질문들에 대한 깊은 고민은 필수적입니다.
본 글에서는 React(리액트) 라는 라이브러리의 사용 이유에 대해 다루고자 합니다.

React는 2013년 페이스북에 의해 출시되었고 현재까지 꾸준한 인기를 누리고 있습니다.
React는 개발자가 웹사이트와 애플리케이션에서 빠르고 효율적인 사용자 인터페이스를 쉽게 구현할 수 있도록 설계되었습니다.

그럼 사람들 왜 React을 사용할까요? 저는 React의 핵심 요소인 Virtual DOM(가상 DOM) 때문이라고 생각됩니다.

웹 브라우저가 웹사이트의 텍스트 문서를 읽어서 DOM(Document Object Model)이라는 트리 구조로 바꾸어 사용자에게 보여주게 되는데, 웹 개발자들은 사용자의 반응에 따라 이 DOM 트리를 변경하여 웹사이트의 내용을 갱신합니다. 하지만 매번 작은 변화가 있을 때마다 전체 화면을 새로 그리는 것은 성능에 좋지 않습니다. React는 이 문제를 해결하기 위해 Virtual DOM을 도입하였습니다.

Virtual DOM은 실제 DOM의 복제본으로, 웹 개발자들이 변화를 주고 싶은 부분만 Virtual DOM에서 수정하게 됩니다. 그 후, React는 Virtual DOM과 실제 DOM 사이의 차이점을 찾아내어, 그 차이점만 실제 DOM에 반영하게 됩니다. 불필요한 화면의 갱신을 최소화하여 성능을 향상시키는 이 방법이 React 라는 라이브러리의 선택 이유라고 생각됩니다.

Oleksandr Hutsulak님이 자신의 블로그에서 React를 사용하는 이유 10가지를 소개하였는데, React 라는 라이브러리를 선택하는 분들에게 도움이 되고자 번역을 해봤습니다.

1. 완성도 높고 이해하기 쉬운 개발 워크플로우

웹 개발에 React.js를 사용하는 주요 이유 중 하나는 라이브러리에 최적화된 개발 인터페이스와 코딩 언어 때문입니다. 빠른 성능으로 강화된 가벼운 React API는 신속한 개발 워크플로우를 구현합니다. React 구성 요소와 개념은 이해하기 쉬우므로 이 부분에 대한 러닝 커브가 높지 않습니다.

Vue나 Angular 같은 다른 인기 프레임워크와 달리 불필요한 HTML 어트리뷰트(기존 프레임워크와 JS 라이브러리 솔루션의 표준 방식으로 JavaScript를 HTML에 ‘끼워 넣기‘할 때 생성됨)가 없습니다. 결과적으로 React는 JSX를 JavaScript에 넣음으로써(말 그대로 거꾸로) 훨씬 간결하고 가독성이 뛰어나며 포괄적인 코드를 제공합니다.

2. 뛰어난 유연성과 호환성

웹 개발에 React.js를 사용하면 매우 편리한데, 그 이유는 한번 익힌 기술을 다양한 플랫폼에서 쉽게 재사용할 수 있기 때문입니다. Button과 Label부터 Grid, interactive 기능에 이르기까지 다양한 웹 디자인 요소와 컴포넌트를 생성하는 것을 주 목적으로 하는 자연스러운 라이브러리이기 때문이기도 합니다.

또한, React가 사용되는 이유에는 오랜 역사를 자랑하는 거대한 커뮤니티의 공헌이 큽니다. 현재 React의 생태계는 매우 방대하기 때문에 비슷하고 단순한 React 웹 개발 가이드라인과 철학에 따라 데스크톱 솔루션과 모바일 애플리케이션을 만들고, 정적 웹사이트를 생성하고, 서버 렌더링을 처리하고, VR 및 360도 뷰와 같은 고급 기술 개념을 웹 솔루션에 적용할 수 있습니다.

3. 손쉬운 컴포넌트 재사용성

위에서 궁극적으로 물었던 질문, 웹 개발에서 React.js가 가장 많이 사용되는 용도는 무엇일까요? 바로 별도의 컴포넌트를 만드는 용도입니다. 바로 이런 이유 때문에 생성된 컴포넌트를 쉽게 재사용할 수 있습니다. React.js 웹 애플리케이션 요소를 생성하면 React 기반의 코드와 호환 가능한 다른 프로젝트에 고유한 오브젝트를 추가할 수 있습니다.

(상위 컴포넌트로 래핑되는) 이러한 컴포넌트로 더 큰 일반적인 계층 구조가 구축되지만, 각 컴포넌트에는 각각 별도의 전용 내부 로직과 렌더링 원칙이 있습니다. 이를 바탕으로 확장성이 뛰어나고, 훨씬 더 나은 React 웹 앱 일관성을 달성할 수 있으며, 추가 개발 지원 및 최적화가 매우 쉬워집니다.

4. Virtual DOM으로 한층 강화된 고성능

DOM을 가상화하여 메모리에 보관함으로써 React는 모든 뷰 변경 사항을 가상 DOM에 즉시 반영하여 놀라운 속도의 렌더링을 제공합니다. 특화된 diff 알고리즘은 이전과 기존 가상 DOM 상태를 병렬적으로 비교하여 많은 업데이트 없이 새로운 변경 사항을 적용하는 가장 효율적인 방법을 계산합니다. 그런 다음 최소한의 업데이트를 도입하여 가장 빠른 읽기/쓰기 시간을 달성하고 전반적인 성능을 향상시킵니다.

DOM 변경은 시스템을 느리게 만드는데, DOM을 가상화하면 이러한 변경을 최소화하고 스마트하게 최적화할 수 있습니다. 모든 가상 DOM 조작은 ‘백그라운드‘에서, 내부에서 자동으로 이루어지기 때문에 하드웨어 리소스 소모율(예를 들어 모바일 기기의 CPU 전력 및 배터리)을 크게 절약할 수 있습니다.

5. Flux와 Redux의 힘

웹 개발자에서 React에 대한 특별한 수요는 즉시 사용할 수 있는 Flux와 Redux 기능에 의해 결정되었습니다. Facebook의 개발자들은 단방향 데이터를 처리할 수 있는 Flux 기반 소프트웨어 아키텍처를 처음 도입했습니다.

Central dispatcher는 생성된 action을 관리하고 store를 변경하는 데 사용됩니다. 이후 store 변경에 따라 view를 업데이트합니다. 이때 모든 데이터는 중복되지 않은 형태로 store에 유지되며, 모델과 멀지않은 상태로 동기화 유지됩니다.

Flux는 편리한 UI 디자인 워크플로우를 위해 프론트엔드에서 사용되는 아키텍처 패턴일 뿐, 완전한 라이브러리로 사용할 수는 없습니다. Redux는 편리한 Flux 구현을 위해 등장하였습니다. Redux는 모든 앱 데이터를 처리할 수 있는 단일 store 객체를 제공하여 기본 데이터 관리 조작을 간편하고 편리하게 만들어 줍니다. View가 연관 데이터와 지속적으로 동기화되는 동안, Redux는 store 변경 을 감지하여 랜더링을 실행하게 합니다.

6. 다양한 툴 제공

웹 개발에 React JS를 사용하는 이유에 대해 전문가들은 다양한 툴과 기술 스택을 강조합니다. Redux 개발자 도구와 함께 React 개발자 도구는 매우 편리한 기능이 제공되며, 크롬 확장 프로그램처럼 쉽게 설치하여 사용할 수 있습니다. 개발자 도구의 도움으로 React 기반 구성 요소(props 및 state 포함)와 Dispatch Action을 효율적으로 확인하고 확인할수 있고, 확장 프로그램을 통한다면 state 변경 사항까지 확인할 수 있습니다.

7. React Native의 강력한 기능

웹개발자들이 Native 또는 Hybrid 앱 개발 프로젝트를 시작하려는 경우 React를 사용하는것이 과연 맞을까?라는 의문들이 가졌고, 이 시기 iOS와 안드로이드용 native 및 hybrid 모바일 앱 개발의 판도를 바꿀 수 있는 React Native가 등장합니다. 물론 특정 코드를 재사용할 수 있는 기회를 잃게 되지만, 적절한 네이티브 성능과 시스템 관리를 수행하여 줍니다.

단일 코드 베이스로 하나의 앱을 빌드하여 비용을 절감할 수 있으며, 다양한 운영 환경, 다양한 솔루션에 맞춤형 결과를 하이브리드 형태로 제공할 수 있습니다.

8. 시장에 영향을 미치는 거대한 커뮤니티와 리소스

GitHub에서 상위 5개 리포지토리 중 하나이며, 대규모 커뮤니티의 지원을 받고 있습니다. 또한 Fortune 500대 기업( Netflix, Uber, Amazon, Airbnb 등)에서도 선호하는 기술입니다.

Facebook에서 직접 일하는 전문가들의 활발한 지원을 받을 수 있으며, 세계에서 가장 유명한 소프트웨어 솔루션의 핵심 기술인것만으로서 웹 개발에 React.js를 사용해야 하는 충분한 이유가 될 수 있습니다. Facebook 개발자의 인사이트와 업데이트가 공유되는 블로그도 존재합니다.

9. HTML 확장을 위한 JSX 구문

웹 개발에 React를 사용하는 이유는 무엇인가요? React.js를 사용하면 자바스크립트 코드에서 명시적 HTML 구문을 직접 활용할 수 있습니다. 브라우저는 사용자 인터페이스를 표시하기 위해 HTML 텍스트를 디코딩합니다. 브라우저는 이를 위해 DOM 트리를 구축한 다음 자바스크립트로 조작하여 대화형 UI를 만듭니다.

매니폴드에 의한 DOM 조작은 JSX를 사용하면 더욱 효율적입니다. 개발자는 브라우저의 트리 구조에 HTML과 React.js 컴포넌트를 전달하여 유지보수가 쉬운 깔끔한 코드를 구축할 수 있습니다. JSX와 Virtual DOM 덕분에 React.js 앱은 더 빠르고 효율적입니다. 다른 프레임워크와 라이브러리도 JSX와 함께 활용할 수 있습니다.

10. React Hook

React Hook이 처음 소개되었을 때 Redux를 대체할 것인지에 대해 많은 논의가 있었습니다. 그럴 거라고 생각하지 않습니다. 하지만 Hook은 자바스크립트 작성자가 함수 컴포넌트에 state와 다른 기능들을 추가할 수 있게 해주는 React.js 16.8의 새로운 기능인거는 확실합니다.

이제 더 이상 복잡한 class에 대처할 필요가 없습니다. Hook을 사용하여 컴포넌트 간의 state 로직을 간단하게 관리할 수 있고, 비슷한 로직들을 하나의 컴포넌트로 그룹화할 수 있으며, props나 class가 없는 컴포넌트 간에 데이터를 전송할 수 있습니다.

참고 자료

2023/03/12

TechMagic – 10 Key Reasons Why You Should Use React for Web Development

👉 모두의연구소 프론트엔드 개발 과정