내가 React 를 좋아하는 이유

React 는 현재 웹 프론트엔드 분야에서 단연코 1등이라고 말할 수 있는 JavaScript 라이브러리입니다. Create-React-App, NextJS, GatsbyJS, React-Native 등이 React 를 기반으로 동작합니다.

오늘 이 글에서는 제가 왜 React 를 좋아하는지, React 에 어떤 철학적인 장점이 있는지 소개해 보려 합니다.

버그가 발생하지 않는

React 의 가장 중요한 특징이라고 생각합니다. 애초에 React가 탄생한 이유라고도 하죠. React 로 만들어진 웹은 구조상 immutable과 flux 라는 React 의 지키기 쉬운 기본 철학만 지키면 버그가 발생하지 않습니다. 즉 DOM 에 있는 것과 내 데이터가 가지고 있는 것이 다를 수가 없습니다.

이런 장점은 이들의 특별한 아이디어에서 출발했습니다. "값이 바뀌면 화면 전체를 다시 그려 버린다" 는 아이디어죠. 그리고 이들은 virtual DOM 을 이용해 이 아이디어를 실현했습니다. (관련 글: React 가 Virtual DOM 을 사용하는 이유)

이런 장점은 개발자에게 아주 중요합니다. "왜 안 되지" 라는 기약 없는 고민은 (물론 얻는 건 많지만) 선호되지 않으니까요. 대신 React 는 높은 자유도와 적은 버그를 바탕으로 "뭐가 best practice지" 라는 건설적인 고민을 할 시간을 벌어 줍니다.

물론 이 철학을 위해 성능을 포기했지만, 16ms 안에만 들어가면 연산 시간이 얼마나 걸리든 상관없죠!

간혹 16ms 안에 들어가지 않는 경우가 있습니다. 애니메이션이 굉장히 화려하거나, 그려야 하는 엘리먼트가 굉장히 많거나 하는 등등의 상황에서요. 이런 케이스에서는 canvas와 svg 등 다양한 솔루션을 고려해봐야 합니다. React 와 Virtual DOM 은 성능이 좋지 않으니까요.

선언적

React 는 선언적인 api를 제공합니다. 하나의 컴포넌트는 마운트, 렌더, 이벤트 핸들, 사이드 이펙트 처리에 대한 모든 선언적인 코드가 담겨 있습니다. 언제 이벤트 핸들러를 넣고, 언제 document 가 로드되고, 상태가 변경되면 언제 render 하는지 등에 대한 명령적인 내용은 모두 react 가 짊어집니다.

선언적인 api는 개발자에게 컴퓨터보다 높은 차원에서 해결해야 하는 문제를 똑바로 바라볼 수 있게 도와줍니다. 그리고 그 문제를 어떻게 해결할지 머리속에 그림이 그려졌다면, 그걸 원하는 에디터에 그려내면 그만이죠. GC, 스레드, 렌더, 페인트, 이벤트 등 복잡한 것들에 대해 생각하지 않아도 되죠.

유틸성 및 확장성

React 는 프레임워크가 아닌 라이브러리입니다. React 는 프론트엔드 분야에 종속되지 않고, ui가 필요한 어드 곳이든 재사용할 수 있습니다. 가장 좋은 예로 React Native 가 있겠습니다. 이들의 철학은 모든 ui에서 재사용할 수 있습니다.

파일 구조와 cli에 종속되는 프레임워크였다면 이런 높은 자유도와 유틸성이 불가능했겠죠?

앞의 유틸성에 연결되는 내용입니다. 웹 프론트엔드 분야에 한정하더라도 React 는 작고 깔끔합니다. redux, react-query 등 다양한 써드파티 메이저 라이브러리와 결합할 수 있고, Create-React-App, Next.js 등 다양한 프레임워크에 활용될 수 있습니다. 이와 같은 특징은 하나의 철학에 국한되지 않고 끊임없는 변화와 발전을 추구하는 개발 분야에서 오래 살아남을 수 있게 도와줍니다.

컴포넌트와 합성을 통한 높은 재사용성

많은 ui가 실제로 컴포넌트 기반으로 디자인되고 있기 때문에 페이지를 컴포넌트로 쪼갤 수 있다는 건 매우 좋은 이점입니다. React 는 이에 더해 컴포넌트를 하나의 역할을 가지는 함수로 생각하기 때문에 단일 책임 원칙을 적용하기에도 매우 편리합니다.

Meta

React 의 특징은 아니지만, React 는 meta (구 facebook) 이라는 어마어마한 기업이 지원하는 프로젝트입니다. Facebook 과 instagram 등 meta 의 다양한 서비스에 실제로 react 가 이용되고 있습니다. 이런 특징을 바탕으로 리액트는 굉장히 안정적입니다. 또한 언젠가 오픈 소스 지원이 중단될 걱정도 훨씬 낮아지죠. 최근 faker.js 와 colors.js 의 소유자가 벌인 오픈소스 테러로 인해 많은 서비스가 손해를 봤던 이슈가 있었는데, React 는 출시 이전 Meta 안에서 수십만 개의 컴포넌트를 대상으로 베타 테스트를 거치고 나오기 때문에 훨씬 안정적입니다.