File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -665,15 +665,15 @@ componentDidcatch 두개의 인수를 받는데, 첫번째는 getDerivedStateFro
6656651 . 최초 렌더링
6666662 . 리렌더링: 최소 렌더링이 발생한 이후로 발생하는 모든 렌더링을 의미
667667
668+ 리렌더링 발생하는 경우는 다음과 같다.
668669
669- 리렌더링 발생하는 경우는 다음과 같다.
670- * 클래스형 setState가 실행되는 경우: state의 변화는 컴포넌트 상태의 변화를 의미
671- * 클래스형 forceUpdate가 실행되는 경우
672- * 함수형 useState 두 번째 배열요소 setter가 실행되는 경우
673- * 함수형 useReducer 두 번째 배열요소 dispatch가 실행되는 경우: useReducer도 useState와 마찬가지로 상태를 업데이트 함수를 배열로 제공
674- * 컴포넌트의 key props가 변경되는 경우: 리액트에서 Key는 리렌더링이 발생하는 동안 형제요소들 사이에서 동일한 요소를 식별하는 값.
675- * props가 변경되는 경우: 부모로 전달 받는 값이 props가 달라지면 자식 컴포넌트 변경이 필요
676- * 부모 컴포넌트가 렌더링될 경우
670+ - 클래스형 setState가 실행되는 경우: state의 변화는 컴포넌트 상태의 변화를 의미
671+ - 클래스형 forceUpdate가 실행되는 경우
672+ - 함수형 useState 두 번째 배열요소 setter가 실행되는 경우
673+ - 함수형 useReducer 두 번째 배열요소 dispatch가 실행되는 경우: useReducer도 useState와 마찬가지로 상태를 업데이트 함수를 배열로 제공
674+ - 컴포넌트의 key props가 변경되는 경우: 리액트에서 Key는 리렌더링이 발생하는 동안 형제요소들 사이에서 동일한 요소를 식별하는 값.
675+ - props가 변경되는 경우: 부모로 전달 받는 값이 props가 달라지면 자식 컴포넌트 변경이 필요
676+ - 부모 컴포넌트가 렌더링될 경우
677677
678678### 2.4.3 리액트의 렌더링 프로세스
679679
@@ -750,5 +750,10 @@ memo나 다른 메모제이션 방법을 사용하는 것이 이점이 있을
750750- 리액트가 구 트리와 신규 트리를 비교
751751
752752얼핏 봐도 memo를 하지 않았을 때 치러야할 잠재적인 위험비용이 더 커보인다.
753+ 정리하자면 메모제이션은 하지 않는 것 보다 메모이제이션을 했을 때 더 많은 이점을 누린다.
754+
755+ > 예제의 차이를 이해해보자
753756
754757### 2.5.3 결론 및 정리
758+
759+ 꼼꼼히 확인 하고 써보거나 쓰면서 계속 체크를 하는 둘 중 하나 방법
Original file line number Diff line number Diff line change 1+ # 03장: 리액트 훅 깊게 살펴보기
2+
3+ 리액트를 이루는 핵심 요소들을 깊게 살펴보고, 리액트의 렌더링 과정을 이해하는 장입니다.
4+
5+ <br >
6+
7+ - [ 03장: 리액트 훅 깊게 살펴보기] ( #03장-리액트-훅-깊게-살펴보기 )
8+ - [ 3.1 리액트 훅 깊게 살펴보기] ( #31-리액트-훅-깊게-살펴보기 )
9+ - [ 3.1.1 useState] ( #311-usestate )
10+ - [ 3.1.2 useEffect] ( #312-useeffect )
11+ - [ 3.1.3 useMemo] ( #313-usememo )
12+ - [ 3.1.4 useCallback] ( #314-usecallback )
13+ - [ 3.1.5 useRef] ( #315-useref )
14+ - [ 3.1.6 useContext] ( #316-usecontext )
15+ - [ 3.1.7 useReducer] ( #317-usereducer )
16+ - [ 3.1.8 useImperativeHandle] ( #318-useimperativehandle )
17+ - [ 3.1.9 useLayoutEffect] ( #319-uselayouteffect )
18+ - [ 3.1.10 useDebugValue] ( #3110-usedebugvalue )
19+ - [ 3.1.11 훅의 규칙] ( #3111-훅의-규칙 )
20+ - [ 3.1.12 정리] ( #3112-정리 )
21+ - [ 3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?] ( #32-사용자-정의-훅과-고차-컴포넌트-중-무엇을-써야-할까 )
22+ - [ 3.2.1 사용자 정의 훅] ( #321-사용자-정의-훅 )
23+ - [ 3.2.2 고차 컴포넌트] ( #322-고차-컴포넌트 )
24+ - [ 3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?] ( #323-사용자-정의-훅과-고차-컴포넌트-중-무엇을-써야-할까 )
25+ - [ 3.2.4 정리] ( #324-정리 )
26+
27+ <br >
28+
29+ ## 3.1 리액트 훅 깊게 살펴보기
30+
31+ ### 3.1.1 useState
32+
33+ ### 3.1.2 useEffect
34+
35+ ### 3.1.3 useMemo
36+
37+ ### 3.1.4 useCallback
38+
39+ ### 3.1.5 useRef
40+
41+ ### 3.1.6 useContext
42+
43+ ### 3.1.7 useReducer
44+
45+ ### 3.1.8 useImperativeHandle
46+
47+ ### 3.1.9 useLayoutEffect
48+
49+ ### 3.1.10 useDebugValue
50+
51+ ### 3.1.11 훅의 규칙
52+
53+ ### 3.1.12 정리
54+
55+ <br >
56+
57+ ## 3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?
58+
59+ ### 3.2.1 사용자 정의 훅
60+
61+ ### 3.2.2 고차 컴포넌트
62+
63+ ### 3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?
64+
65+ ### 3.2.4 정리
You can’t perform that action at this time.
0 commit comments