{"product_id":"110282","title":"리액트 훅 인 액션","description":"\u003ccenter\u003e\u003cdiv style=\"text-align:center\"\u003e\u003cimg src=\"https:\/\/tmgdisk01.cafe24.com\/images\/vs\/4172\/sv\/3jYEEJtrlqWXUBJO2uDR2AS4AgR7oN.png?v=1765098737\" style=\"max-width:100%;max-height:10px\"\u003e\u003c\/div\u003e\u003c\/center\u003e\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\u003ccenter\u003e\n\u003cdiv style=\"width:95%\"\u003e\n\u003cdiv style=\"text-align:center;font-size:30px;font-weight:bolder;line-height:1.6em\"\u003e리액트 훅 인 액션\u003c\/div\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003cdiv style=\"border-bottom:1px;border-bottom-style:dotted;border-color:;padding-bottom:20px\"\u003e\u003ccenter\u003e\u003ctable align=\"center\" width=\"100%\"\u003e\u003ctbody style=\"border:0px\"\u003e\n\u003ctr\u003e\u003ctd align=\"center\" style=\"line-height:1.2em;text-align:center;font-size:18px;color:black;font-weight:bold;padding-bottom:20px;\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\n\u003ctr\u003e\u003ctd style=\"text-align:center\"\u003e\u003cimg src=\"https:\/\/image.yes24.com\/goods\/125606405\/XL\" style=\"max-width:100%;height:auto\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\n\u003c\/tbody\u003e\u003c\/table\u003e\u003c\/center\u003e\u003c\/div\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003cdiv style=\"width:95%;{split_style6}padding-top:20px;padding-bottom:20px\"\u003e\n\u003cdiv style=\"text-align:left;font-size:16px;font-weight:bold;padding-bottom:20px\"\u003eDescription\u003c\/div\u003e\n\u003cdiv style=\"text-align:left;word-break:break-all;font-size:14px;line-height:1.6em;\"\u003e\n\u003cdiv\u003e \u003ch5\u003e\u003cb\u003e책소개\u003c\/b\u003e\u003c\/h5\u003e \u003c\/div\u003e \u003cdiv\u003e \u003cdiv\u003e \u003cdiv\u003e  \u003cb\u003e체계적이며 유지보수 쉬운 코드 작성을 위한 REACT HOOK 활용 완벽 가이드!\u003cbr\u003e풍부한 샘플 코드와 다양한 그림으로 리액트 훅의 개념과 활용을 차근차근 배워 보자!\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e여러 리액트 컴포넌트 사이에 기능 재사용과 손쉬운 공유를 위한 목적으로 만들어진 자바스크립트 함수인 리액트 훅(React Hook)을 사용하면 컴포넌트를 더 작은 함수로 나눌 수 있고, 상태와 부수 효과를 관리할 수 있으며, 클래스를 사용하지 않고도 리액트의 기능을 활용할 수 있다.\u003cbr\u003e게다가 컴포넌트의 계층 구조를 재배열하지 않고도 이 모든 이점을 얻을 수 있다.\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e이 책에서는 훅을 사용해 재사용 가능한 리액트 컴포넌트를 빠르게 작성하는 방법을 알려준다.\u003cbr\u003e처음에는 훅을 사용해 컴포넌트 코드를 작성한 다음, 지역 상태 관리, 애플리케이션 상태 관리, 데이터 적재 등의 부수 효과 관리를 보여주는 자원 예약 애플리케이션을 구현한다.\u003cbr\u003e한국어판 특별부록으로 수록된 ‘예제 앱에 리액트 18 적용을 위한 변경 방법’에서는 리액트 18에 맞춰 원서 소스 코드의 어떤 부분을 변경해야 하는지 설명한다.\u003cbr\u003e \u003c\/div\u003e \u003c\/div\u003e \u003cdiv\u003e \u003cul\u003e \u003cli\u003e 책의 일부 내용을 미리 읽어보실 수 있습니다.\u003cbr\u003e\u003cspan\u003e미리보기\u003c\/span\u003e\n\u003c\/li\u003e \u003c\/ul\u003e \u003c\/div\u003e \u003c\/div\u003e \u003cbr\u003e\u003cdiv\u003e \u003ch5\u003e\u003cb\u003e목차\u003c\/b\u003e\u003c\/h5\u003e \u003c\/div\u003e \u003cdiv\u003e \u003cdiv\u003e  \u003cb\u003e[1부] 리액트 훅과 동시성 모드 완전 정리\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e\u003cb\u003e1장 리액트는 진화 중이다\u003c\/b\u003e\u003cbr\u003e1.1 리액트란 무엇인가\u003cbr\u003e__1.1.1 컴포넌트에서 UI 만들기\u003cbr\u003e__1.1.2 상태와 UI의 동기화\u003cbr\u003e__1.1.3 컴포넌트 유형 이해하기\u003cbr\u003e1.2 리액트의 새 기능\u003cbr\u003e1.3 리액트 훅은 함수 컴포넌트에 상태를 추가할 수 있다\u003cbr\u003e__1.3.1 상태가 있는 함수 컴포넌트: 코드를 더 적게 작성하고, 더 잘 조직화하자\u003cbr\u003e__1.3.2 커스텀 훅: 더 쉬운 코드 재사용\u003cbr\u003e__1.3.3 이미 만들어진, 잘 테스트된 기능을 제공하는 서드파티 훅들\u003cbr\u003e1.4 동시 렌더링과 Suspense를 통한 더 나은 UX\u003cbr\u003e__1.4.1 동시 렌더링\u003cbr\u003e__1.4.2 Suspense\u003cbr\u003e1.5 리액트의 새 코드 공개 채널\u003cbr\u003e1.6 이 책의 대상 독자\u003cbr\u003e1.7 시작하며\u003cbr\u003e1.8 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e2장 useState 훅으로 컴포넌트 상태 관리하기\u003c\/b\u003e\u003cbr\u003e2.1 예약 관리 앱 설정하기\u003cbr\u003e__2.1.1 create-react-app으로 앱 뼈대 생성하기\u003cbr\u003e__2.1.2 네 가지 핵심 파일 수정하기\u003cbr\u003e__2.1.3 애플리케이션에 필요한 데이터베이스 파일 추가하기\u003cbr\u003e__2.1.4 페이지 컴포넌트와 UserPicker.js 파일 생성하기\u003cbr\u003e2.2 useState를 사용해 값을 저장하고 사용하며 설정하기\u003cbr\u003e__2.2.1 변수에 새로운 값을 대입해도 UI가 바뀌지 않는다\u003cbr\u003e__2.2.2 useState를 호출하면 값과 갱신 함수를 돌려받는다\u003cbr\u003e__2.2.3 갱신 함수를 호출하면 이전 값이 치환된다\u003cbr\u003e__2.2.4 초깃값으로 함수를 useState에 전달하기\u003cbr\u003e__2.2.5 새 상태를 설정할 때 이전 상태 참조하기\u003cbr\u003e2.3 여러 값을 다루기 위해 useState를 여러 번 호출하기\u003cbr\u003e__2.3.1 드롭다운 리스트를 사용해 상태 설정하기\u003cbr\u003e__2.3.2 체크박스를 사용해 상태 설정하기\u003cbr\u003e2.4 함수 컴포넌트 개념 다시 살펴보기\u003cbr\u003e2.5 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e3장 useReducer 훅을 사용해 컴포넌트 상태 관리하기\u003c\/b\u003e\u003cbr\u003e3.1 단일 이벤트에 대한 응답으로 여러 상태 값 갱신하기\u003cbr\u003e__3.1.1 예측할 수 없는 상태 변경으로 사용자 방해하기\u003cbr\u003e__3.1.2 예측 가능한 상태 변경으로 사용자의 집중력 유지하기\u003cbr\u003e3.2 useReducer로 더 복잡한 상태 관리하기\u003cbr\u003e__3.2.1 미리 정의된 액션과 리듀서를 사용해 상태 갱신하기\u003cbr\u003e__3.2.2 BookablesList 컴포넌트를 위한 리듀서 만들기\u003cbr\u003e__3.2.3 useReducer를 사용해 컴포넌트 상태에 접근하고 액션 디스패치하기\u003cbr\u003e3.3 함수를 사용해 초기 상태 생성하기\u003cbr\u003e__3.3.1 WeekPicker 컴포넌트 소개\u003cbr\u003e__3.3.2 날짜와 주를 처리하는 유틸리티 함수 만들기\u003cbr\u003e__3.3.3 컴포넌트의 날짜를 관리하는 리듀서 만들기\u003cbr\u003e__3.3.4 useReducer 훅에게 초기화 함수 전달하기\u003cbr\u003e__3.3.5 WeekPicker를 사용하도록 BookingsPage 변경하기\u003cbr\u003e3.4 useReducer 개념 다시 살펴보기\u003cbr\u003e3.5 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e4장 부수 효과 활용하기\u003c\/b\u003e\u003cbr\u003e4.1 간단한 예제를 통해 useEffect API 탐색하기\u003cbr\u003e__4.1.1 매번 렌더링이 일어난 다음에 부수 효과 실행하기\u003cbr\u003e__4.1.2 컴포넌트가 마운트될 때만 효과 실행하기\u003cbr\u003e__4.1.3 함수를 반환해서 부수 효과 정리하기\u003cbr\u003e__4.1.4 의존 관계를 지정해서 효과 실행 시기 제어하기\u003cbr\u003e__4.1.5 useEffect 훅을 호출하는 방법 요약\u003cbr\u003e__4.1.6 useLayoutEffect를 호출해 브라우저가 화면을 다시 그리기 전에 효과를 실행하기\u003cbr\u003e4.2 데이터 읽어오기\u003cbr\u003e__4.2.1 새 db.json 파일 만들기\u003cbr\u003e__4.2.2 JSON 서버 설정하기\u003cbr\u003e__4.2.3 useEffect 훅 안에서 데이터를 읽어오기\u003cbr\u003e__4.2.4 async와 await 사용하기\u003cbr\u003e4.3 BookablesList 컴포넌트가 사용할 데이터 읽어오기\u003cbr\u003e__4.3.1 데이터 적재 과정 살펴보기\u003cbr\u003e__4.3.2 적재 및 오류 상태를 관리하도록 리듀서 변경하기\u003cbr\u003e__4.3.3 데이터를 적재하기 위한 도우미 함수 만들기\u003cbr\u003e__4.3.4 예약 가능 자원 적재하기\u003cbr\u003e4.4 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e5장 useRef 훅으로 컴포넌트 상태 관리하기\u003c\/b\u003e\u003cbr\u003e5.1 재렌더링을 촉발하지 않고 상태를 갱신하는 방법\u003cbr\u003e__5.1.1 상태 값을 갱신할 때 useState와 useRef 비교\u003cbr\u003e__5.1.2 useRef 호출하기\u003cbr\u003e5.2 참조객체를 사용해 타이머 ID 저장하기\u003cbr\u003e5.3 DOM 엘리먼트에 대한 참조 유지하기\u003cbr\u003e__5.3.1 이벤트에 응답해 엘리먼트에 포커스 설정하기\u003cbr\u003e__5.3.2 참조객체를 사용해 텍스트 박스 관리하기\u003cbr\u003e5.4 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e6장 애플리케이션 상태 관리하기\u003c\/b\u003e\u003cbr\u003e6.1 자식 컴포넌트에게 공유 상태 전달하기\u003cbr\u003e__6.1.1 부모가 자식의 프롭을 설정함으로써 상태를 자식에게 전달하는 방법\u003cbr\u003e__6.1.2 부모 컴포넌트로부터 프롭을 통해 상태 받기\u003cbr\u003e__6.1.3 부모로부터 갱신 함수를 프롭으로 받기\u003cbr\u003e6.2 컴포넌트를 더 작은 조각으로 분리하기\u003cbr\u003e__6.2.1 컴포넌트를 더 큰 앱의 일부분으로 바라보기\u003cbr\u003e__6.2.2 페이지의 UI 안에서 여러 컴포넌트를 조직화하기\u003cbr\u003e__6.2.3 BookableDetails 컴포넌트 만들기\u003cbr\u003e6.3 useReducer로 상태와 디스패치 공유하기\u003cbr\u003e__6.3.1 BookablesView 컴포넌트에서 상태를 관리하기\u003cbr\u003e__6.3.2 리듀서에서 액션 제거하기\u003cbr\u003e__6.3.3 BookablesList 컴포넌트에서 상태와 디스패치 받기\u003cbr\u003e6.4 useState에서 얻은 상태 값과 갱신 함수 공유\u003cbr\u003e__6.4.1 BookablesView 컴포넌트에서 선택된 예약 가능 자원을 관리하기\u003cbr\u003e__6.4.2 BookablesList 컴포넌트에서 예약 가능 자원과 갱신 함수 전달받기\u003cbr\u003e6.5 콜백 함수 재정의를 방지하기 위해 useCallback에게 함수 전달하기\u003cbr\u003e__6.5.1 우리가 프롭들을 통해 전달하는 함수에 의존하기\u003cbr\u003e__6.5.2 useCallback 훅을 사용해 함수의 정체성 유지하기\u003cbr\u003e6.6 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e7장 useMemo로 상태 관리하기\u003c\/b\u003e\u003cbr\u003e7.1 “O, shortcake!”라고 외쳐서 요리사의 마음을 아프게 하기\u003cbr\u003e__7.1.1 비용이 많이 드는 알고리즘으로 아나그램 생성하기\u003cbr\u003e__7.1.2 중복 함수 호출을 피하는 방법\u003cbr\u003e7.2 useMemo를 사용해 비용이 많이 드는 함수 호출 메모화하기\u003cbr\u003e7.3 Bookings 페이지의 컴포넌트 구성하기\u003cbr\u003e__7.3.1 useState를 사용해 선택한 예약 가능 자원을 관리하기\u003cbr\u003e__7.3.2 useReducer와 useState를 사용해 선택된 주와 예약 관리하기\u003cbr\u003e7.4 useMemo를 사용해 효율적으로 예약 격자 만들기\u003cbr\u003e__7.4.1 세션과 날짜의 격자 생성\u003cbr\u003e__7.4.2 기존 예약에 대한 조회 생성\u003cbr\u003e__7.4.3 getBookings 데이터 적재 함수 제공하기\u003cbr\u003e__7.4.4 BookingsGrid 컴포넌트를 생성하고 useMemo 호출하기\u003cbr\u003e__7.4.5 useEffect를 사용해 데이터를 읽어올 때 응답의 경합 처리하기\u003cbr\u003e7.5 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e8장 컨텍스트 API로 상태 관리하기\u003c\/b\u003e\u003cbr\u003e8.1 컴포넌트 트리의 아주 위쪽에 저장된 상태가 필요한 경우\u003cbr\u003e__8.1.1 페이지가 처음 적재될 때 안내 메시지 표시하기\u003cbr\u003e__8.1.2 방문자가 예약을 선택하면 예약 정보 표시하기\u003cbr\u003e__8.1.3 사용자가 만든 예약에 대해 편집 버튼 표시하기: 문제점\u003cbr\u003e__8.1.4 사용자가 만든 예약에 대해 편집 버튼 표시하기: 해법\u003cbr\u003e8.2 커스텀 프로바이더와 여러 컨텍스트 사용하기\u003cbr\u003e__8.2.1 객체를 컨텍스트 프로바이더의 값으로 설\u003cbr\u003e__8.2.2 커스텀 프로바이더로 상태 옮기기\u003cbr\u003e__8.2.3 여러 컨텍스트 사용하기\u003cbr\u003e__8.2.4 컨텍스트의 디폴트 값 지정하기\u003cbr\u003e8.3 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e9장 커스텀 훅 만들기\u003c\/b\u003e\u003cbr\u003e9.1 기능을 커스텀 훅으로 추출하기\u003cbr\u003e__9.1.1 공유할 수 있는 기능 인식하기\u003cbr\u003e__9.1.2 컴포넌트 밖에서 커스텀 훅 정의하기\u003cbr\u003e__9.1.3 커스텀 훅에서 커스텀 훅 호출하기\u003cbr\u003e9.2 훅 규칙 따르기\u003cbr\u003e__9.2.1 최상위 수준에서만 훅을 호출하기\u003cbr\u003e__9.2.2 리액트 함수 안에서만 훅을 호출하기\u003cbr\u003e__9.2.3 훅 규칙을 적용하기 위해 ESLint 플러그인 사용하기\u003cbr\u003e9.3 그 밖의 커스텀 훅 추출 예제\u003cbr\u003e__9.3.1 useWindowSize 훅을 사용해 창 크기 얻기\u003cbr\u003e__9.3.2 useLocalStorage 훅을 사용해 값을 설정하고 읽기\u003cbr\u003e9.4 커스텀 훅을 사용해 컨텍스트 값 소비하기\u003cbr\u003e9.5 커스텀 훅으로 데이터 읽어오기를 캡슐화하기\u003cbr\u003e__9.5.1 useFetch 훅 만들기\u003cbr\u003e__9.5.2 useFetch가 반환하는 데이터, 상태, 오류 값 사용하기\u003cbr\u003e__9.5.3 데이터를 읽어오는 더 특화된 훅 useBookings 만들기\u003cbr\u003e9.6 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e10장 서드파티 훅 사용하기\u003c\/b\u003e\u003cbr\u003e10.1 리액트 라우터를 사용해 URL의 상태에 접근하기\u003cbr\u003e__10.1.1 내포시킬 수 있게 경로 설정하기\u003cbr\u003e__10.1.2 Bookables 페이지에 중첩된 경로 추가하기\u003cbr\u003e__10.1.3 useParams 훅을 사용해 URL 파라미터에 접근하기\u003cbr\u003e__10.1.4 useNavigate 훅을 사용해 내비게이션하기\u003cbr\u003e10.2 쿼리 문자열 검색 파라미터를 가져오고 설정하기\u003cbr\u003e__10.2.1 쿼리 문자열에서 검색 파라미터 가져오기\u003cbr\u003e__10.2.2 쿼리 문자열 설정하기\u003cbr\u003e10.3 리액트 쿼리를 사용해 데이터 읽기 스트림라인화하기\u003cbr\u003e__10.3.1 리액트 쿼리 소개\u003cbr\u003e__10.3.2 컴포넌트가 리액트 쿼리 클라이언트에 접근할 수 있게 하기\u003cbr\u003e__10.3.3 useQuery를 사용해 데이터 읽어오기\u003cbr\u003e__10.3.4 쿼리 캐시의 데이터에 접근하는 방법\u003cbr\u003e__10.3.5 useMutation을 사용해 서버 상태 갱신하기\u003cbr\u003e10.4 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e[2부] Suspense와 오류 경계를 활용해 비동기적으로 컴포넌트와 데이터 적재하기\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e\u003cb\u003e11장 Suspense로 코드 분할하기\u003c\/b\u003e\u003cbr\u003e11.1 import 함수를 사용해 코드를 동적으로 임포트하기\u003cbr\u003e__11.1.1 버튼 클릭 시 자바스크립트를 적재하는 웹 페이지 설정하기\u003cbr\u003e__11.1.2 디폴트와 이름 붙인 익스포트 사용하기\u003cbr\u003e__11.1.3 정적 임포트를 사용해 자바스크립트 적재하기\u003cbr\u003e__11.1.4 import 함수를 호출해 자바스크립트를 동적으로 적재하기\u003cbr\u003e11.2 lazy와 Suspense를 사용해 컴포넌트를 동적으로 임포트하기\u003cbr\u003e__11.2.1 lazy 함수를 사용해 컴포넌트를 지연 컴포넌트로 변환하기\u003cbr\u003e__11.2.2 Suspense 컴포넌트를 사용해 폴백 콘텐츠 지정하기\u003cbr\u003e__11.2.3 지연 적재와 Suspense가 어떻게 함께 작동하는지 이해하기\u003cbr\u003e__11.2.4 경로에 따라 앱을 분할하기\u003cbr\u003e11.3 오류 경계를 사용해 오류 잡아내기\u003cbr\u003e__11.3.1 리액트 문서가 제공하는 오류 경계 예제 살펴보기\u003cbr\u003e__11.3.2 우리 자신의 오류 경계 만들기\u003cbr\u003e__11.3.3 오류 복구하기\u003cbr\u003e11.4 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e12장 데이터 읽어오기와 Suspense 통합하기\u003c\/b\u003e\u003cbr\u003e12.1 데이터 읽어오기와 Suspense\u003cbr\u003e__12.1.1 프로미스가 상태를 포함하도록 업그레이드하기\u003cbr\u003e__12.1.2 프로미스 상태를 사용해 Suspense 통합하기\u003cbr\u003e__12.1.3 최대한 빨리 데이터 읽어오기\u003cbr\u003e__12.1.4 새 데이터 읽어오기\u003cbr\u003e__12.1.5 오류 복구하기\u003cbr\u003e__12.1.6 리액트 문서 확인하기\u003cbr\u003e12.2 리액트 쿼리와 Suspense, 오류 경계를 함께 사용하는 방법\u003cbr\u003e12.3 Suspense와 함께 이미지 적재하기\u003cbr\u003e__12.3.1 리액트 쿼리와 Suspense를 사용해 이미지 적재 중 폴백 제공하기\u003cbr\u003e__12.3.2 리액트 쿼리를 사용해 이미지나 데이터를 미리 적재하는 방법\u003cbr\u003e12.4 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e13장 useTransition, useDeferredValue, SuspenseList 연습과 실험\u003c\/b\u003e\u003cbr\u003e13.1 상태 전환을 더 부드럽게 하기\u003cbr\u003e__13.1.1 useTransition을 사용해 후퇴 상태 피하기\u003cbr\u003e__13.1.2 isPending을 사용해 사용자에게 피드백 제공하기\u003cbr\u003e__13.1.3 공통 컴포넌트와 전환 통합하기\u003cbr\u003e__13.1.4 useDeferredValue로 이전 값 유지하기\u003cbr\u003e13.2 여러 개의 폴백을 관리하기 위해 SuspenseList 사용하기\u003cbr\u003e__13.2.1 여러 소스에서 데이터 얻어서 보여주기\u003cbr\u003e__13.2.2 SuspenseList로 다수의 폴백 제어하기\u003cbr\u003e13.3 리액트 18과 동시성 모드\u003cbr\u003e13.4 요약\u003cbr\u003e\u003cbr\u003e\u003cb\u003e한국어판 특별부록 | 예제 앱에 리액트 18 적용을 위한 변경 방법\u003c\/b\u003e\u003cbr\u003eA.1 package.json 변경\u003cbr\u003eA.2 json 임포트 부분 변경\u003cbr\u003eA.3 애플리케이션 시작 부분 수정\u003cbr\u003eA.4 unstable_ 제거\u003cbr\u003eA.5 라우팅 관련 변경\u003cbr\u003eA.6 SuspenseList 문제 해결(임시변통)\u003cbr\u003e__A.6.1 원서 코드를 그대로 실행하는 방법 \u003c\/div\u003e \u003cdiv\u003e\u003c\/div\u003e \u003c\/div\u003e \u003cbr\u003e\u003cdiv\u003e \u003ch5\u003e\u003cb\u003e상세 이미지\u003c\/b\u003e\u003c\/h5\u003e \u003c\/div\u003e \u003cdiv\u003e \u003cdiv\u003e \u003cimg src=\"https:\/\/image.yes24.com\/momo\/TopCate4453\/MidCate008\/445270433.jpg\" border=\"0\" alt=\"상세 이미지 1\"\u003e \u003c\/div\u003e \u003c\/div\u003e \u003cbr\u003e\u003cdiv\u003e \u003ch5\u003e\u003cb\u003e출판사 리뷰\u003c\/b\u003e\u003c\/h5\u003e \u003c\/div\u003e \u003cdiv\u003e \u003cdiv\u003e  \u003cb\u003e│ 이 책에서 다루는 내용 │ \u003c\/b\u003e\u003cbr\u003e- 리액트 기능을 사용하는 함수 컴포넌트를 만드는 방법\u003cbr\u003e- 지역 상태, 공유된 상태, 애플리케이션 상태를 관리하는 방법\u003cbr\u003e- 내장 훅, 커스텀 훅, 서드파티 훅을 사용하는 방법\u003cbr\u003e- 리액트 쿼리를 사용해 데이터를 적재하고, 갱신하고, 캐싱하는 방법\u003cbr\u003e- 코드 분할과 리액트 Suspense 컴포넌트를 사용해 페이지와 데이터 적재를 개선하는 방법\u003cbr\u003e\u003cbr\u003e\u003cb\u003e│ 이 책의 대상 독자 │ \u003c\/b\u003e\u003cbr\u003e자바스크립트와 웹 개발을 어느 정도 알고, 기본적인 리액트 개발을 배운 개발자라면 누구나 읽을 수 있다.\u003cbr\u003e이 책을 통해 훅을 더 잘 이해하고 자신만의 커스텀 훅을 작성해 프론트엔드 프로그램을 좀 더 모듈화하는 방법을 배울 수 있다.\u003cbr\u003e\u003cbr\u003e\u003cb\u003e│ 이 책의 구성 │ \u003c\/b\u003e\u003cbr\u003e1부에서는 리액트에 내장된 리액트 훅의 문법과 사용법을 소개한다.\u003cbr\u003e또한 자신만의 커스텀 훅을 만들어 보고, 다른 기존 리액트 라이브러리에서 제공하는 서드파티 훅을 최대한 활용하는 방법을 보여준다.\u003cbr\u003e\u003cbr\u003e2부에서는 더 큰 앱에서 컴포넌트 코드를 더 효과적으로 적재하고, Suspense 컴포넌트와 오류 경계(error boundary)를 사용해 자원이 적재되는 동안 폴백 UI를 구성하는 방법을 설명한다.\u003cbr\u003e그다음에는 데이터 적재와 Suspense를 통합하고 상태 전이를 다룰 때 사용하는 동시성 API를 살펴본다.\u003cbr\u003e\u003cbr\u003e\u003cb\u003e[지은이의 말]\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e나는 고등학교 교사이자 프로그래머로서 학교 안에서 교육, 학습, 그리고 조직을 지원하는 애플리케이션을 개발하는 아주 좋은 일을 할 수 있었다.\u003cbr\u003e학생, 교사, 일반 직원의 요구사항을 매일 직접 들으면서 그들과 함께 계획, 의사소통, 이해 및 놀이를 더욱 쉽게 만드는 직관적인 앱과 도구를 만드는 작업을 할 수 있었다.\u003cbr\u003e자바스크립트로 작성한 퀴즈 앱과 틀린 그림 찾기 게임부터 시작해서 제이쿼리(jQuery)와 템플릿을 활용하는 수업 계획과 자원 예약 앱을 만들었다.\u003cbr\u003e그 이후부터 학교 과학 부서에서는 수업을 위한 도구를 주문하는 방법을 원했고, 리더십 팀은 직원들에게 공지를 전달하는 방법을 원했으며, ICT 기술자들은 직원들이 소프트웨어와 하드웨어 문제를 보고하고 관리하는 방법을 원했다.\u003cbr\u003e학생 좌석 배정 앱, 학교 웹사이트의 뉴스를 위한 콘텐츠 관리 시스템(content management system, CMS), 맞춤형 캘린더, 대화식 당직 배정표, 혹은 스포츠 경기 일지는 어떤가? 이 모든 소프트웨어는 모두 일관된 모양과 느낌(룩앤필look and feel)을 갖고 있었다.\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e각 프로젝트마다 자체적인 요구사항이 있었지만 많은 부분이 중복됐고, 비슷한 방법을 여러 앱에 사용할 수 있었다.\u003cbr\u003e이를 가속화하기 위해 나는 서버로부터 클라이언트에 이르기까지 노드(Node.js), 익스프레스(Express), 핸들바(Handlebars), 백본(Backbone), 마리오네트(Marionette)를 사용하는 자바스크립트로 전환했다.\u003cbr\u003e대부분은 잘 작동했지만 요구사항이 변할 때 앱을 변경하는 게 까다로울 때도 있었다.\u003cbr\u003e특히 모델(model), 뷰(view), 컨트롤러(controller) 간의 데이터 흐름이 항상 원활한 것은 아니었다.\u003cbr\u003e사용자들은 만족했지만 나는 코드의 기저에 자리 잡은 문제점을 볼 수 있었고, 언젠가는 코드로 돌아가 꼬인 부분을 다시 풀어야 하리라는 사실을 알았다.\u003cbr\u003e그러던 중에 리액트를 접하고 모든 문제가 해결됐다! 물론 모든 문제가 완벽히 해결된 것은 아니지만, 리액트의 컴포넌트, 프롭, 상태, 자동 재렌더링 모델은 다른 라이브러리보다 내 마음에 들었다.\u003cbr\u003e나는 하나씩 기존 앱을 리액트로 변환했다.\u003cbr\u003e변환을 할 때마다 앱이 더 단순하고 이해하기 쉽고 유지 관리하기 쉬워졌다.\u003cbr\u003e공통 컴포넌트를 재사용할 수 있었고, 나는 빠르게 코드를 변경하고 새로운 기능을 자신 있게 추가할 수 있었다.\u003cbr\u003e리액트 광신도는 아니지만(나는 프레임워크 다양성을 존중한다) 개종자임은 확실했으며, 리액트 개발자로서의 경험과 내 리액트 앱에 대한 사용자 반응을 즐겼다.\u003cbr\u003e\u003cbr\u003e리액트 훅을 이용하면서 단순성이라는 척도에서 내 코드가 한 번 더 긍정적인 단계를 밟을 수 있었다.\u003cbr\u003e클래스 컴포넌트의 생명 주기 메서드에 분산돼 있던 코드를 함수 컴포넌트 내부나 외부의 커스텀 훅에 한꺼번에 모아둘 수 있다.\u003cbr\u003e문서 제목 설정, 지역 저장소 접근, 컨텍스트 값 관리, 엘리먼트의 화면상 크기 측정, 서비스 구독, 데이터 읽어오기 등 특정 기능에 대한 코드를 쉽게 격리하고 유지보수하며 공유할 수 있다.\u003cbr\u003e그리고 리액트 라우터(React Router), 리덕스(Redux), 리액트 쿼리(React Query), 리액트 스프링(React Spring)과 같은 기존 라이브러리의 기능을 연결하기도 더 쉬워졌다.\u003cbr\u003e리액트 훅을 사용하면 리액트 컴포넌트에 대해 새로운 사고방식을 제공한다.\u003cbr\u003e처음에는 조심해야 할 작은 함정도 있지만, 내가 보기에 이런 사고방식의 변화는 확실히 좋은 것이다.\u003cbr\u003e\u003cbr\u003e훅으로의 전환은 앞으로 리액트가 작동하는 방식에 대한 근본적인 변화에 속한다.\u003cbr\u003e동시성 모드(리액트 18에서는 동시성 렌더링)가 새로운 표준이 될 것이고, 렌더링이 주 스레드를 차단하지 않고 다른 컴포넌트가 만들어지는 동안 사용자 입력처럼 우선순위가 더 높은 상태 변화가 즉시 렌더링될 수 있도록 하는 시간 분할 마법을 가능하게 할 것이다.\u003cbr\u003e선택적인 수화(hydration)는 리액트가 사용자 상호작용에 맞춰 꼭 필요한 컴포넌트 코드만 적재할 수 있게 하고, Suspense API는 개발자가 코드와 자원을 적재하는 동안 적재 중 상태를 더 신중하게 지정할 수 있게 해줄 것이다.\u003cbr\u003e\u003cbr\u003e리액트 팀은 개발자가 훌륭한 사용자 경험을 만들 수 있는 훌륭한 개발자 경험을 만드는 데 집중하고 있다.\u003cbr\u003e추가적인 변화가 계속 이뤄질 것이며, 베스트 프랙티스가 계속 나타날 것이다.\u003cbr\u003e여러분이 현재의 변화를 확실히 이해하고, 지평선으로 점차 떠오르고 있는 리액트의 변화를 위한 준비를 돕는 데 이 책이 도움이 되기를 바란다.\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cb\u003e[옮긴이의 말]\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e리액트(React)에 함수 컴포넌트가 도입되고, 훅hook이 도입되면서 다양한 서드파티 라이브러리가 훅을 제공하기 시작했고 훅과 함수 컴포넌트를 함께 사용하면 클래스 기반의 컴포넌트보다 훨씬 더 간결하고 합성성이 좋으면서 유지보수하기도 쉬운 앱을 만들 수 있다는 사실을 사람들이 깨닫게 되면서 훅과 함수 컴포넌트가 많이 쓰이고 있다.\u003cbr\u003e예를 들어, 최근 자주 쓰이는 리액트 상태 관리 라이브러리인 주스탠드(Zustand), 조타이(Jotai) 등은 모두 훅을 제공한다.\u003cbr\u003e따라서 이제 리액트 개발을 익히기 위해서는 훅을 다루는 방법을 체계적으로 잘 배워둘 필요가 있다.\u003cbr\u003e하지만 대부분의 리액트 책은 아직도 클래스 컴포넌트를 자세히 다루고, 훅보다는 클래스 메서드를 통한 컴포넌트 생명 주기 관리에 대해 설명하고, 리액트 훅에 대해서는 간단히 설명하고 넘어가는 경우가 많다.\u003cbr\u003e\u003cbr\u003e이 책은 리액트의 여러 가지 기능 중에서도 특히 훅을 자세히 다룬다.\u003cbr\u003e자바스크립트와 웹 개발을 어느 정도 알고, 기본적인 리액트 개발을 배운 개발자라면 이 책을 통해 훅을 더 잘 이해하고 자신만의 커스텀 훅을 작성해 프론트엔드 프로그램을 좀 더 모듈화할 수 있을 것이다.\u003cbr\u003e\u003cbr\u003e무엇보다 풍부한 그림을 통해 리액트 함수 컴포넌트가 어떻게 작동하는지, 함수 컴포넌트의 각 기능을 어떻게 훅으로 분리해 내는지 등을 시각적으로도 자세히 설명해 주기 때문에, 이를 통해 좀 더 쉽게 컴포넌트와 훅의 관계를 이해할 수 있으며 여러분이 작성한 컴포넌트에서 공통 기능을 어떻게 훅으로 분리해 낼 수 있을지에 대해서도 쉽게 이해할 수 있다.\u003cbr\u003e그리고 훅의 동작을 잘 이해하고 나면 새로운 서드파티 라이브러리가 제공하는 훅을 활용할 때도 더 쉽게 컴포넌트와 서드파티 훅의 동작이 어떤 식으로 이뤄질지 이해하고 활용할 수 있다.\u003cbr\u003e또 리액트를 잘 모르는 프론트엔드 개발자라 하더라도, 그림을 통해 클래스 컴포넌트의 여러 부분이 어떻게 함수 컴포넌트와 훅으로 바뀌는지에 대해 자세히 설명해 주고, useState 훅을 사용한 컴포넌트 상태 관리로부터 useReducer를 통해 상태를 여러 컴포넌트에 공유하는 방법, useRef 훅을 사용해 참조를 공유하는 방법 등 리액트 함수 컴포넌트를 사용해 웹 앱을 만들 때 필요한 여러 기능을 차근차근 설명해 나가기 때문에 리액트 초보자가 리액트 기초를 쌓고 싶을 때도 도움이 된다.\u003cbr\u003e이 책이 훅을 사용하는 리액트 프로그래머들에게 작게나마 도움이 되길 바란다.\u003cbr\u003e\n\u003c\/div\u003e \u003cdiv\u003e\u003c\/div\u003e \u003c\/div\u003e \u003c\/div\u003e\n\u003c\/div\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003cdiv style=\"width:95%;padding-top:20px;padding-bottom:20px\"\u003e\n\u003cdiv style=\"text-align:left;font-size:16px;font-weight:bold;padding-bottom:20px\"\u003eGOODS SPECIFICS\u003c\/div\u003e\n\u003cdiv style=\"text-align:left;font-size:14px;line-height:1.6em;\"\u003e\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e- \u003cstrong\u003e발행일 : \u003c\/strong\u003e2024년 03월 29일\u003c\/div\u003e\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e- \u003cstrong\u003e쪽수, 무게, 크기 : \u003c\/strong\u003e432쪽 | 812g | 185*240*21mm\u003c\/div\u003e\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e- \u003cstrong\u003eISBN13 : \u003c\/strong\u003e9791189909611\u003c\/div\u003e\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e- \u003cstrong\u003eISBN10 : \u003c\/strong\u003e1189909618\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003ccenter\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003cspan\u003e\u003c\/span\u003e\n\u003c\/center\u003e\n\u003c\/center\u003e","brand":"LIBRAIRIE COREENNE","offers":[{"title":"Default Title","offer_id":43893724184618,"sku":"110282","price":41.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0683\/2750\/5962\/files\/f901032e08dbc1a95e1987ab555f78c3.jpg?v=1765413453","url":"https:\/\/librairie.coreenne.fr\/ko\/products\/110282","provider":"LIBRAIRIE COREENNE","version":"1.0","type":"link"}