리액트 훅 인 액션 (Suspense와 동시 렌더링을 활용해 손쉬운 상태 관리와 높은 재사용성을 보장하는 빠릿빠릿한 애플리케이션 만들기)

Name: 리액트 훅 인 액션 (Suspense와 동시 렌더링을 활용해 손쉬운 상태 관리와 높은 재사용성을 보장하는 빠릿빠릿한 애플리케이션 만들기)
Brand: 책만 - John Larsen
SKU: 9791189909611
Price: 30.85 USD
Availability: InStock
Rating: 0 (0 reviews)

$30.85

Ask a Question

Vendor: 책만 - John Larsen

Type: JavaScript

SKU: 9791189909611

Categories: ALL BOOKS

Tags: 리액트훅인액션Suspense와동시렌더링을활용해손쉬운상태관리와높은재사용성을보장하는빠릿빠릿한애플리케이션만들기 컴퓨터/IT_웹프로그래밍

Description

체계적이며 유지보수 쉬운 코드 작성을 위한 REACT HOOK 활용 완벽 가이드!
풍부한 샘플 코드와 다양한 그림으로 리액트 훅의 개념과 활용을 차근차근 배워 보자!

여러 리액트 컴포넌트 사이에 기능 재사용과 손쉬운 공유를 위한 목적으로 만들어진 자바스크립트 함수인 리액트 훅(React Hook)을 사용하면 컴포넌트를 더 작은 함수로 나눌 수 있고, 상태와 부수 효과를 관리할 수 있으며, 클래스를 사용하지 않고도 리액트의 기능을 활용할 수 있다. 게다가 컴포넌트의 계층 구조를 재배열하지 않고도 이 모든 이점을 얻을 수 있다.
이 책에서는 훅을 사용해 재사용 가능한 리액트 컴포넌트를 빠르게 작성하는 방법을 알려준다. 처음에는 훅을 사용해 컴포넌트 코드를 작성한 다음, 지역 상태 관리, 애플리케이션 상태 관리, 데이터 적재 등의 부수 효과 관리를 보여주는 자원 예약 애플리케이션을 구현한다.
한국어판 특별부록으로 수록된 ‘예제 앱에 리액트 18 적용을 위한 변경 방법’에서는 리액트 18에 맞춰 원서 소스 코드의 어떤 부분을 변경해야 하는지 설명한다.

저자

JohnLarsen

(JohnLarsen)
1980년대이래프로그래밍을계속해왔다.처음에코모도어VIC-20컴퓨터의베이직(BASIC)으로시작해자바,PHP,C#,자바스크립트로옮겨왔다.매닝출판사에서펴낸『GetProgrammingwithJavaScript』의저자이기도하다.25여년간영국에서수학교사로서고등학생에게컴퓨팅을가르쳐왔으며학교안에서이뤄지는교육,학습,의사소통을돕는웹기반프로그램을개발해왔다.최근에는일본으로이주해영어를가르치며일본어실력을높이려노력중이다.

[1부]리액트훅과동시성모드완전정리

1장리액트는진화중이다
1.1리액트란무엇인가
__1.1.1컴포넌트에서UI만들기
__1.1.2상태와UI의동기화
__1.1.3컴포넌트유형이해하기
1.2리액트의새기능
1.3리액트훅은함수컴포넌트에상태를추가할수있다
__1.3.1상태가있는함수컴포넌트:코드를더적게작성하고,더잘조직화하자
__1.3.2커스텀훅:더쉬운코드재사용
__1.3.3이미만들어진,잘테스트된기능을제공하는서드파티훅들
1.4동시렌더링과Suspense를통한더나은UX
__1.4.1동시렌더링
__1.4.2Suspense
1.5리액트의새코드공개채널
1.6이책의대상독자
1.7시작하며
1.8요약

2장useState훅으로컴포넌트상태관리하기
2.1예약관리앱설정하기
__2.1.1create-react-app으로앱뼈대생성하기
__2.1.2네가지핵심파일수정하기
__2.1.3애플리케이션에필요한데이터베이스파일추가하기
__2.1.4페이지컴포넌트와UserPicker.js파일생성하기
2.2useState를사용해값을저장하고사용하며설정하기
__2.2.1변수에새로운값을대입해도UI가바뀌지않는다
__2.2.2useState를호출하면값과갱신함수를돌려받는다
__2.2.3갱신함수를호출하면이전값이치환된다
__2.2.4초깃값으로함수를useState에전달하기
__2.2.5새상태를설정할때이전상태참조하기
2.3여러값을다루기위해useState를여러번호출하기
__2.3.1드롭다운리스트를사용해상태설정하기
__2.3.2체크박스를사용해상태설정하기
2.4함수컴포넌트개념다시살펴보기
2.5요약

3장useReducer훅을사용해컴포넌트상태관리하기
3.1단일이벤트에대한응답으로여러상태값갱신하기
__3.1.1예측할수없는상태변경으로사용자방해하기
__3.1.2예측가능한상태변경으로사용자의집중력유지하기
3.2useReducer로더복잡한상태관리하기
__3.2.1미리정의된액션과리듀서를사용해상태갱신하기
__3.2.2BookablesList컴포넌트를위한리듀서만들기
__3.2.3useReducer를사용해컴포넌트상태에접근하고액션디스패치하기
3.3함수를사용해초기상태생성하기
__3.3.1WeekPicker컴포넌트소개
__3.3.2날짜와주를처리하는유틸리티함수만들기
__3.3.3컴포넌트의날짜를관리하는리듀서만들기
__3.3.4useReducer훅에게초기화함수전달하기
__3.3.5WeekPicker를사용하도록BookingsPage변경하기
3.4useReducer개념다시살펴보기
3.5요약

4장부수효과활용하기
4.1간단한예제를통해useEffectAPI탐색하기
__4.1.1매번렌더링이일어난다음에부수효과실행하기
__4.1.2컴포넌트가마운트될때만효과실행하기
__4.1.3함수를반환해서부수효과정리하기
__4.1.4의존관계를지정해서효과실행시기제어하기
__4.1.5useEffect훅을호출하는방법요약
__4.1.6useLayoutEffect를호출해브라우저가화면을다시그리기전에효과를실행하기
4.2데이터읽어오기
__4.2.1새db.json파일만들기
__4.2.2JSON서버설정하기
__4.2.3useEffect훅안에서데이터를읽어오기
__4.2.4async와await사용하기
4.3BookablesList컴포넌트가사용할데이터읽어오기
__4.3.1데이터적재과정살펴보기
__4.3.2적재및오류상태를관리하도록리듀서변경하기
__4.3.3데이터를적재하기위한도우미함수만들기
__4.3.4예약가능자원적재하기
4.4요약

5장useRef훅으로컴포넌트상태관리하기
5.1재렌더링을촉발하지않고상태를갱신하는방법
__5.1.1상태값을갱신할때useState와useRef비교
__5.1.2useRef호출하기
5.2참조객체를사용해타이머ID저장하기
5.3DOM엘리먼트에대한참조유지하기
__5.3.1이벤트에응답해엘리먼트에포커스설정하기
__5.3.2참조객체를사용해텍스트박스관리하기
5.4요약

6장애플리케이션상태관리하기
6.1자식컴포넌트에게공유상태전달하기
__6.1.1부모가자식의프롭을설정함으로써상태를자식에게전달하는방법
__6.1.2부모컴포넌트로부터프롭을통해상태받기
__6.1.3부모로부터갱신함수를프롭으로받기
6.2컴포넌트를더작은조각으로분리하기
__6.2.1컴포넌트를더큰앱의일부분으로바라보기
__6.2.2페이지의UI안에서여러컴포넌트를조직화하기
__6.2.3BookableDetails컴포넌트만들기
6.3useReducer로상태와디스패치공유하기
__6.3.1BookablesView컴포넌트에서상태를관리하기
__6.3.2리듀서에서액션제거하기
__6.3.3BookablesList컴포넌트에서상태와디스패치받기
6.4useState에서얻은상태값과갱신함수공유
__6.4.1BookablesView컴포넌트에서선택된예약가능자원을관리하기
__6.4.2BookablesList컴포넌트에서예약가능자원과갱신함수전달받기
6.5콜백함수재정의를방지하기위해useCallback에게함수전달하기
__6.5.1우리가프롭들을통해전달하는함수에의존하기
__6.5.2useCallback훅을사용해함수의정체성유지하기
6.6요약

7장useMemo로상태관리하기
7.1“O,shortcake!”라고외쳐서요리사의마음을아프게하기
__7.1.1비용이많이드는알고리즘으로아나그램생성하기
__7.1.2중복함수호출을피하는방법
7.2useMemo를사용해비용이많이드는함수호출메모화하기
7.3Bookings페이지의컴포넌트구성하기
__7.3.1useState를사용해선택한예약가능자원을관리하기
__7.3.2useReducer와useState를사용해선택된주와예약관리하기
7.4useMemo를사용해효율적으로예약격자만들기
__7.4.1세션과날짜의격자생성
__7.4.2기존예약에대한조회생성
__7.4.3getBookings데이터적재함수제공하기
__7.4.4BookingsGrid컴포넌트를생성하고useMemo호출하기
__7.4.5useEffect를사용해데이터를읽어올때응답의경합처리하기
7.5요약

8장컨텍스트API로상태관리하기
8.1컴포넌트트리의아주위쪽에저장된상태가필요한경우
__8.1.1페이지가처음적재될때안내메시지표시하기
__8.1.2방문자가예약을선택하면예약정보표시하기
__8.1.3사용자가만든예약에대해편집버튼표시하기:문제점
__8.1.4사용자가만든예약에대해편집버튼표시하기:해법
8.2커스텀프로바이더와여러컨텍스트사용하기
__8.2.1객체를컨텍스트프로바이더의값으로설
__8.2.2커스텀프로바이더로상태옮기기
__8.2.3여러컨텍스트사용하기
__8.2.4컨텍스트의디폴트값지정하기
8.3요약

9장커스텀훅만들기
9.1기능을커스텀훅으로추출하기
__9.1.1공유할수있는기능인식하기
__9.1.2컴포넌트밖에서커스텀훅정의하기
__9.1.3커스텀훅에서커스텀훅호출하기
9.2훅규칙따르기
__9.2.1최상위수준에서만훅을호출하기
__9.2.2리액트함수안에서만훅을호출하기
__9.2.3훅규칙을적용하기위해ESLint플러그인사용하기
9.3그밖의커스텀훅추출예제
__9.3.1useWindowSize훅을사용해창크기얻기
__9.3.2useLocalStorage훅을사용해값을설정하고읽기
9.4커스텀훅을사용해컨텍스트값소비하기
9.5커스텀훅으로데이터읽어오기를캡슐화하기
__9.5.1useFetch훅만들기
__9.5.2useFetch가반환하는데이터,상태,오류값사용하기
__9.5.3데이터를읽어오는더특화된훅useBookings만들기
9.6요약

10장서드파티훅사용하기
10.1리액트라우터를사용해URL의상태에접근하기
__10.1.1내포시킬수있게경로설정하기
__10.1.2Bookables페이지에중첩된경로추가하기
__10.1.3useParams훅을사용해URL파라미터에접근하기
__10.1.4useNavigate훅을사용해내비게이션하기
10.2쿼리문자열검색파라미터를가져오고설정하기
__10.2.1쿼리문자열에서검색파라미터가져오기
__10.2.2쿼리문자열설정하기
10.3리액트쿼리를사용해데이터읽기스트림라인화하기
__10.3.1리액트쿼리소개
__10.3.2컴포넌트가리액트쿼리클라이언트에접근할수있게하기
__10.3.3useQuery를사용해데이터읽어오기
__10.3.4쿼리캐시의데이터에접근하는방법
__10.3.5useMutation을사용해서버상태갱신하기
10.4요약

[2부]Suspense와오류경계를활용해비동기적으로컴포넌트와데이터적재하기

11장Suspense로코드분할하기
11.1import함수를사용해코드를동적으로임포트하기
__11.1.1버튼클릭시자바스크립트를적재하는웹페이지설정하기
__11.1.2디폴트와이름붙인익스포트사용하기
__11.1.3정적임포트를사용해자바스크립트적재하기
__11.1.4import함수를호출해자바스크립트를동적으로적재하기
11.2lazy와Suspense를사용해컴포넌트를동적으로임포트하기
__11.2.1lazy함수를사용해컴포넌트를지연컴포넌트로변환하기
__11.2.2Suspense컴포넌트를사용해폴백콘텐츠지정하기
__11.2.3지연적재와Suspense가어떻게함께작동하는지이해하기
__11.2.4경로에따라앱을분할하기
11.3오류경계를사용해오류잡아내기
__11.3.1리액트문서가제공하는오류경계예제살펴보기
__11.3.2우리자신의오류경계만들기
__11.3.3오류복구하기
11.4요약

12장데이터읽어오기와Suspense통합하기
12.1데이터읽어오기와Suspense
__12.1.1프로미스가상태를포함하도록업그레이드하기
__12.1.2

출판사 서평

|이책에서다루는내용|
-리액트기능을사용하는함수컴포넌트를만드는방법
-지역상태,공유된상태,애플리케이션상태를관리하는방법
-내장훅,커스텀훅,서드파티훅을사용하는방법
-리액트쿼리를사용해데이터를적재하고,갱신하고,캐싱하는방법
-코드분할과리액트Suspense컴포넌트를사용해페이지와데이터적재를개선하는방법

|이책의대상독자|
자바스크립트와웹개발을어느정도알고,기본적인리액트개발을배운개발자라면누구나읽을수있다.이책을통해훅을더잘이해하고자신만의커스텀훅을작성해프론트엔드프로그램을좀더모듈화하는방법을배울수있다.

|이책의구성|
1부에서는리액트에내장된리액트훅의문법과사용법을소개한다.또한자신만의커스텀훅을만들어보고,다른기존리액트라이브러리에서제공하는서드파티훅을최대한활용하는방법을보여준다.
2부에서는더큰앱에서컴포넌트코드를더효과적으로적재하고,Suspense컴포넌트와오류경계(errorboundary)를사용해자원이적재되는동안폴백UI를구성하는방법을설명한다.그다음에는데이터적재와Suspense를통합하고상태전이를다룰때사용하는동시성API를살펴본다.

[옮긴이의말]
리액트(React)에함수컴포넌트가도입되고,훅hook이도입되면서다양한서드파티라이브러리가훅을제공하기시작했고훅과함수컴포넌트를함께사용하면클래스기반의컴포넌트보다훨씬더간결하고합성성이좋으면서유지보수하기도쉬운앱을만들수있다는사실을사람들이깨닫게되면서훅과함수컴포넌트가많이쓰이고있다.예를들어,최근자주쓰이는리액트상태관리라이브러리인주스탠드(Zustand),조타이(Jotai)등은모두훅을제공한다.따라서이제리액트개발을익히기위해서는훅을다루는방법을체계적으로잘배워둘필요가있다.하지만대부분의리액트책은아직도클래스컴포넌트를자세히다루고,훅보다는클래스메서드를통한컴포넌트생명주기관리에대해설명하고,리액트훅에대해서는간단히설명하고넘어가는경우가많다.
이책은리액트의여러가지기능중에서도특히훅을자세히다룬다.자바스크립트와웹개발을어느정도알고,기본적인리액트개발을배운개발자라면이책을통해훅을더잘이해하고자신만의커스텀훅을작성해프론트엔드프로그램을좀더모듈화할수있을것이다.
무엇보다풍부한그림을통해리액트함수컴포넌트가어떻게작동하는지,함수컴포넌트의각기능을어떻게훅으로분리해내는지등을시각적으로도자세히설명해주기때문에,이를통해좀더쉽게컴포넌트와훅의관계를이해할수있으며여러분이작성한컴포넌트에서공통기능을어떻게훅으로분리해낼수있을지에대해서도쉽게이해할수있다.그리고훅의동작을잘이해하고나면새로운서드파티라이브러리가제공하는훅을활용할때도더쉽게컴포넌트와서드파티훅의동작이어떤식으로이뤄질지이해하고활용할수있다.
또리액트를잘모르는프론트엔드개발자라하더라도,그림을통해클래스컴포넌트의여러부분이어떻게함수컴포넌트와훅으로바뀌는지에대해자세히설명해주고,useState훅을사용한컴포넌트상태관리로부터useReducer를통해상태를여러컴포넌트에공유하는방법,useRef훅을사용해참조를공유하는방법등리액트함수컴포넌트를사용해웹앱을만들때필요한여러기능을차근차근설명해나가기때문에리액트초보자가리액트기초를쌓고싶을때도도움이된다.이책이훅을사용하는리액트프로그래머들에게작게나마도움이되길바란다.