React 18 디자인 패턴과 베스트 프랙티스 4/e

보다 나은 사용자 인터페이스 만들기

카를로스 산타나 롤단 지음 | 김모세 옮김

에이콘출판 2024년 11월 25일 출간 국내도서 : 2024년 10월 18일 출간

작품소개

책소개

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

목차

1장. React 처음 사용하기
__기술 요구 사항
__선언적 프로그래밍과 명령적 프로그래밍의 차이
__React 엘리먼트가 동작하는 방법
__모든 것 버리기
__자바스크립트 피로감 이해하기
____React에 관한 오해
____피로감 없이 React 시작하기
____자바스크립트 생태계가 주는 이점
____Create-React-App은 이제 그만, Vite 만나기!
__정리
2장. 타입스크립트 소개
__기술 요구 사항
__타입스크립트의 기능
__자바스크립트 코드를 타입스크립트로 변환하기
__타입
__인터페이스
__인터페이스와 타입 확장하기
__인터페이스와 타입 구현하기
__인터페이스 병합하기
__열거형
__이름 공간
__템플릿 리터럴
__타입스크립트 구성 파일
__정리
3장. 코드 정리하기
__기술 요구 사항
__JSX 사용하기
____바벨
____첫 번째 엘리먼트 만들기
____DOM 엘리먼트와 React 컴포넌트
____Props
____자녀
____HTML과의 차이점
____전개 속성
____템플릿 리터럴
____일반적인 (공통) 패턴
__코드 스타일링하기
____EditorConfig
____Prettier
____ESLint
__함수형 프로그래밍
____1급 함수
____순수성
____불변성
____커링
____합성
__정리
4장. 인기 있는 합성 패턴 살펴보기
__기술 요구 사항
__컴포넌트 간 통신하기
____children prop 사용하기
__컨테이너 패턴 및 프레젠테이셔널 패턴
__고차 컴포넌트 이해하기
__FunctionAsChild 이해하기
__정리
5장. 브라우저를 위한 코드 작성하기
__기술 요구 사항
__폼 이해 및 구현하기
____통제되지 않은 컴포넌트
____통제된 컴포넌트
__이벤트 다루기
__refs 살펴보기
____forwardRef 이해하기
__애니메이션 구현하기
__SVG 살펴보기
__정리
6장. 컴포넌트를 아름답게 보이게 만들기
__기술 요구 사항
__자바스크립트에서의 CSS
__인라인 스타일 이해하기와 구현하기
__CSS 모듈 사용하기
____Webpack 5
__프로젝트 설정하기
__로컬 범위 CSS
____아토믹 CSS 모듈
__styled-components 구현하기
__정리
7장. 피해야 할 안티 패턴
__기술 요구 사항
__속성을 이용해 상태 초기화하기
__인덱스를 key로 사용하기
__DOM 엘리먼트에 속성 전파하기
__정리
8장. React 훅
__기술 요구 사항
__React 훅 소개
____기존의 틀을 깨는 변화는 없다
____State 훅 사용하기
__훅 규칙
____규칙 1: 톱 레벨에서만 훅을 호출한다
____규칙 2: React 함수에서만 훅을 호출한다
__클래스 컴포넌트를 React 훅으로 마이그레이션하기
__React 이펙트 이해하기
____useEffect 이해하기
____조건부로 이펙트 실행하기
____useCallback, useMemo, memo 이해하기
__useReducer 훅 이해하기
__정리
9장. React 라우터
__기술 요구 사항
__React 라우터 설치 및 구성하기
__섹션 생성하기
__라우트에 매개변수 추가하기
__React 라우터 v6.4
____React 라우터 로더
__정리
10장. React 18의 새로운 기능들
__동시 모드
__자동 배치
__트랜지션
__서버에서의 Suspense
__신규 API
____createRoot
____hydrateRoot
____renderToPipeableStream
__신규 훅
____useId
____useTransition
____useDeferredValue
____useInsertionEffect
__엄격한 모드
__Node.js의 최신 기능들
____실험적인 Fetch API
____실험적인 test runner 모듈
____실험적인 node watch
____Node 18은 이제 장기 지원 버전이다(LTS)
__정리
11장. 데이터 관리하기
__기술 요구 사항
__React Context API 소개
____첫 번째 컴포넌트 생성하기
____프로바이더로 컴포넌트 감싸기
__useContext를 사용해 컨텍스트 소비하기
__SWR을 사용한 React 대기 도입하기
____SWR 도입하기
____Pokedex 만들기
__리덕스 툴킷: 리덕스에 대한 현대적인 접근 방식
____핵심 기능
____시작하기
____스토어 생성하기
____슬라이스 생성하기
____리듀서 조합하기
____컴포넌트를 스토어와 연결하기
____스토어를 React 애플리케이션과 통합하기
__정리
12장. 서버 사이드 렌더링
__기술 요구 사항
__유니버설 애플리케이션 이해하기
__SSR을 구현해야 하는 이유
____SEO 구현하기
____공통 코드 베이스
____더 나은 성능
____SSR의 복잡성 과소평가하지 말기
__기본적인 SSR 예제 만들기
____웹팩을 사용해 프로젝트 처음부터 구성하기
____애플리케이션 생성하기
__데이터 가져오기 구현하기
__Next.js를 사용해 React 애플리케이션 생성하기
__정리
13장. 실제 프로젝트를 통해 GraphQL 이해하기
__기술 요구 사항
__PostgreSQL, Apollo 서버, GraphQL, Sequelize,
__JSON 웹 토큰을 사용해 백엔드 로그인 시스템 구축하기
__Postgres 설치하기
____PostgreSQL 데이터베이스 관리를 위한 최고의 도구들
__백엔드 프로젝트 생성하기
____.env 파일 구성하기
____기본 config 파일 생성하기
__Apollo 서버 구성하기
__GraphQL 유형, 쿼리, 뮤테이션 정의하기
____스칼라 타입
____쿼리
____뮤테이션
____타입 정의 병합하기
__리졸버 생성하기
____getUsers 쿼리 생성하기
____getUser 쿼리 생성하기
____뮤테이션 생성하기
____리졸버 병합하기
__Sequelize ORM 사용하기
____Sequelize에서 사용자 모델 생성하기
____Sequelize를 PostgreSQL 데이터베이스에 연결하기
__인증 함수
____JWT 함수 생성하기
____인증 함수 생성하기
____타입과 인터페이스 정의하기
__처음으로 프로젝트 실행하기
____GraphQL 쿼리와 뮤테이션 테스팅하기
____모델 검증 테스트하기와 사용자 질의하기
____로그인 수행하기
__Apollo 클라이언트를 사용해 프런트엔드 로그인 시스템 구현하기
____웹팩 5 구성하기
____타입스크립트 구성하기
____Express 서버 구성하기
____프런트엔드 구성 생성하기
____사용자 미들웨어 생성하기
____JWT 함수 생성하기
____GraphQL 쿼리와 뮤테이션 생성하기
____로그인 및 연결된 사용자를 처리하기 위한 사용자 컨텍스트 생성하기
____Apollo 클라이언트 구성하기
____애플리케이션 라우트 생성하기
____페이지 생성하기
____로그인 컴포넌트 생성하기
____dashboard 컴포넌트 생성하기
____로그인 시스템 테스트하기
__정리
14장. 단일 저장소 아키텍처
__기술 요구 사항
__단일 저장소의 장점과 단일 저장소가 해결하는 문제들
__NPM Workspaces를 사용해 단일 저장소 생성하기
__단일 저장소에서 타입스크립트 구현하기
__웹팩을 사용해 패키지를 컴파일하기 위한 devtools 패키지 생성하기
____다양한 색상의 로그 생성하기
____웹팩 공통 구성
____웹팩 개발 구성
____웹팩 프로덕션 구성
__utils 패키지 생성하기
__API 패키지 생성하기
____사용자 공유 모델 생성하기
____사용자 공유 GraphQL 타입 및 리졸버
____커스텀 서비스 생성하기
____서비스 구성 빌드하기
____커스텀 모델 생성하기
____모델 시드 생성하기
____커스텀 GraphQL 타입과 리졸버 생성하기
____모델 동기화하기와 Apollo 서버 시작하기
____CRM 서비스 테스트하기
__프런트엔드 패키지 생성하기
____Sites 시스템 생성하기
____페이지 스위처 생성하기
____Login 시스템 생성하기
____Sites 구성 생성하기
____모든 것을 합치기
____데모 시간
__정리
15장. 애플리케이션 성능 개선하기
__기술 요구 사항
__조정이 동작하는 방법
__키 사용하기
__최적화 기법
__도구와 라이브러리
____불변성
____바벨 플러그인
__정리
16장. 테스팅과 디버깅
__기술 요구 사항
__테스팅의 이점 이해하기
__Jest를 사용한 고통 없는 자바스크립트 테스팅
____이벤트 테스트하기
__Vitest 도입하기
____Vitest 설치 및 구성하기
____globals 활성화하기
____인소스 테스팅
__React DevTools 사용하기
____리덕스 DevTools 사용하기
__정리
17장. 프로덕션으로 배포하기
__기술 요구 사항
__첫 번째 DigitalOcean Droplet 생성하기
____DigitalOcean에 가입하기
____첫 번째 Droplet 생성하기
____Node.js 설치하기
____깃, 깃허브 구성하기
____Droplet 종료하기
__nginx, PM2 및 도메인 구성하기
____nginx 설치 및 구성하기
____역프록시 서버 설정하기
____Droplet에 도메인 추가하기
__지속적인 통합을 위한 CircleCI 구현하기
____CircleCI에 SSH 키 추가하기
____CircleCI 구성하기
____CircleCI에서 환경변수 생성하기
__정리

출판사 서평

◈ 이 책에서 다루는 내용 ◈

◆ 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라는 강력한 무기를 자유롭게 사용할 수 있게 될 것입니다.

작가정보

저자(글) 카를로스 산타나 롤단

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

번역 김모세

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

작가의 말

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