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를 구성하기 위한 최소한의 정보만 반환하고 클라이언트에서 모든 렌더링이 이뤄집니다. 페이지 이동 시에는 새로고침이 이뤄지지 않고, 기존의 페이지에서 변화하는 부분만 동적으로 바꿔줍니다. 그렇기에 실제로 React JS로 여러 페이지처럼 보이게 개발해도 실제 빌드 결과물을 보면 root 디렉토리에 index.html이 유일한 html 소스인 것을 확인할 수 있습니다.
이러한 구조적인 특성에 따라 SPA 형태로 개발된 결과물은 내용이 없는 html과 그 위에 UI를 동적으로 그려내기 위한 JavaScript 코드로 이뤄집니다. 비유를 하자면 고기집에서 고기가 구워져서 나오는게 아닌 생고기가 나와서 손님의 테이블에서 직접 구워먹는 형태죠. 이러한 동적인 형태는 사용자로 하여금 부드럽고 빠른 화면 전환이 특징입니다.
물론 이에 따른 단점 또한 존재합니다. Application이 점점 방대해지는 경우 하나의 페이지에 엮이는 소스가 점점 커져서 페이지 첫 진입 시의 로딩이 길어지게 됩니다. 또한 초기에 내용이 없는 html을 반환함에 따라 검색 엔진 최적화에도 불리하게 작용할 수 있습니다. 검색 엔진은 초기 html 테그를 바탕으로 검색에 노출되는 방식을 가지고 있기 때문입니다.
Node.js 기반 빌드 툴
React JS 는 공식적으로 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리라고 소개되어 있습니다. 맞는 말입니다만, JavaScript 라이브러리로써 다루는 경우는 거의 없고 node.js 기반 빌드 툴을 이용해 개발합니다. webpack을 기반으로 하여 번들링이 이뤄지기에 node.js 라이브러리 또한 사용이 가능하다는 장점이 있습니다.
node.js 기반의 자동화된 개발 및 빌드 환경은 프론트엔드와 백엔드 프로젝트를 분리하는 추세에 크게 기여했다고 볼 수 있습니다. 이전에 Template Engine을 통해 서버 Application의 일부로 인식되던 프론트엔트 소스코드에서 이제는 자체적인 개발환경을 갖추게 되었기 때문입니다. 이에 따라 어떤 배포 방식을 사용할 것인지 또한 고려해야 합니다. (프론트엔드 개발자 입장에서 바라보는 웹 서버 (feat. Nginx))
가상 DOM
Document Object Model (DOM) 은 html을 객체화하여 JavaScript에서 html에 접근할 수 있도록 합니다. React JS는 가상 DOM 방식을 사용합니다. 가상 DOM은 실제 DOM의 정보를 가지고 있습니다. 실제 DOM에 변화가 일어나야 하는 경우 (화면이 전환되는 경우) 가상 DOM에서의 변화를 먼저 비교하게 되며, 변화가 감지된 부분에만 실제 DOM에 반영합니다. 이를 통해 브라우저 내에서 발생되는 불필요한 연산을 줄여 성능을 개선합니다. 일어나야할 변화를 한번를 처리하기에 일괄 작업이라고 표현하기도 합니다.
이러한 가상 DOM 방식을 의식하고 개발하는 경우는 많이 없습니다. 그러나 잘 이해하지 못하고 개발했을 때 오히려 성능이 안좋아지는 상황이 발생할 수도 있습니다. 예를 들어 re-rendering을 지나치게 많이 트리거하는 방식으로 코딩하면 가상 DOM으로 인해 오히려 더 느려지기도 하고요, 반대로 변화가 일어나야 함에도 불구하고 re-rendering을 트리거하지 않음으로써 변화가 일어나지 않는 상황이 생길 수도 있습니다. 이러한 문제를 방지하기 위해서 가상 DOM의 원리에 대해 이해할 필요가 있습니다.
가상 DOM은 렌더링을 최적화하는데 있어서 상당히 성공적이였던 것으로 보여집니다. 그러나 가상 DOM을 통한 변화 감지 또한 연산 과정이기에 다소 무겁다고 느껴실 수 있습니다. 가상 DON을 사용하지 않고도 최적화가 가능하다면 더욱 좋겠죠. 이후에 출시된 Svelte의 경우 가상 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와 다르게 라이브러리가 아닌 컴파일러로, 앞서 언급했듯히 가상 DOM을 사용하지 않음으로 더욱 성능을 최적화한다고 알려져있죠. 그러나 Svelte가 초기의 React JS처럼 새로운 패러다임을 제시할 수 있을 지는 아직 의문입니다.
댓글남기기