한빛미디어

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

"사용하는 도구에 대한 책은 무조건 읽는다"라는 개인적인 고집 덕분에 이 책 리뷰도 신청하게 되었습니다. 근 5년 현업에서 리액트를 사용하고 있는데요. 사실 리액트는 만들어졌다는 소식을 접했을 때부터 책을 구해 읽었기 때문에 지금까지 읽은 리액트 책(제목에 '리액트'라는 말이 들어간 책만)이 16권쯤 됩니다.

그래서, 리액트 책들이 대충 어떤 식으로 리액트를 설명해 나가는지 알고 있습니다. 그래서 그런 내용일 거라는 막연한 기대 속에 책을 읽기 시작했습니다. 하지만 첫 장부터 다른 분위기가 느껴지기 시작하더군요.  '아하 이래서 "전문가를 위한"이라는 말을 붙여뒀구나'라는 생각을 하게 되었습니다. 

일단, MVC(모델, 뷰, 컨트롤) 패턴부터 리액트 아키텍처까지 연결해 주는 설명이 인상 깊었습니다. 사실 저는 프런트엔드 쪽을 하기 전에 임베디드 쪽 일을 꽤 했고 C++도 꽤 오래 사용했기 때문에 MFC(마이크로소프트 파운데이션 클래스)에서 그렇게 주야장천 강조하는 MVC가 상당히 익숙합니다. 하지만 프런트엔드 개발자로 일하는 주변 동료들은 용어를 들어본 정도가 대부분이더군요. 

하지만 MVC에 대한 이해가 있어야 왜 리액트가 필요했는지에 대해 좀 더 넓게 이해할 수 있다고 봅니다. ( 아마 이런 생각을 한다면 좀 고리타분한 개발자가 아닐까 싶기도 하지만) 단순히 프런트엔드 개발을 그림 그리기로 여기는 게 아니라 서비스를 구축하는 주요 아키텍트 중에 일부로 인식하는 건 꼭 필요하다고 생각하거든요. 

MVC와 MVVM에 대한 설명들은 결국 리액트 이전에 많이 사용하던 라이브러리들에 대한 설명으로 이어집니다. 왜 리액트가 각광받게 되었는지에 대해서 결과만 기억하는 것보다 과정을 전반적으로 보는 건, 앞으로 리액트가 어떻게 발전해 가게 될 것이며 혹시라도 다른 라이브러리가 리액트 보다 더 많이 사용되게 되는 경우가 발생한다면 미리 예측할 수 있는 관점을 키워줄 수 있을 겁니다. 

그리고, JSX, 가상 DOM에 대한 설명은 '재조정'과 파이버 '더블 버퍼링'으로 이어집니다. 리액트는 HTML로 브라우저 화면에 그림을 그리는 DOM이라는 객체를 가상으로 만들어서 업데이트하는 콘셉트로 만들어졌는데요. 이 과정을 좀 더 제어 가능하게 만들어준 것이 파이버입니다. 그리고 그 메커니즘이 '더블 버퍼링'이죠. 저자는 '더블 버퍼링'이 게임 쪽에서 사용해왔다고 설명하고 있는데, 사실 저도 20년 전쯤 회사에서 프로젝트를 할 때 사용했던 기억이 있습니다. 화면을 그릴 데이터가 준비되는 시간이 필요한데, 그 시간 동안 데이터를 적재하고 있는 메모리를 그대로 화면에 노출할 수 없거든요. 그래서 화면에 뿌릴 데이터를 가지고 있을 메모리 공간을 두 개 만들고 번갈아가며 데이터를 받아서 화면에 뿌릴 때는 한번 하게 했었습니다. 지금은 어떤 책에서 본 내용인지도 기억이 나지 않지만 그 당시에도 '더블 버퍼링'이라는 용어는 사용했었지요. 

그다음 저자는 서버 컴포넌트에 대한 설명으로 이어갑니다. 리액트가 서버 컴포넌트를 만들기 위해 어떤 기술을 지원하고 있고, 이게 node.js와 어떻게 연결되는지, 이를 remix와 next.js가 어떤 방향으로 구현했는지 설명하고 있습니다. 사실 remix를 설명의 대상으로 놓고 설명한 책은 제가 읽은 책으로는 이 책이 처음이라서 흥미로웠는데요. remix를 만들고 있는 사람들이 react-router라는 라이브러리도 함께 진행하고 있기 때문입니다. 그래서 react-router 7버전부터는 remix의 라우팅 개념과 거의 흡사하게 흘러가고 있습니다. 

그리고 이 말은 아직은 서버 컴포넌트를 사용할 준비가 되어 있지 않아서 쓰고 있지 못하지만 react-router만 7버전으로 업그레이드해서 그 개념을 가져다 쓴다면, 추후 remix로 갈아타는 것도 쉬울 거라는 말이 되거든요.  그래서 저는 다음 주부터 작업을 진행할 프로젝트에 react-router 7의 철학을 담아볼 생각입니다. 

이 책을 읽으면서 next.js의 서버 컴포넌트에 대해서도 동료들에게 많이 이야기를 했는데요.  아무래도 next.js로 갈아타는 건, 대부분의 코드를 다시 작업해야 할지도 모르기 때문에 고민을 많이 해야겠다고 했습니다. 

저자는 마지막으로 리액트 생태계의 미래를 볼 수 있는 혜안을 어떻게 키울 수 있을지 힌트를 제시하면서 책을 마무리합니다. 상당히 동의되는 부분이었습니다. 

십수 년 전 어느 날 저는 임베디드 용으로 만들어진 브라우저를 사용하고 있었습니다.  DOM 스펙 버전도 다소 과거 버전이었고, CSS도 3버전이 아니었기 때문에 화려한 뭔가를 만드는 건 불가능했고요. jquery를 올리는 것도 시스템이 버벅대는 바람에 순수 자바스크립트로 DOM을 조작할 수밖에 없었습니다. 그 과정에서 자바스크립트 코드에서 DOM에 어떤 요청을 하는 것이 자바스크립트 내에서 무언가를 하는 것보다 훨씬 느린 과정이라는 걸 체감했고, 자바스크립트 코드 안에서 DOM을 업데이트할 정보를 정리해서 한번에 요청하는 라이브러리가 있으면 참 좋겠다는 생각을 하게 되었습니다.  그리고 몇 년 후 리액트가 세상에 나왔다는 말을 들었습니다. 리액트는 제가 꼭 있으면 좋겠다고 생각했던 라이브러리였습니다. 비록 현업에서 바로 사용할 수 있는 상황은 아니었지만, 구할 수 있을 때마다 리액트 책을 구해서 읽었고, 현재 직장으로 이직한 원인도 리액트를 사용해 보기 위함이었습니다. 

리액트는 정말 괜찮은 아이디어를 구현한 라이브러리라는 생각은 지금도 변함없습니다. 리액트의 발전 방향도 지금까지 제가 기대해왔던 방향과 일치하고 있어서 너무 좋습니다. 저와 비슷한 경험이나 생각을 가지고 계신 분들이라면 이 책이 정말 재미있게 읽히지 않을까 싶습니다. 다른 책에서 리액트를 설명하는 걸 중점으로 두었다면 이 책은 리액트가 소프트웨어 개발 관점에서 어떤 지점에 있고 그 핵심 기술이 어떤 방향으로 흘러갈지 예측할 수 있게 해주기 때문입니다.