◈ 이 책에서 다루는 내용 ◈

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


◈ 이 책의 대상 독자 ◈

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


◈ 이 책의 구성 ◈

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

◈ 옮긴이의 말 ◈

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