14일차 (최적화 React hook, Virtual DOM)

최적화: 불필요한 렌더링을 줄이는 방법

1. React.memo: 컴포넌트를 캐싱

2. useCallback: 함수를 캐싱

3. useMemo: value를 캐싱

 

 

최적화 필요 개념

1. 캐싱: 메모리에 임시적으로 저장해두는 행위

2. Memoization: 컴포넌트의 state 변경으로 인해 props가 변경되지 않는 한 컴포넌트가 리렌더링이 되지 않는 것

 

 

React.memo: 컴포넌트의 메모이제이션

export default React.memo(Child); <= 감싸주면 끝

 

 

useMemo: value에 대한 메모이제이션

const heavyWork = () => {
	for (let i = 0; i < 1000000000; i++) {}	
	return 100;
};

const value = useMemo(() => heavyWork(), []);
  
위와 같은 무거운 코드는 로딩이 되는데 오래 걸림 그래서 값을 저장할 장치가 필요한데,
그것이 useMemo임

--------------------------------------------------------------------------

객체 저장할 때도 마찬가지인데, 다른 버튼 때문에 렌더링이 일어났을 때,
객체가 저장된 주소값이 바뀌기 때문에 컴퓨터는 값이 바뀐거로 판단하고 렌더링이 발생함.
=> 이때 useMemo를 사용하면 됨

Const me = useMemo(() => {
	return {
		name: ‘Kim’,
		age:21,
		isAlive: isAlive ? ‘생존’ : ‘사망’
	}
}, [isAlive]};

=> isAlive에 따라 렌더링이 발생해야 하기 때문에 의존성 배열에 isAlive가 들어가야 함
But 남발하게 되면 메모리 낭비가 발생함

 

 

DOM(Document Object Model)의 기본 개념

1. 문서 전체 = document

2. 각각의 컴포넌트 = element 

3. Dom = 엘리먼트를 tree 형태로 표현한 것

4. 노드: <div> <p> 같은 것

5. Api: html 요소에 접근해서 수정할 수 있는 함수

 

 

Virtual DOM

1. 실제 DOM의 복사본

2. 객체 상태로 메모리에 저장되기 때문에 실제 DOM 조작보다 빠름

3. 리액트
    1) 화면이 갱신되기 전 구조가 담겨있는 가상돔 객체와
    2) 화면 갱신 후 구조가 담겨있는 가상돔 객체를 가짐

4. Diffing: 위의 두 구조를 비교해서 변화가 일어난 부분을 파악하는 과정

5. Reconciliation(재조정): 파악이 다 끝나면, 변경사항을 모두 모아 한 번만 적용(배치업데이트)