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