<React 18 Design Patterns and Best Practices> 후기

계기

회사 프로젝트에서 본격적으로 리액트를 사용하게 된지는 어느덧 3년이 다 되어간다. Class Component와 componentDidUpdate같은 생명주기를 쓰던 옛 리액트의 모습은 리액트 16의 등장과 함께 사라졌고, 나는 새롭게 바뀐 패러다임에 따라 리액트 코드를 작성하고 있었다. 리액트를 사용하는 프로젝트가 점점 더 복잡한 스펙과 고도화된 구조를 요구하면서, 내 리액트 스킬을 더 발전시켜야겠다는 필요를 느꼈고 그렇게 이 책을 읽어보기 시작했다. 책의 부제목이 Design Patterns and Best Practices였기에 이 책을 충분히 읽고 습득하면 리액트를 좀 더 잘 쓸 수 있지 않을까하는 기대감에서였다.

소개

React 18 Design Patterns and Best Practices는 React Cookbook의 저자인 Carlos Santana Roldan이 쓴 책으로, 2023년 7월에 4판으로 출판사 Packt를 통해 출판되었다. 최신 리액트 18 기준에 맞추어 총 16개의 챕터로 구성되어 있으며, 첫 부분은 리액트와 타입 스크립트에 대한 간단한 소개와 JSX 동작 방식 그리고 함수형 프로그래밍을 소개한다. 두번째 파트에서는 다양한 코드 작성 패턴, 피해야할 안티 패턴, 리액트 훅과 라우터에 대한 소개로 프로덕션 레벨의 어플리케이션 코드를 작성하는 법을 알려주며, 그 이후 파트에서는 서버사이드렌더링과 모노레포 그리고 배포와 테스트까지 설명한다. 리액트 18이 나온지 얼마 안되었기에 요즘 나와있는 리액트 개발서적 중 리액트 18에 대한 내용은 찾기 어려운 경우가 많았는데, 이 책은 리액트 18 기능을 소개하는 챕터가 별도로 빠져나와있는 점이 좋았다.

장점 및 아쉬운 점

책의 장점을 꼽으라면 역시 리액트의 처음부터 프로덕션 어플리케이션 배포의 마지막까지 전체적인 과정을 한번 싹 훑을 수 있다는 점이었다. 처음에는 우리가 쓰는 JSX 문법이 어떻게 DOM에 반영되는지 작은 원리에 대한 설명부터 시작해서, 후반부로 넘어가면 모노레포 기반의 프로젝트를 GraphQL과 Apollo를 이용해 백엔드 시스템까지 구축하여 상용에 배포하게 된다. 단순히 리액트 문법의 표면적인 사용법만 알고 있는 느낌이 든다면, 이 책은 리액트 개발 프로젝트 전반에 대한 시야를 크게 넓혀줄 것이다. 거기다 앞서 언급했지만 리액트 18에 대한 언급을 소홀히 하지 않았다는 점도 다른 책과의 차별점이라는 생각이 든다. (물론 이후에는 리액트 18에 대한 책이 더 많이 나올테지만, 이 책을 처음 읽기 시작한 2023년 말 기준으로는 그런 책이 많지 않았다) 리액트 18부터는 내부에서 쓰는 Reconciliation 알고리즘도 바뀌었고 SSR과 Suspense의 장점을 결합하기 위해 문법적으로도 구조적으로도 바뀐 부분이 많기 때문에 최신 리액트 개발에 있어서 도움이 되었다. 또한 이 책의 모든 코드가 Github에 공개되어있다는 점도 좋았다. 많은 책들이 코드에 대한 설명에 집중한 나머지 일부 코드는 책에서 생략하는 경우가 많아 예제를 실제로 돌렸을때 돌아가지 않는 경우가 많았고 이는 실습의 의욕이 떨어뜨리곤 했었다. 그러나 이 책에 언급된 모든 코드가 Github 레포에 통으로 올라가있으니 뭔가 헷갈리거나 궁금한 점이 생기면 VS Code에 해당 레포를 클론받아 프로젝트 세팅을 하나하나 뜯어보고 직접 돌려볼 수 있어서 좋았다. 혹시나 라이브러리의 버전이 바뀔 경우 코드가 제대로 동작하지 않을걸 대비해서 코드에 명시된 버전 그대로 node_module을 설치하라는 저자의 친절한 코멘트는 덤이다. 이 책의 백미는 GraphQL과 Monorepo 관련 챕터로, 150페이지에 걸쳐 PostgreSQL, Apollo Server/Client, GraphQL, Sequelize, JSON Web Token를 이용해 백엔드 인증 시스템을 구축하고 그 백엔드 시스템과 통신하는 Monorepo 기반의 멀티사이트 프론트엔드 시스템을 만드는 과정이 설명되어있다. 처음엔 생소해서 헷갈리는 부분도 많았지만, 앞서 언급했던 Github 코드 덕분에 일주일도 넘게 코드를 뒤적이고 책의 내용을 따라가다보니 완벽하게는 아니더라도 어느정도의 구조는 파악할 수 있게 되었다는 점이 뿌듯했다.

하지만 이 책도 완벽한 것은 아니다. 얻어간 것이 많은 책이지만, 아쉬운 부분도 분명 존재했다. 첫번째 점은 서버사이드렌더링에 관한 설명을 할 때 리액트 18 기준 문법으로 작성되지 않았다는 점이다. 바로 직전 챕터가 리액트 18에 대한 내용이었기에 그 다음 이어지는 챕터에서도 리액트 18 문법을 쓰지 않을까 생각했지만, 나를 반겨준 것은 createRoot.render가 아니라 아니라 ReactDOM.render였다. 아마 시기상 SSR까지 전부 리액트 18로 커버하기에는 조금 불확실한 부분들이 있어서 그랬지 않았을까 추측은 한다(당장 RSC 처음 발표할 때만 해도 서버/클라이언트 컴포넌트 구분을 파일명으로 하겠다고 했다가 나중에 "use client"로 뒤집혔으니..) 그래도 문법이야 금방 배우면 되는 것이니 크게 걸림돌이 되는 부분은 아니였다고 생각한다. 두번째 점은 테스트에 대한 부분이었는데, 프로젝트 성격에 따라 분명히 다르겠지만 서비스를 개발하는 프론트엔드 프로젝트를 위해 e2e 테스트에 대한 설명이 더 있었으면 좋겠다고 생각했다. 이 책에서 설명한 Jest와 @testing-library/react는 분명 너무나 훌륭한 기술이지만, 테스트 단위가 컴포넌트나 함수이기 때문에 e2e 테스트 목적으로는 분명 아쉬운 부분이 있고, E-Commerce같은 서비스 프로젝트엔 e2e 테스트가 정말 훌륭한 방어선 역할을 하기 때문에 그 쪽에서 일하는 개발자들을 위해 Playwright나 Cypress 같은 것들이 소개되었으면 더 좋지 않았을까 싶다.

총평

470여 페이지에 달하는 책을 쓰는 동안, 계속해서 기술의 버전은 올라가고 때론 방향성도 바뀌고, 이 모든걸 고려해 독자가 보고 배울 수 있는 코드를 작성하고 설명하는 것은 결코 쉬운 과정이 아니였을 것이다. 저자의 열정은 그대로 책에 담겼고, 이 책을 읽으며 배우게 된 것들이 참 많았다. 최신 리액트 문법과 기능은 물론, 프로젝트의 시작과 끝을 볼 수 있는 넓은 시야를 가지고 싶다면 읽어보기를 추천한다. 이제 막 리액트 기본서를 뗀 주니어에게는 더 큰 발전을 위해, 자신의 방식에 매몰된 듯한 기분을 가진 시니어들에게는 리프레시를 위해.