React JS에 대하여 (feat. SPA)

지금 프론트엔드에서 상당히 많은 인기를 끌고있는 라이브러리죠. jQuery가 필수였던 시대가 지나고 Vue.js, Angular JS와 같은 경쟁자들 사이에서 나타난 React JS는 현재 가장 많이 사용되고 있는 웹 프레임워크 순위에 1위로 올라가 있습니다. 저 역시도 취업을 준비하는 과정에서 수요가 높았던 React JS를 공부하게 되었고, 현직에서 React JS를 사용해서 개발한지 약 1년 정도 되어갑니다. 현직자의 입장에서 React JS에 대한 리뷰를 한번 해보려 합니다.

Single Page Application (SPA) 이란?

SPA는 하나의 페이지로 구성되는 web application을 말합니다. 클라이언트 (브라우저) 에서 동적인 로직을 극대화하여 서버는 UI를 구성하기 위한 최소한의 정보만 반환하고 클라이언트에서 모든 렌더링이 이뤄집니다.

이러한 구조적인 특성에 따라 SPA 형태로 개발된 결과물은 내용이 없는 html과 그 위에 UI를 동적으로 그려내기 위한 JavaScript 코드로 이뤄집니다. 비유를 하자면 고기집에서 고기가 구워져서 나오는게 아닌 생고기가 나와서 손님의 테이블에서 직접 구워먹는 형태죠.

SPA는 말 그대로 하나의 페이지만 존재합니다. 여러 URL 경로로 Multi Page같이 개발은 가능하지만, 이는 Multi Page인듯한 착시일 뿐, 실제로는 하나의 소스를 전부 공유합니다. 그렇기에 매번 새로고침이 이뤄지지 않아 부드럽고 빠른 화면 전환이 특징입니다.

물론 이에 따른 단점 또한 존재합니다. Application이 점점 방대해지는 경우 코드 양이 점점 커져서 페이지 첫 진입 시의 로딩이 길어지게 됩니다. 또한 초기에 내용이 없는 html을 반환함에 따라 검색 엔진 최적화에도 불리하게 작용할 수 있습니다. 검색 엔진은 초기 html 테그를 바탕으로 검색에 노출되는 방식을 가지고 있기 때문입니다.

Node.js 위에서의 React JS

React JS 는 JavaScript 라이브러리라고 소개됩니다. 그러나 기존의 JavaScript 라이브러리처럼 <script> 태그 안에 넣는 식으로 사용되지 않습니다. (가능은 합니다만, 권장되지는 않습니다) 오히려 node.js 위에서 Bundler와 Babel을 기반의 툴체인으로 발전해왔습니다.

node.js 기반의 자동화된 개발 및 빌드 환경은 프론트엔드와 백엔드 프로젝트를 분리하는 추세에 크게 기여했다고 볼 수 있습니다. 이전에 Template Engine을 통해 서버 Application의 일부로 인식되던 프론트엔트 소스코드에서 이제는 자체적인 개발환경을 갖추게 되었기 때문입니다. 이에 따라 분리 배포 방식이 많이 활용되고 있습니다. (참고: 프론트엔드 개발자 입장에서 바라보는 웹 서버 (feat. Nginx))

React JS의 가상 DOM

Document Object Model (DOM) 은 html을 객체화하여 JavaScript에서 html에 접근할 수 있도록 합니다. React JS는 가상 DOM 방식을 사용합니다. 가상 DOM은 실제 DOM의 정보를 가지고 있으며, 누적 연산을 통해 성능을 향상시켜 줍니다. 사용자의 event에 의해 DOM에 변화가 일어나야 하는 경우 가상 DOM에서의 변화를 먼저 비교하여, 누적된 결과만 실제 DOM에 반영합니다.

이러한 가상 DOM 방식을 의식하고 개발하는 경우는 많이 없습니다. 그러나 잘 이해하지 못하고 개발했을 때 오히려 성능이 안좋아지는 상황이 발생할 수도 있습니다. Re-rendering을 지나치게 많이 트리거하는 방식으로 코딩하면 가상 DOM으로 인해 오히려 더 느려질 수도 있으며, 반대로 re-rendering을 정상적으로 트리거하지 못하여 의도한 동작을 제대로 구현하지 못하기도 합니다. 그렇기에 가상 DOM의 원리에 대해 이해할 필요가 있습니다.

React JS의 전망

백엔드와 비교했을 때 프론트엔드의 추세는 빠르게 변해왔습니다. 불과 10년 전까지만 해도 jQuery가 완전히 독점하고 있었던 것을 생각하면 지금 당장 React JS의 독주가 계속되리라는 보장은 없습니다. 그러나 저는 React JS의 점유율은 오래 갈 것이라고 생각합니다.

당시 jQuery는 크로스 플랫폼으로서 가지는 의미가 컸습니다. 브라우저마다 규격이 다 다른 상황에서 jQuery가 호환성을 다 관리해 주기에 개발자들은 각 브라우저마다 코딩을 할 필요가 없이 jQuery 코드 하나만으로 다 해결이 됬기 때문입니다. 그러나 추후에 ECMAScript 국제 표준이 점점 체계화되고 거의 모든 브라우저에 이 기준이 적용됨에 따라 jQuery의 존재 이유가 사라졌습니다.

반면 React JS는 동적인 웹을 극대화하기 위한 라이브러리입니다. jQuery처럼 존재 이유가 사라지는 상황은 지금으로써 상상하기 어렵죠. 또한 React JS는 추세에 따라 그 영역이 다양하게 확장되기도 합니다. 동일한 코드로 정적인 페이지를 생성하는 Gatsby, 서버사이드 렌더링을 지원하는 Next.js 등으로 SPA가 아닌 Multiple Page Application (MPA) 구조로 개발하는 것 또한 가능하며, React Native로 모바일 앱 개발 영역까지도 커버하고 있습니다. 또한 Meta (Facebook) 의 소유인 만큼 지속적으로 업데이트가 될 것이라고 기대할 수 있습니다.

그럼에도 대세가 바뀌게 된다면 그 주인공으로 Svelte가 가장 가능성이 있다고 보여집니다. Svelte는 React JS와 다르게 라이브러리가 아닌 컴파일러로, React JS와 반대로 가상 DOM을 사용하지 않음으로서 렌더링을 최적화한다고 알려집니다. 전 Svelte를 사용해보지 않았으나, 하드웨어의 발전과 더불어 그 정도의 성능이 얼마나 유의미한 차이를 가져올지는 의문일 뿐더러, React JS처럼 새로운 패러다임을 제시하기도 쉽지는 않아보입니다.