후발대 강의 memoization - React.memo, useCallback, useMemo (최적화)

리액트에서 리렌더링 될 때

1. state 변경될 때

2. props가 변경되었을 때 

3. 부모 컴포넌트가 변경되면 자식 컴포넌트도 같이 리렌더링 

 

memoiztion 종류 3가지

1. React.memo는 컴포넌트를 캐싱(메모이제이션)

2. useCallback은 함수를 캐싱(메모이제이션) 

3. useMemo는 값을 캐싱(메모이제이션) 어떤 값? 객체, 배열, 함수

(변화가 없을 시 캐시로 저장해주었다가 같이 리렌더링 되지 않고 캐시에서 가져온다.)

 

React.memo

import {memo} from "react"

export deafault memo (Box1)

useCallback

memo 해놓은 컴포넌트가 다시 렌더링 되었다... 왜? 프롭스가 바껴서 ,

근데 함수 자체는 변하지 않았는데?  왜? 함수는 객체의 한 종류이다. 주소가 중요해요. 리렌더링하면서 새로운 주소에 함수를 저장한다.그러면 새로운 함수라고 받아들인다. 그래서 함수를 캐싱해놓고 리렌도 될 때  새로운 주소를 할당하지 않도록 한다.  

 

const initCount = useCallback(()=>{



},[])

 

의존성 배열에 아무것도 없으면 최초 렌더링 값만 불러오겠다는 뜻.

의존성 배열에 넣어주면 그 값이 바뀔 때 그 함수의 메모도 다시 해준다.

 

useMemo

값을 불러오는 과정은 되게 복잡한데 같은 값을 가져오는 거라면, 그 불러오는 과정에 useMemo를 해주고 값을 캐싱해두고 쓴다. 

 

const heavyWork = () => {

for (let i = 0; i < 20000000; i ++){

}

return 100;

}

const value = useMemo ( () => heavyWork(), [])

 

오늘의 팁

div도 가능하지만 의미있는 태그 써주는 것이 좋다 (seo가  잘 된다.)

header

footer

nav