리액트 Quickly Second Edition

모튼 바클런드 , 아자트 마르단 지음 | 김동연 옮김

다이피아 2024년 01월 17일 출간

작품소개

책소개

이 책은 독자를 React 초보자에서 숙련된 React 실무자로 안내하는 것을 목표로 합니다. 이 책은 초보자와 숙련된 개발자 모두 이 인기 있는 라이브러리의 핵심 개념인 JSX(JavaScript XML), 컴포넌트, state, hooks, events, form elements. 등을 마스터할 수 있도록 설계된 React 기본에 대한 종합적인 가이드입니다.

전반적으로 이 책은 경험 수준에 관계없이 React 애플리케이션을 구축하려는 모든 사람에게 필수적인 리소스입니다. 이 책은 React의 핵심 개념에 대한 강력한 기초를 제공함으로써 개발자가 이해하고 확장하기 쉬운 깔끔하고 유지 관리 가능한 코드를 작성하는 데 도움을 줄 수 있습니다.

React Quickly Second Edition에서는 React를 사용하여 깔끔하고 효과적이며 업데이트하기 쉬운 웹 애플리케이션을 디자인하는 데 필요한 모든 기본 사항을 알려줍니다. 보시다시피, 도구와 라이브러리로 구성된 React 생태계는 엄청나게 방대합니다. 이 책을 다 읽고 프로젝트를 진행하다 보면 커리어를 발전시키기 위해 계속해서 기술을 쌓고 싶다는 생각이 들 수도 있습니다. 그렇다면 이 책에서 배운 기술과 방법론을 기반으로 하는 모튼 바클런드의 Job-Ready React (Manning, 2024)를 함께 살펴보시기 바랍니다. 이 책은 전문 React 개발자가 사용하는 고급 라이브러리, 기술 및 도구를 소개하여 취업 준비와 실무를 도와줄 것입니다.

목차

서문
이 책에 대하여
저자 소개
역자 서문

1장. React와의 만남
__1.1 React 사용의 장점
____1.1.1 단순함
____1.1.2 속도와 테스트 용이성(testability)
____1.1.3 에코시스템과 커뮤니티

__1.2 React의 단점

__1.3 웹사이트에 React를 적용하는 방법
____1.3.1 싱글 페이지 애플리케이션과 React
____1.3.2 React 스택

__1.4 첫 번째 React 앱: Hello World
____1.4.1 결과
____1.4.2 애플리케이션 작성하기
____1.4.3 웹 서버 설치 및 실행
____1.4.4 로컬 웹사이트로 이동하기

__1.5 퀴즈
__1.6퀴즈 정답
__1.7요약


2장. React 첫걸음

__2.1 새로운 React 앱 만들기
____2.1.1 React 프로젝트 명령어
____2.1.2 파일 구조
____2.1.3 템플릿
____2.1.4 장단점

__2.2 이 책의 예제에 대한 참고 사항

__2.3 엘리먼트 중첩
____2.3.1 노드 계층 구조
____2.3.2 간단한 중첩
____2.3.3 형제 요소(Siblings)

__2.4 사용자 정의 컴포넌트 만들기

__2.5 propertie로 작업하기
____2.5.1 단일 프로퍼티
____2.5.2 다중 속성
____2.5.3 특별한 속성: children

__2.6 애플리케이션 구조
__2.7 퀴즈
__2.8 퀴즈 정답
__2.9 요약


3장. JSX 소개

__3.1 JSX를 사용하는 이유
____3.1.1 JSX 이전과 이후
____3.1.2 HTML과 자바스크립트를 함께 유지하기

__3.2 JSX 이해
____3.2.1 JSX로 엘리먼트 생성하기
____3.2.2 사용자 정의 컴포넌트와 함께 JSX 사용
____3.2.3 여러 줄 JSX 객체
____3.2.4 JSX에서 변수 출력하기
____3.2.5 JSX에서 프로퍼티로 작업하기
____3.2.6 JSX에서 분기하기
____3.2.7 JSX의 주석
____3.2.8 JSX 객체 목록
____3.2.9 JSX의 프래그먼트

__3.3 JSX를 트랜스파일링하는 방법

__3.4 React와 JSX의 문제점
____3.4.1 스스로 닫히는(닫지 않아도 되는) 요소
____3.4.2 특수 문자
____3.4.3 문자열 변환
____3.4.4 스타일 속성
____3.4.5 예약된 이름: class와 for
____3.4.6 다중 단어 속성
____3.4.7 Boolean 속성 값
____3.4.8 공백(Whitespace)
____3.4.9 데이터 속성

__3.5 퀴즈
__3.6 퀴즈 정답
__3.7 요약


4장. 기능적 컴포넌트

__4.1 React 컴포넌트를 작성하는 빠른 방법
____4.1.1 예제 애플리케이션
____4.1.2 프로퍼티 구조 분해
____4.1.3 기본값
____4.1.4 패스스루(Pass-through) 속성

__4.2 컴포넌트 유형 비교
____4.2.1 함수형 컴포넌트의 장점
____4.2.2 함수형 컴포넌트의 단점
____4.2.3 컴포넌트 유형 간의 차이점
____4.2.4 컴포넌트 유형 선택하기

__4.3 함수형 컴포넌트를 사용하면 안 되는 경우
____4.3.1 오류 경계(Error boundary)
____4.3.2 클래스 기반 코드베이스
____4.3.3 라이브러리에 클래스 기반 컴포넌트가 필요한 경우
____4.3.4 업데이트 전 스냅샷하기

__4.4 클래스 기반 컴포넌트에서 함수형 컴포넌트로 변환하기
____4.4.1 버전 1: 렌더링 메서드만 사용
____4.4.2 버전 2: 유틸리티로서의 클래스 메서드
____4.4.3 버전 3: 실제 클래스 메서드
____4.4.4 버전 4: 생성자(Constructor)
____4.4.5 복잡성이 높을수록 변환이 어렵다

__4.5 퀴즈
__4.6 퀴즈 정답
__4.7 요약


5장. state와 상호작용하는 React 만들기

__5.1 React state가 중요한 이유는?
____5.1.1 React 컴포넌트의 state
____5.1.2 state를 어디에 넣어야 할까요?
____5.1.3 컴포넌트 상태에는 어떤 종류의 정보를 저장하는가?
____5.1.4 state에 저장하지 말아야 할 항목

__5.2 함수형 컴포넌트에 state 추가하기
____5.2.1 hook 가져오기 및 사용하기
____5.2.2 state 초기화하기
____5.2.3 상태 값과 세터 구조 분해하기
____5.2.4 상태 값state value 사용하기
____5.2.5 state 설정
____5.2.6 multiple states 사용
____5.2.7 State 영역

__5.3 상태 저장 클래스 기반 컴포넌트
____5.3.1 useState hook과의 유사점
____5.3.2 useState hook과의 차이점

__5.4 퀴즈
__5.5 퀴즈 정답
__5.6 요약


6장. Effect와 React 컴포넌트 수명 주기

__6.1 컴포넌트에서 effect 실행
____6.1.1 마운트된 상태에서 효과 실행하기
____6.1.2 마운트 시 effect 실행 및 언마운트 시 정리
____6.1.3 unmount 시 cleanup 실행하기
____6.1.4 렌더링 일부에 effect 실행
____6.1.5 일부 렌더링에서 effect 실행 및 cleanup
____6.1.6 Effect를 동기적으로(synchronously) 실행하기

__6.2 렌더링에 대한 이해
____6.2.1 마운트 상태에서 렌더링하기
____6.2.2 부모 렌더에서 렌더링하기
____6.2.3 상태 업데이트 시 렌더링하기
____6.2.4 함수 내부 렌더링하기

__6.3 클래스 기반 컴포넌트의 라이프사이클
____6.3.1 Life cycle 메서드
____6.3.2 레거시 생명주기 메서드
____6.3.3 라이프사이클 메서드를 훅으로 변환하기

__6.4 퀴즈
__6.5 퀴즈 정답
__6.6 요약


7장. 웹 애플리케이션에 활력을 불어넣는 훅

__7.1 상태 저장 컴포넌트(Stateful components)
____7.1.1 useState를 사용한 간단한 state 값
____7.1.2 useReducer로 복잡한 상태 만들기
____7.1.3 useRef로 다시 렌더링하지 않고 값 기억하기
____7.1.4 사용 컨텍스트를 통한 더 쉬운 멀티 컴포넌트 상태 관리
____7.1.5 useDeferredValue와 useTransition을 사용한 우선순위가 낮은 상태 업데이트

__7.2 컴포넌트 효과
__7.3 리렌더링을 최소화하여 성능 최적화하기
____7.3.1 useMemo로 값 메모화하기
____7.3.2 useCallback으로 함수 메모화하기
____7.3.3 useId로 안정적인 DOM 식별자 만들기

__7.4 복잡한 컴포넌트 라이브러리 만들기
____7.4.1 useImperativeHandle로 컴포넌트 API 생성하기
____7.4.2 useDebugValue로 훅 디버깅 개선하기
____7.4.3 useSyncExternalStore로 non-React 데이터 동기화하기
____7.4.4 useInsertionEffect로 렌더링하기 전에 효과 실행하기

__7.5 훅의 두 가지 핵심 원칙
__7.6 퀴즈
__7.7 퀴즈 정답
__7.8 요약


8장. React에서의 이벤트 처리

__8.1 React에서 DOM 이벤트 처리하기
____8.1.1 React의 기본 이벤트 처리

__8.2 이벤트 핸들러
____8.2.1 이벤트 핸들러의 정의
____8.2.2 이벤트 객체
____8.2.3 React 이벤트 객체
____8.2.4 합성 이벤트 객체 지속성

__8.3 이벤트 단계 및 전파
____8.3.1 브라우저에서 phase와 전파가 작동하는 방식
____8.3.2 React에서 이벤트 단계 처리하기
____8.3.3 비정상적인 이벤트 전파
____8.3.4 버블링되지 않는(Nonbubbling) DOM 이벤트

__8.4 기본 동작과 이를 방지하는 방법
____8.4.1 기본 이벤트 동작
____8.4.2 기본적인 작동 방지
____8.4.3 기타 기본 이벤트

__8.5 React 이벤트 객체 요약
__8.6 프로퍼티의 이벤트 핸들러 함수
__8.7 이벤트 핸들러 생성기
__8.8 수동으로 DOM 이벤트 수신
____8.8.1 window 및 document 이벤트 수신 대기
____8.8.2 지원되지 않는 HTML 이벤트 처리
____8.8.3 React와 DOM 이벤트 처리의 결합

__8.9 퀴즈
__8.10 퀴즈 정답
__8.11 요약


9장. React에서 폼으로 작업하기

__9.1 제어된 입력과 제어되지 않은 입력
__9.2 제어된 입력 관리
____9.2.1 필터링된 입력
____9.2.2 마스킹 입력
____9.2.3 유사한 입력이 많은 경우
____9.2.4 양식 제출(Form Submission)
____9.2.5 기타 입력
____9.2.6 기타 속성

__9.3 제어되지 않는 입력 관리
____9.3.1 Opportunities
____9.3.2 파일 입력 (File inputs)

__9.4 퀴즈
__9.5 퀴즈 정답
__9.6 요약


10장. 확장을 위한 고급 React 훅

__10.1 여러 컴포넌트에서 value 문제 해결
____10.1.1 React Context
____10.1.2 컨텍스트 states
____10.1.3 React 컨텍스트 분해하기

__10.2 복잡한 state를 처리하는 방법
____10.2.1 상호 의존적인 상태

__10.3 커스텀 훅
____10.3.1 언제 커스텀 훅이 되나?
____10.3.2 언제 커스텀 훅을 사용해야 하나?
____10.3.3 커스텀 훅은 어디에서 찾을 수 있나?

__10.4 퀴즈
__10.5 퀴즈 정답
__10.6 요약


11장. 프로젝트: 웹사이트 메뉴

__11.1 메뉴용 스캐폴딩
____11.1.1 HTML 출력
____11.1.2 컴포넌트 계층 구조
____11.1.3 아이콘
____11.1.4 CSS
____11.1.5 템플릿
____11.1.6 소스 코드
____11.1.7 브라우저에서

__11.2 정적 메뉴 렌더링하기
____11.2.1 이 연습의 목표
____11.2.2 원하는 HTML 출력
____11.2.3 컴포넌트 트리
____11.2.4 소스 코드
____11.2.5 브라우저에서

__11.3 과제: 동적 메뉴
____11.3.1 이 단계의 목표
____11.3.2 이 단계를 해결하기 위한 힌트
____11.3.3 컴포넌트 계층 구조
____11.3.4 이제 어떻게 할까요?

__11.4 과제: 컨텍스트에서 항목 검색
____11.4.1 이 단계의 목표
____11.4.2 이 단계를 해결하기 위한 힌트
____11.4.3 컴포넌트 계층 구조
____11.4.4 이제 어떻게 할까요?

__11.5 과제: 선택적 링크
____11.5.1 이 단계의 목표
____11.5.2 이 단계 해결을 위한 힌트
____11.5.3 컴포넌트 계층 구조
____11.5.4 이제 어떻게 할까요?

__11.6 최종 결론
__11.7 요약

12장. 프로젝트: 타이머

__12.1 타이머를 위한 스캐폴딩
____12.1.1 HTML 출력
____12.1.2 컴포넌트 계층 구조
____12.1.3 프로젝트 구조
____12.1.4 소스 코드
____12.1.5 애플리케이션 실행하기

__12.2 간단한 재생/일시 정지 타이머 추가하기
____12.2.1 이 연습의 목표
____12.2.2 컴포넌트 계층 구조
____12.2.3 프로젝트 구조 업데이트
____12.2.4 소스 코드
____12.2.5 애플리케이션 실행

__12.3 과제: 타이머를 사용자 지정 시간으로 초기화
__12.4 과제: 타이머 재설정하기
__12.5 과제: 다중 타이머
__12.6 요약


13장. 프로젝트: 작업 관리자

__13.1 작업 관리자를 위한 스캐폴딩
____13.1.1 컴포넌트 계층 구조
____13.1.2 프로젝트 구조
____13.1.3 소스 코드
____13.1.4 애플리케이션 실행

__13.2 간단한 작업 목록
____13.2.1 본 실습의 목표
____13.2.2 컴포넌트 계층 구조
____13.2.3 업데이트된 프로젝트 구조
____13.2.4 소스 코드
____13.2.5 애플리케이션 실행

__13.3 과제: 작업 단계 및 진행 상황
__13.4 과제: 단계의 우선순위 지정
__13.5 과제: 드래그 앤 드롭
__13.6 결론
__13.7 요약

출판사 서평

ASP, PHP, JSP의 초창기 시작했던 “웹프로그래밍”에서, 세월이 지나 정신을 차리고 보니, 팀원들에게 OJT로 “웹앱”과 리액트를 강의하고 있었습니다. Hook을 비롯해 여러 이벤트 처리에 대해 최근 버전의 언급이 거의 없던 상황이라 매닝 사에서 원서를 구입해 팀원 교육에 사용하고 있던 차에 본서의 번역 기회는 매우 반가왔습니다.

웹 개발 초기의 (비교적) 작은 부분이었던 자바스크립트는 발전을 거듭해 React, Vue, Angular와 같은 프레임워크를 통해 사용자 경험을 향상시키고 복잡한 인터페이스를 구축할 수 있습니다. 이들은 Google, Facebook, Youtube, X(전 Twitter) 등의 프론트엔드를 담당하는 만큼 매우 주요한 위치를 차지하고 있습니다. 재직 중인 회사에서도 이러한 추세를 무시하기 어렵기도 하고, 최근 기술에 대한 학습 열망이 큰 의욕 넘치는 (젊은!) 팀원들이 많아 구버전의 소스코드를 점차 개선해 가고 있는 과정에서 본 도서의 역할은 매우 효과적이었습니다.

리액트가 낯설거나 초보에서부터 중급 이상의 경험자들까지 놓치기 쉬운 부분들과 유용한 부분들이 순차적으로 고르게 언급되어 있으며 번역을 진행하던 중, 초벌 번역본으로 교육 진행 시, 한 단원을 마칠 때마다 실무에서 겪던 여러 시행착오들과 시간 소모가 아깝게 느껴질 만큼 유용했습니다. 그만큼 번역 자체만으로도 저로서는 무척 즐겁고 보람 있는 경험이었습니다.

취업 준비 중이든, 실무 담당자든 모두에게 리액트의 가장 효과적인 학습 가이드가 될 것이라 확신하며 본서를 두세 번 이상은 꼼꼼히 읽어보시기를 강력히 추천드립니다.

작가정보

저자(글) 모튼 바클런드

모튼 바클런드(Morten Barklund)
독립 소프트웨어 엔지니어인 모튼 바클런드는 Google에서 자금을 지원하는 오픈 소스 React 프로젝트를 비롯하여 다양한 팀에서 리드 개발자로 일하고 있습니다. 덴마크 공과대학교에서 컴퓨터 공학을 전공한 모튼은 20년 이상 웹 커뮤니티에서 활발히 활동하며 수백 개의 프로젝트에 참여했습니다.

저자(글) 아자트 마르단

아자트 마르단(Azat Mardan)
React Quickly 초판 , Practical Node.js , Pro Express.js , Full Stack JavaScript, 100가지 타입스크립트 실수 등 JavaScript, React 및 Node.js 관련 베스트셀러를 집필한 저자입니다. 그는 기술 대학의 객원 교수이자 스타트업 멘토이며, 소규모 스타트업과 YouTube, Google, Capital One, Indeed, DocuSign 등 대기업에서 근무한 경험이 있는 소프트웨어 엔지니어/리더입니다. 아자트는 40,000명 이상의 유학생을 대상으로 한 edX 강좌를 비롯하여 많은 워크숍과 강의를 진행했습니다. 한때 아자트는 Microsoft의 개발자 기술 부문 최고 전문가로 선정되었으며, 세계에서 239번째로 가장 활발하게 GitHub에 기여한 사람으로 기록되기도 했습니다. 그는 전 세계 30개 이상의 컨퍼런스에서 기조연설을 하고 더글러스 크록포드, 제프 앳우드(스택 오버플로 공동창업자), 짐 자이젤스키(아파치 개발자), 스콧 한셀만, 데니스 쿠퍼와 같은 저명한 기술자들과 무대를 공유하기도 했습니다.

번역 김동연

2024년 현재 Front, Backend, Server Senior Engineer / CTO
(전) CTO, B&G Media
Front Backend Engineer, DesignStorm
- 대한항공 기내면세점(스카이샵) 개발 PM
- 부산 경륜공단 온라인 발권, 투표 시스템 개발 PM
- 하이리빙 재고, 운영관리 시스템 / 쇼핑몰 개발