소스 코드 파일은 여기에서 내려 받으실 수 있습니다.
https://github.com/AcornPublishing/react-18-patterns

리액트는 컴포넌트라 불리는 조각들을 사용해 사용자 인터페이스를 자유롭게 만들 수 있는 라이브러리이다. 이 책을 읽고 나면 리액트 최신 버전인 리액트 18을 사용해 보다 나은 사용자 인터페이스를 만드는 다양한 사고 방식과 기법을 익힐 수 있을 것이다.

◆ 리액트 18 및 노드 19의 기능과 친숙해진다.
◆ 타입스크립트의 기본/고급 기능들에 관해 살펴본다.
◆ 다양한 패턴과 기법들을 적용해 컴포넌트 사이에 통신을 수행한다.
◆ 단일 저장소 아키텍처에 관해 살펴본다.
◆ 서버 사이드 렌더링을 사용해 애플리케이션을 빠르게 로드한다.
◆ 종합적인 테스트 셋을 작성해 강건하고 유지 보수할 수 있는 코드를 생성한다.
◆ 리액트 컴포넌트를 스타일링하고 최적화함으로써 고성능의 애플리케이션을 빌드한다.

리액트를 더욱 잘 이해하고 이를 실세계의 애플리케이션 개발에 적용하고자 하는 웹 개발자를 위해 썼다. 리액트 및 자바스크립트에 대한 중간 수준의 경험을 가졌다고 가정한다.

1장, ‘리액트 처음 사용하기’에서는 리액트를 이해하기 위한 여정을 시작한다. 여기에서는 선언적 코드(declarative code)를 작성하고 컴포넌트와 리액트의 엘리먼트(element)를 구분해본다. 로직과 리액트의 템플릿을 조합한 이유에 관해 논의한다. 다소 논란의 여지가 있을 수 있지만 궁극적으로는 이익이 되는 결정이다. 매우 빠르게 진화하는 자바스크립트의 세계에서 압도되는 느낌을 받을 수 있는 가능성을 알고 있으므로 작고 관리 가능한 단계를 택함으로써 피로를 피한다. 새로운 create-vite 도구를 소개하고 리액트를 사용해 직접 코딩할 수 있는 경험을 준비하면서 1장을 마무리한다.
2장, ‘타입스크립트 소개’에서는 타입스크립트의 기본을 배운다. 간단한 타입과 인터페이스 생성하기, 열거형과 이름 공간 및 템플릿 리터럴 사용하기를 포함한다. 그리고 첫 번째 타입스크립트 구성 파일(tsconfig.json)을 설정하고 이를 두 부분(공통 부분과 특정 부분 - 단일 저장소(MonoRepo)를 사용해 작업할 때 특히 편리하다)으로 나누는 방법에 관해 살펴본다.
3장, ‘코드 정리하기’에서는 JSX 파일을 작성하는 방법과 그 기능을 알아본다. 아울러 Prettier와 ESLint를 사용해서 코드를 깔끔하게 유지하고 실수를 방지하는 방법에 관해 알아본다. 또한 함수형 프로그래밍에 관해 학습한다. 함수형 프로그래밍을 사용하면 코드를 쉽게 관리하고 테스트할 수 있다.
4장, ‘인기 있는 합성 패턴 살펴보기’에서는 props를 사용해 재사용할 수 있는 컴포넌트들이 함께 더 잘 동작하도록 만드는 방법을 익힌다. props를 사용하면 컴포넌트들을 분리하고 잘 정의된 상태로 유지할 수 있다. 컴포넌트를 조직화하는 두 가지 일반적인 방법인 컨테이너 패턴(container pattern)과 프레젠테이셔널 패턴(presentational pattern)에 관해 살펴본다. 이러한 방법을 사용해 컴포넌트 분리의 규칙과 형태를 유지한다. 또한 고차 컴포넌트(HOC, Higer Order Component)를 사용해서 컴포넌트 사이의 의존성을 너무 높이지 않으면서 컨텍스트를 다루는 방법, Function as Children 패턴을 사용해 실시간으로 컴포넌트를 생성하는 방법을 배운다.
5장, ‘브라우저를 위한 코드 작성하기’에서는 웹 브라우저에서 리액트를 사용해 폼을 생성하고, 이벤트를 처리하고, SVG를 움직이는 방법을 관찰한다. DOM 노드에 쉽게 접근할 수 있는 useRef 훅에 관해 학습한다. 리액트는 간단하고 직관적인 접근 방식을 제공해 복잡한 웹 앱을 좀 더 쉽게 관리하게 해준다. 또한 리액트에서는 필요한 경우 DOM 노드에 직접 접근할 수 있으므로 리액트를 다른 라이브러리와 간단하게 사용할 수 있다.
6장, ‘컴포넌트를 아름답게 보이게 만들기’에서는 리액트에서의 스타일링에 관해 살펴본다. 메타(Meta)에서의 경험을 예로, 큰 프로젝트에서 CSS를 작성하는 작업의 문제점에 관해 살펴본다. 이후 리액트 컴포넌트에 스타일을 직접 작성하는 방법을 알아본다. 이를 활용하면 코드를 깨끗하고 읽기 쉽게 유지할 수 있다. 동시에 이 방법의 제한점에 관해 살펴보고 그와 동시에 CSS 모듈이라 부르는 다른 스타일링 방법에 관해 살펴본다. 이 방법을 사용하면 CSS를 별도의 파일에 작성하면서도 개별 컴포넌트에 대한 스타일 적용 범위를 유지할 수 있다. 마지막으로 리액트 스타일링에 관한 인기 있는 라이브러리인 styled-components에 관해 살펴본다. 6장을 마치면 리액트 앱을 멋지게 보이도록 만들 수 있는 많은 도구를 갖게 될 것이다.
7장, ‘피해야 할 안티 패턴’에서는 웹 앱의 속도를 낮추고 엉망으로 만들 수 있는 네 가지 컴포넌트 사용 방법에 관해 논의한다. 각 방법마다 예시를 통해 무엇이 잘못될 수 있으며 어떻게 수정할 수 있는지 살펴본다. 상태를 설정하기 위해 속성을 사용하는 것이 해당 상태와 해당 속성 사이에 문제를 일으키는 이유를 학습한다. 또한 잘못된 key 속성을 사용함으로써 리액트가 컴포넌트를 업데이트하는 방법을 망칠 수 있음에 관해 살펴본다. 마지막으로 DOM 엘리먼트에 비표준 속성을 퍼뜨리는 것이 나쁜 아이디어인 이유를 살펴본다. 이 문제를 이해함으로써 리액트를 좀 더 효과적으로 활용하면서도 공통적인 실수들을 피할 수 있다.
8장, ‘리액트 훅’에서는 새로운 리액트 훅에 관해 학습하며 즐거운 시간을 보낼 것이다. 리액트 훅이 동작하는 방법, 데이터를 가져오는 방법, 클래스 컴포넌트를 훅으로 변환하는 방법에 관해 학습한다. 또한 effects, memo, useMemo, useCallback의 차이점에 관해서도 익힌다. 마지막으로 useReducer 훅이 작동하는 방법과 리액트-redux와의 차이점에 관해서도 알아본다. 이 모든 것으로 인해 우리가 만드는 리액트 컴포넌트는 더 빠르고 나아질 것이다.
9장, ‘리액트 라우터’에서는 리액트 라우터에 관해 학습한다. 리액트 라우터를 리액트와 함께 사용해 싱글 페이지 애플리케이션 안에서 페이지 간 이동을 관리할 수 있다. 리액트 자체적으로는 이를 수행하지 않기 때문에 리액트 라우터를 사용한다. 리액트 라우터를 사용해 앱이 어떻게 다른 URL에 대해 응답하고 탐색을 관리하는지 살펴본다. 9장을 마치고 나면 리액트 라우터가 작동하는 방법과 프로젝트에서의 사용 방법에 관해 알게 될 것이다. 또한 react-router, react-router-dom, react-router-native 패키지들의 차이점과 리액트 라우터 설정 방법, 컴포넌트 추가 방법, 라우트에 매개변수를 추가하는 방법에 관한 차이점도 배울 것이다.
10장, ‘리액트 18의 새로운 기능들’에서는 새롭게 개선된 리액트 18에 관해 살펴본다. 리액트 18은 멋진 대화형 앱을 더욱 쉽게 구축할 수 있도록 다양한 기능을 제공한다. 자동 상태 업데이트 그룹화, 동시 렌더링, 데이터 취득을 위한 대기, 더 나은 오류 처리 및 새로운 컴포넌트 유형을 사용해 매력적이고 빠른 앱을 만들 수 있다. 리액트를 사용한다면 리액트 18로 업그레이드를 고려하는 것이 좋다. 또한 웹 프로젝트를 더욱 개선할 수 있는 노드 18과 19의 주요한 새로운 기능에 관해서도 살펴본다.
11장, ‘데이터 관리하기’에서는 리액트 Context API에 관해 배우고 리액트 Suspense와 SWR을 함께 사용하는 방법을 살펴본다. Context API의 기본 개념을 학습하며, 여기에는 컨텍스트 생성 및 사용 방법과 useContext 훅을 사용해 이를 더욱 간편하게 만드는 방법이 포함된다. 또한 리액트 Suspense에 관해 살펴보고, 더 부드러운 사용자 경험을 위해 로딩 상태를 잘 처리하는 데 어떻게 도움이 되는지 확인한다. 더불어 리액트 Suspense와 함께 사용해서 데이터를 더 쉽게 가져오고 캐시하는 데 도움이 되는 SWR에 관해서도 학습한다. 마지막으로 새로운 리덕스 툴킷(Redux Toolkit)의 사용 방법을 익힌다. 이들을 활용하면 더욱 빠르고 사용자 친화적인 리액트 앱을 구축할 수 있다.
12장, ‘서버 사이드 렌더링’에서는 리액트를 사용한 서버 사이드 렌더링(SSR, Server-Side Rendering)에 관해 살펴보면서 여정을 마무리한다. 이제 여러분은 SSR을 사용해 앱을 만드는 방법과 이것이 검색 엔진 최적화(SEO, Search Engine Optimization), 소셜 공유 및 성능 향상과 같은 목적을 위해 유용한 이유에 관해 알게 될 것이다. 서버에서 데이터를 로드하고 HTML 템플릿에서 넣음으로써 클라이언트 사이드 앱이 브라우저에서 시작되는 시점에 이미 준비되도록 하는 방법을 배운다. 마지막으로 Next.js와 같은 도구를 사용해 어떻게 SSR 설정을 더 쉽게 하고, 추가 코드 양을 줄이며, 어려운 부분을 감출 수 있는지 알게 될 것이다.
13장, ‘실제 프로젝트를 통해 GraphQL 이해하기’에서는 GraphQL에 관해 학습한다. GraphQL은 일반적인 REST API와 달리 정확히 필요한 내용만 요청할 수 있는 멋진 도구로, API 및 데이터를 효율적으로 다룰 수 있게 도와준다. GraphQL을 사용해서 실제 프로젝트를 위한 간단한 로그인 및 사용자 등록 시스템을 만들 것이다. PostgreSQL 설치, .env 파일을 사용한 환경변수 설정, Apollo 서버 설정, GraphQL 쿼리와 뮤테이션 생성, 리졸버resolver 조작, Sequelize 모델 생성, JWT 사용, GraphQL Playground 사용 및 인증 방법에 관해 학습한다. 13장을 마치면 자신의 프로젝트에서 GraphQL을 사용하는 방법을 알게 될 것이다.
14장, ‘단일 저장소 아키텍처’에서는 단일 저장소(MonoRepo), Mono-Repository에 관해 설명한다. 일반적으로 앱을 구축할 때 하나의 앱, 하나의 깃 저장소 및 하나의 빌드 결과물을 갖는다. 하지만 많은 조직은 단일 저장소를 사용해서 모든 앱, 컴포넌트 및 라이브러리를 쉽게 개발한다. 이것이 바로 단일 저장소이며 작은 여러 바구니가 아니라 큰 하나의 바구니에 모든 코드를 모아두는 것처럼 생각할 수 있다. 이를 활용하면 모든 것을 더 쉽게 업데이트할 수 있으며 시간을 절약할 수 있다. 단일 저장소를 사용해 새 버전을 매번 출시하지 않고도 코드 리팩터링을 더 쉽게 만들고, 팀워크를 개선하며, 패키지 종속성을 업데이트하는 데 도움이 되는 방법에 관해서 논의할 것이다.
15장, ‘애플리케이션 성능 개선하기’에서는 여러분의 앱을 좀 더 부드럽고 빠르게 동작시켜 더 나은 사용자 경험을 만드는 기법을 탐색한다. 리액트가 앱 화면을 업데이트하는 방법과 키를 사용해서 효율성을 개선하는 데 도움을 얻는 방법에 관해 자세히 살펴본다. 앱 성능을 향상시키기 위해 잘 구조화된 작업 중심 컴포넌트의 중요성을 발견하게 될 것이다. 또한 불변성(immutability)의 개념과 불변성이 React.memo 및 shallowCompare가 효과적으로 작동하는 데 얼마나 중요한지 알아볼 것이다. 마지막으로 애플리케이션을 더욱 빠르게 만드는 다양한 도구와 라이브러리를 소개한다. 15장에서는 앱의 속도와 성능을 향상시키기 위한 가치 있는 지식을 제공하는 것을 목적으로 한다.
16장, ‘테스팅과 디버깅’에서는 테스팅에 관해 배운다. 테스트가 중요한 이유, 리액트 컴포넌트가 제대로 작동하는지 확인하는 데 사용하는 다양한 도구와 기술을 탐험한다. 리액트 테스팅 라이브러리(React Testing Library)와 Jest 같은 라이브러리를 사용해 테스트를 작성하고 실행하는 방법에 관해 학습하고, 고차 컴포넌트나 다양한 필드가 있는 템플릿과 같은 애플리케이션의 복잡한 부분의 테스트 방법에 관해서도 살펴본다. 또 리액트 DevTools, 리덕스 DevTools 같은 도구를 사용해 더 나은 앱을 개발하는 데 도움을 받는 방법도 익힐 것이다. 16장을 마치면 효과적인 테스트를 통해 앱을 원활하게 유지하는 방법을 견고하게 이해하게 될 것이다.
17장, ‘프로덕션으로 배포하기’에서는 여러분이 구축한 리액트 앱을 세상에 공개한다! 이를 위해 DigitalOcean이라는 클라우드 서비스를 사용할 것이다. Node.js와 nginx를 사용해 서버에서 앱을 실행하는 방법을 학습하고, 이를 위해 DigitalOcean의 Ubuntu 서버를 활용할 것이다. DigitalOcean Droplet의 설정 및 구성, 도메인에 대한 연결 방법을 안내할 것이다. 또한 변경 사항의 양에 관계없이 항상 사용자에게 준비된 상태로 앱을 유지할 수 있도록 도와주는 도구인 CircleCI에 관해 소개한다. 17장을 마치면 여러분의 앱이 인터넷을 통해 공개되고 모든 사람이 그 앱을 볼 수 있을 것이다.

리액트는 혁신적인 오픈소스 자바스크립트 라이브러리로 컴포넌트라고 부르는 작고 고립된 덩어리를 사용해 복잡한 사용자 인터페이스를 구성하도록 함으로써 웹 애플리케이션에 생명을 불어넣었다. 이 책은 로드맵의 역할을 할 것이다. 리액트가 제공하는 멋진 세계로 여러분을 안내하는 동시에 품질에 타협하지 않는 효율적인 워크플로우를 도입합으로써 생산성을 개선하도록 할 것이다.
이 과정에서 가장 먼저 리액트의 핵심적인 측면을 깊이 살펴보고 리액트의 내부 메커니즘과 아키텍처에 관해 충분히 이해할 것이다. 이를 기반으로 깨끗하고 유지보수할 수 있는 코드를 작성하고, 복잡한 개념들을 어렵지 않게 관리할 수 있는 덩어리로 분해하는 방법을 알려줄 것이다.
이어서 애플리케이션 전체에 걸쳐 일회성이 아니라 재사용 가능한 컴포넌트를 구성하는 기술을 살펴본다. 애플리케이션을 구조화해 조금 더 체계적이고 관리 가능하게 만드는 방법을 알아본다. 효과적인 전략과 기술을 갖춰 나감에 따라 기능적인 형태를 만드는 겉으로 보기에 다소 어려워 보이는 작업이 쉬워질 것이다.
한걸음 더 나아가 리액트 컴포넌트 스타일링에 관해 다룬다. 애플리케이션의 신속함과 반응성을 유지하면서 미적 매력을 살려내는 방법을 배울 것이다. 또한 애플리케이션의 성능을 향상시키고 구성 요소들을 세세하게 조정해 속도와 효율성을 높이는 비결도 알게 될 것이다.
여행의 마지막 단계에서는 효과적인 테스팅 방법론을 다루면서 이를 활용해 애플리케이션의 품질과 신뢰성을 개선한다. 또한 지속적으로 진화를 주도하는 개발자 대열에 합류해 리액트 및 그 생태계의 번영에 기여하는 방법에 관한 통찰력도 얻을 수 있게 될 것이다.
이 책을 모두 읽고 나면 시행착오 중심의 프로세스, 개발 허들, 추측에 의존하던 업무들은 모두 과거의 유산이 될 것이다. 여러분은 실제 리액트 웹 애플리케이션을 자신 있게, 능숙하게 구성하고 배포하는 데 필요한 기술로 무장한 리액트의 힘을 활용하게 될 것이다.

카를로스 산타나 롤단(Carlos Santana Roldán)

16년 이상의 경력을 가진 소프트웨어 엔지니어이다. 『리액트 디자인 패턴과 모범 사례』(에이콘, 2017)의 2, 3, 4판을 썼다. 라틴아메리카에서 가장 잘 알려진 개발자 커뮤니티 중 하나인 시리즈 프론트엔드(Series Frontend)를 창설했으며, 이 커뮤니티에서 개인을 대상으로 다양한 웹 기술을 교육하고 있다(유튜브: https://www.youtube.com/@SeriesFrontend).

리액트(React)는 컴포넌트(Component)라 부르는 작은, 격리된 덩어리를 사용해 복잡한 사용자 인터페이스를 구성하게 하는 혁신적인 오픈소스 자바스크립트 라이브러리입니다. 2013년 페이스북(현 메타)에 의해 발표된 리액트는 단순히 사용자 인터페이스를 개선하는 것에 그치지 않고 깨끗하고 유지보수할 수 있는 코드를 작성하도록 함으로써 개발 생산성도 높여주는 도구로 인지도가 급격하게 상승했으며, 이제는 자바스크립트 프로젝트 개발에 없어서는 안 될 필수 라이브러리가 됐습니다.
이 책은 사용자 인터페이스를 개선하는 리액트의 기능과 특성은 물론 리액트의 본질을 이해하는 데서 시작해, 재사용 가능한 컴포넌트를 구성하고 애플리케이션을 구조화하는 방법에 관해 설명합니다. 이를 바탕으로 애플리케이션의 미적 매력을 살리면서도 전체적인 성능을 향상시키는 방법에 관한 지식을 얻을 수 있습니다. 리액트 훅, 리액트 라우터, 최신 버전인 리액트 v18의 새로운 기능에 또한 리액트를 사용한 개발에서 필요한 테스팅과 디버깅 방법을 익힘으로써 리액트 코드의 품질을 한층 높일 수 있는 통찰력도 얻을 수 있을 것입니다. 마지막으로 여러분이 작성한 코드를 배포하는 과정을 통해 리액트라는 강력한 무기를 자유롭게 사용할 수 있게 될 것입니다.

김모세

소프트웨어 엔지니어, 소프트웨어 품질 엔지니어, 애자일 코치 등 소프트웨어 개발의 다양한 분야에 참여했다. 재미있는 일, 나와 조직이 성장하도록 돕는 일에 보람을 느껴 2019년부터 번역을 하고 있다.