들어가며
머리말과 저자목록
Notion 링크, PDF 파일 및 QR 코드
Chapter 1. Hook
1.1 Hook이란?
1.1.1 Hook의 정의
1.1.2 Hook의 종류
1.2 Hook의 특징
1.2.1 이전 버전과의 호환성
1.2.2 선택적 사용
1.2.3 Class와 호환성
1.3 Hook의 사용 규칙
1.3.1 오직 React 함수 내에서 Hook을 호출해야 합니다.
1.3.2 최상위(at the top level)에서만 Hook을 호출해야 하고 훅을 호출하는 순서는 항상 같아야 합니다.
1.4 Hook을 사용하는 이유
1.4.1 Hook을 통해 컴포넌트 간 상태 로직을 재사용 할 수 있습니다.
1.4.2 Hook은 구조를 이해하기 쉽습니다.
1.4.3 Hook은 클래스 컴포넌트 없이 React를 사용 가능하게 만듭니다
Chapter 2. useState
2.1 useState란?
2.1.1 state
2.1.2 setState
2.1.3 useState
2.2 useState를 사용하는 이유
2.2.1 일반 변수를 사용했을 때
2.2.2 State 변수를 사용했을 때
2.2.3 React가 useState 사용을 권장하는 이유
2.3 useState 사용해보기
2.3.1 import 하기
2.3.2 useState 선언하기
2.3.3 state 가져오기, 갱신하기
2.3.4 (실습) useState의 작동방식
2.4 (실습) useState 응용해보기
2.4.1 useState와 이벤트를 사용한 로그인 폼 만들어보기
2.4.2 최종 코드
Chapter 3. useEffect
3.1 useEffect란?
3.1.1 useEffect의 등장 배경
3.1.2 useEffect에 대한 설명과 동작방식
3.2 useEffect 사용해보기
3.2.1 리렌더링될 때마다 동작하는 useEffect
3.2.2 마운트 시점에서만 동작하는 useEffect
3.2.3 특정 값이 업데이트 될 때 동작하는 useEffect
3.2.4 clean-up 하는 useEffect
Chapter 4. useContext
4.1 useContext란?
4.1.1. 컨텍스트 정의
4.1.2. Context 종류
4.2 useContext 기본 사용법
4.2.1. 기존의 contextAPI를 사용하는 방법
4.2.2. useContext 사용하는 방법
4.2.3. useState 상태값 넘겨주기
4.3. Props Drilling
4.3.1. 예제 설명
4.3.2. src 폴더 구조
4.3.3. 컴포넌트 구조
4.3.4. 각 파일에 대한 설명
4.3.5. 실행화면
4.3.6. Props Drilling의 문제점
4.4 Context API와 useContext Hook을 사용해 props drilling 해결하기
4.4.1. src 폴더 구조
4.4.2. 컴포넌트 구조
4.4.3. 각 파일에 대한 설명
4.4.4. 정리
Chapter 5. useReducer
5.1 useReducer란?
5.1.1. useReducer 기본 구조
5.2 reducer 함수란?
5.2.1 action과 type
5.2.2 reducer 함수의 조건 - 순수 함수
5.2.3 reducer 함수의 조건 - 상태 변이(state mutation) 지양
5.3 useReducer 사용해보기
5.3.1 예제 설명
5.3.2 src 폴더 구조
5.3.3 useState로 구현된 로그인 기능
5.3.4 useReducer로 구현한 로그인 기능
5.3.5 컴포넌트의 분리, 그리고 props drilling
5.4 useReducer와 useContext 함께 사용하기
5.4.1 useReducer의 문제점
5.4.2 props drilling 해결하기
Chapter 6. useMemo
6.1 useMemo 개요
6.1.1 메모이제이션(Memoization)이란?
6.1.2 함수형 컴포넌트
6.2 useMemo의 기본 구조
6.2.1 useEffect 와 useMemo의 차이
6.3 useMemo 사용해보기
6.3.1 (실습1) useMemo 사용해보기
6.3.2 (실습2) useMemo 사용해보기
Chapter 7. useCallback
7.1 useCallback이란?
7.1.1 기본 구조
7.1.2 useMemo와의 비교
7.2 useCallback을 사용하는 이유
7.2.1 useCallback으로 이벤트 핸들러 함수 재사용하기
7.2.2 useCallback으로 참조 동일성 문제 해결하기
7.3. (실습1) useCallback 사용해보기
7.3.1 useCallback을 사용하지 않았을 때
7.3.2 useCallback을 사용할 때
7.4. (실습2) useCallback 사용해 보기
7.4.1 React.memo와 useCallback을 사용하지 않았을 때
7.4.2 React.memo와 useCallback을 사용할 때
7.4.3 최종 코드
Chapter 8. useRef
8.1 useRef란?
8.1.1 useRef의 사용 목적
8.2 useRef vs useState vs 일반변수
8.2.1 useRef와 useState의 차이
8.2.2 useRef 사용해보기
8.3 useRef와 DOM
8.3.1 useRef로 특정한 DOM 선택
8.3.2 useRef로 DOM 선택 후 사용 시 주의 사항
8.4 (실습) useRef 응용해보기
8.4.1 useRef를 사용하여 focus 관리하기
Chapter 9. useImperativeHandle
9.1 useImperativeHandle이란?
9.1.1 기본 구조
9.1.2 사용시 주의점
9.2 기본 사용법
9.2.1 React.forwardRef
9.2.2 useImperativeHandle 사용하기
9.3 실용 예제
9.3.1 useImperativeHandle을 사용하지 않은 실용 예제
9.3.2 useImperativeHandle을 사용한 실용 예제
Chapter 10. useLayoutEffect
10.1 useLayoutEffect란?
10.1.1 useLayoutEffect 개념
10.2 useLayoutEffect를 사용하는 이유
10.2.1 useLayoutEffect 사용 시 주의사항
10.3 useEffect vs useLayoutEffect
10.3.1 useEffect와 useLayoutEffect의 차이점
10.3.2 (실습1) useLayoutEffect와 useEffect 비교
10.3.3 (실습2) useLayoutEffect와 useEffect 비교
Chapter 11. useDebugValue
11.1 useDebugValue란?
11.2 React Developer Tools 설치방법 및 사용방법
11.2.1 크롬 브라우저 확장 프로그램 설치
11.2.2 독립 실행형 프로그램 설치
11.2.3 React Developer Tools 사용방법
11.3 커스텀 훅 디버깅하기
11.4 useDebugValue 주의사항 & 개선사항
11.4.1 useDebugValue 의 사용시 주의사항
11.4.2 useDebugValue를 더 효율적으로 사용하기
Chapter 12. useDeferredValue
12.1. useDeferredValue란?
12.1.1. useDeferredValue 기본 설명
12.1.2 useDeferredValue 사용법
12.2 debounce
12.2.1 debounce란?
12.2.2 debounce 사용해보기
12.3 throttle
12.3.1 throttle이란?
12.3.2 throttle 사용해보기
12.4 useDeferredValue 사용해보기
Chapter 13. useTransition
13.1 useTransition 개요
13.1.1 useTransition 이란?
13.1.2 useTransition 을 사용하는 이유?
13.2 useTransition 기본 사용법
13.2.1 useTransition의 기본 구조
13.2.2 useTransiton의 작동 방식
13.2.3 useTransiton의 주의사항
13.3 (실습1) useTransition을 통해 검색 미리보기 UX 개선하기
13.3.1 useTransition을 사용하지 않았을 경우
13.3.2 useTransition을 적용해보기
13.4 (실습2) useTransition을 통해 페이지 이동 UX 개선하기
13.4.1 useTransition을 사용하지 않았을 경우
13.4.2 useTransition 적용해보기
Chapter 14. useId
14.1 useId란?
14.1.1 useId 개념과 기본구조
14.1.2 useId를 사용하는 이유
14.1.3. useId 사용 시 주의할 점
14.2 useId 실용 예제
14.2.1. useId 기본 사용법
14.2.2 (실습 1) 컴포넌트 재사용 시 다른 아이디 생성하기
14.2.3 (실습 2) 한 컴포넌트 내에서 다른 아이디 생성하기
Chapter 15. Custom Hook
15.1 커스텀 훅(Custom Hook)이란?
15.2 커스텀 훅 주의사항
15.2.1 주의사항
15.2.2 고려사항
15.3 커스텀 훅 사용해보기
15.3.1 커스텀 훅 사용방법
15.3.2 간단한 커스텀 훅 만들어보기
15.4 (실습1) useTitle
15.4.1 Document Title
15.4.2 useTitle 적용하기
15.5 (실습2) useClick
15.5.1 useClick Hook 이란?
15.5.2 useClick은 왜 사용할까요?
15.5.3 useClick 적용하기
15.6 (실습3) useToggle
15.6.1 useToggle Hook이란?
15.6.2 useToggle 적용하기
15.6.3 (예제 1) useToggle Hook을 활용하여 체크박스 만들기
15.6.4 (예제 2) useToggle Hook을 활용하여 리스트 출력하기
15.7 (실습4) useAxios
15.7.1 axios란?
15.7.2 axios 요청
15.7.3 useAxios 적용하기
Chapter 16. Hook Library
16.1 훅 라이브러리란?
16.2 React Hook Form
16.2.1 React Hook Form이란?
16.2.2 React Hook Form 설치방법
16.2.3 React Hook Form 사용하여 validation 하기
16.2.4 React Hook Form 사용하여 회원가입 validation 하기
16.3 react-router-dom에서 지원하는 Hook
16.3.1 react-router-dom이란?
16.3.2 react-router-dom 설치방법
16.3.3 useLocation
16.3.4 useNavigate
16.3.5 useParams
16.3.6 장단점
16.4. React Query에서 지원하는 Hook
16.4.1 React Query이란?
16.4.2 React Query 설치방법
16.4.3 React Query 셋팅 및 사용방법
16.4.4 useQuery
16.4.4 useMutation
16.5. react-use
16.5.1 react-use란?
16.5.2 react-use 설치 방법
16.5.3 useUpdateEffect
16.5.4 useDebounce
16.5.5 useLocalStorage
16.5.6 useClickAway
16.6 자신이 만든 커스텀 훅으로 훅 라이브러리 배포하는 방법