2024. 06. 19 (수) 8주차 - Daily Coding - Day03

 

 

 

 

55강

최적화 기법 Part 1.

- 리액트의 동작 원리

- Virtual DOM Diffing

 

 

리액의 동작 원리

React

 

Component

- state(값 조작 가능), props (부모-자식 서로 값 전달 가능)

- context (다른 component 사이에서 값 전달 가능)

- Real DOM을 매번 업데이트가 된다

 

컴포넌트가 재실행 되는 구조 vs 브라우저가 재실행되는 구조

 

 

Virtual DOM Diffing

바뀌는 부분만 리랜더링을 시킨다

 

 

 

 

56강

 최적화 기법 Part 2.
- React.memo()

 

React.memo()

부모 컴포넌트에서 자식 컴포넌트로 props를 내려줄 때, Props가 바뀌지 않으면, re-rendering을 시켜주지 않는다

 

왜 모든 컴포넌트에 memo() 적용 안하는가?
- Memo()는 컴포넌트 함수 실행 전과 후의 snapshot을 각각 찍어서 React DOM에 저장
- 둘을 비교해서 변화가 있으면 Real DOM 업데이트
- 없으면 업데이트 하지 않음
- 이 연산을 하는데 비용이 발생한다.

Props 그대로인데 왜 re-render 일어나는가
- Props 값이 그대로인데 re-rendering이 발생되는 경우가 있다.
- Re-rendering시 함수를 props로 전달하는 경우
- 매번 재생성이 되는 새로운 함수
- 그 함수가 하는 일이 같을 뿐이다.

 

 

 

57강

최적화 기법 Part 3.
- useCallback

 

 

Object 문법 복습

오브젝트는 객체의 값을 heap 공간에 저장하고, 그 값을 참조하는 메모리 주소를 콜 스택에 저장한다.
리액트에서 같은 함수라도 컴포넌트 실행 될 때마다 매번 새로 생성이 될 수가 있다.

 

 

useCallback 안에 변하는 값이 들어간다면?
- useCallback도 하나의 클로저
- 만약에 함수가 생성이 될 때마다 바뀌어야 하는 값이 있다면, 그 변화를 useCallback에서 기억을 해 주어야 한다.
- 그러한 값들을 dependencies에 넣어주면 된다.