diff --git a/chapter03/skiende74.md b/chapter03/skiende74.md new file mode 100644 index 0000000..765bad2 --- /dev/null +++ b/chapter03/skiende74.md @@ -0,0 +1,74 @@ +# 03장: 리액트 훅 깊게 살펴보기 + +리액트를 이루는 핵심 요소들을 깊게 살펴보고, 리액트의 렌더링 과정을 이해하는 장입니다. + +
+ +- [03장: 리액트 훅 깊게 살펴보기](#03장-리액트-훅-깊게-살펴보기) + - [3.1 리액트 훅 깊게 살펴보기](#31-리액트-훅-깊게-살펴보기) + - [3.1.1 useState](#311-usestate) + - [3.1.2 useEffect](#312-useeffect) + - [3.1.3 useMemo](#313-usememo) + - [3.1.4 useCallback](#314-usecallback) + - [3.1.5 useRef](#315-useref) + - [3.1.6 useContext](#316-usecontext) + - [3.1.7 useReducer](#317-usereducer) + - [3.1.8 useImperativeHandle](#318-useimperativehandle) + - [3.1.9 useLayoutEffect](#319-uselayouteffect) + - [3.1.10 useDebugValue](#3110-usedebugvalue) + - [3.1.11 훅의 규칙](#3111-훅의-규칙) + - [3.1.12 정리](#3112-정리) + - [3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?](#32-사용자-정의-훅과-고차-컴포넌트-중-무엇을-써야-할까) + - [3.2.1 사용자 정의 훅](#321-사용자-정의-훅) + - [3.2.2 고차 컴포넌트](#322-고차-컴포넌트) + - [3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?](#323-사용자-정의-훅과-고차-컴포넌트-중-무엇을-써야-할까) + - [3.2.4 정리](#324-정리) + +
+ +## 3.1 리액트 훅 깊게 살펴보기 +함수형 컴포넌트에서는 리액트 훅을 이용하여 클래스형 컴포넌트의 실행주기 메소드의 역할을 대신할 수 있다. +### 3.1.1 useState +useState가 필요한이유. 나이브하게 변수만바꾸는 콜백이 작동하지 않는 이유 +- 1. 변수를 바꿔도, 리액트는 rerender하지 않기때문. -> 그러면 useState의 set함수만 가져와서 triggerRender();로 명명후 콜백에 넣어주면? 그래도안됨 2떄문에. +- 2. render가 된다해도, 리액트는 함수를 재실행후 업데이트한다. 그런데 재실행때 초기화구문때문에 상태가 처음으로 다시돌아가버린다. -> 클로저 사용 + +- 추가TIP : useState(인수) 인수에 원시값말고 함수를넣어주면 게으른 초기화 가능. (=딱처음실행될때만 초기화하고, 이후 업데이트시 실행되지않는다.) +무거운연산(localStorage, setStorage 접근, 배열메소드연산 등)에 사용하면 좋다. + +### 3.1.2 useEffect +useEffect는 옵저버 등으로 값을 따로 관찰하는 게 아니고, '렌더링 시'에 그냥 덤으로 값을 보고 변한게있으면 그 콜백을 실행해줌. 그러니 단순 부수효과함수에불과. +useEffect(콜백, 의존성배열) 순으로 쓰고, 의존성배열에 있는 변수가 바뀌면 콜백을 실행함. + +콜백에서는, 함수를 리턴하면 그 함수가 이어서 실행된다. (클린업함수) +### 3.1.3 useMemo + +### 3.1.4 useCallback + +### 3.1.5 useRef + +### 3.1.6 useContext + +### 3.1.7 useReducer + +### 3.1.8 useImperativeHandle + +### 3.1.9 useLayoutEffect + +### 3.1.10 useDebugValue + +### 3.1.11 훅의 규칙 + +### 3.1.12 정리 + +
+ +## 3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까? + +### 3.2.1 사용자 정의 훅 + +### 3.2.2 고차 컴포넌트 + +### 3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까? + +### 3.2.4 정리