✅ React.memo
✅ useCallback
✅ useMemo

React.memo

컴포넌트를 메모이제이션(기억)✅

✅리-렌더링의 발생 조건
1. 컴포넌트에서 state가 바뀌었을 때
2. 컴포넌트가 내려받은 props가 변경되었을 때
3. 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두~

✅최적화(optimization)
리렌더링이 빈번하면 좋은 것은 아니다. 이 발생 비용을 최대한 줄여야하는데 이를 ===최적화===라고 한다.(불필요한 렌더링이 발생하지 않도록!!)

✅최적화 방법
1. memo(React.memo) : 컴포넌트를 캐싱
2. useCallback : 함수를 캐싱
3. useMemo : 값을 캐싱

자식 컴포넌트들은 바뀌고 싶지 않은데 그보다 상위 컴포넌트에서 바뀌어버리면 억울하게도 바뀌어버린다. 이를 위해 최적화 방법중 하나인 memo를 알아보자

✅===메모이제이션===
캐싱 Reac.memo를 이용해서 컴포넌트를 메모리에 저장해두고 필요할 때 가져다 쓰게 된다.
=>이렇게 하면 [부모컴포넌트의 state 변경으로 인해 props가 변경이 일어나지 않은 한]!! 컴포넌트는 렌더링 되지 않는다

방법

자식 컴포넌트들에게 React.memo(컴포넌트 명)를 붙여주면 끝!

export default React.memo(Box1); ----------->export default React.memo(Box1)

![[Pasted image 20230211033618.png]]
React.memo를 하기 전 카운트를 누르면 카운트 뿐만아니라 Box1 Box2 Box3이 전부 호출됨
=> 메모이제이션 후 박스들을 호출에서 제외할 수 있었따

---

useCallback

인자로 들어오는 함수 자체를 메모이제이션✅

함수형 컴포넌트를 사용했기 때문에 다시 리렌더링이 일어났다
-->app.jsx
함수도 자바스크립트에서 객체의 한 종류다 규모가 있기에 저장될 때 메모리에 직접적으로 저장되는게 아니라 별도에 공간에 저장되고 그 별도의 공간을 바라보고있는 그 주솟값을 저장한다.
initCount는 새로운 주소값을 갖게 되는것 props로 내려줄 때 새로운 주솟값을 내려주기때문에 Box1입장에서는 props가 바뀌었구나 하고 다시 렌더링이 된다.
그러니까 박스는 props가 바꼈다고 인식을 해서 렌더링하는거야 왜? 주솟값이 바껴서 들어왔기 때문에 왜? initCout가 새로운 주솟값을 갖게 되어 그것을 props로 내려줬기 때문에 왜?
==> 그래서 함수 자체를 메모이제이션 하는 것이 필요하다
그 함수 초기화함수)를 별도 메모리 공간에 저장해놓고 특정조건이 아니면 아예 변경 되지 않도록 막는게 중요하겠따 useCallbakc적용
목적 : 카운트가 됐을 때 박스1이 렌더링 되지 않게 하는것이 목적

특정 state가 변경될 때 처음에 저장했던 콜백함수가 갱신되야 되면 이 의존성 배열에 그 해당 state를 넣어야만 합니다 그렇게 때문의 이 의존성 배열에 해당 state를 넣어놔야한다.

app.jsx가 initCount함수를 메모리 공간에 그대로 저장함

---

useMemo

value에 대한 메모이제이션(함수가 리턴하는 값, 값 자체)
사용법

const value = 반환할 함수()

const value = useMeomo(()=> {      ------> <<useMemo사용했을 때>>
	return 반환할 함수()
},[]);

의존성배열(dependency Array)의 값이 변경 될 때만 반환할 함숙()가 호출된다.
그 외의 경우는 memorization(기억)해놨던 값을 가져오기만 함

무거운 작업 ===for(let i = 0; i < 100000; i++)=== --.>===return 100===
이 같은 경우

function HeavyButton() {
const [count, setCount] = useState(0);
const heavyWork =() => {
for(let i = 0; i < 1000000; i++) {}
	return
}
const value = useMemo(() => heavyWork(), [])
}
return (
	버튼이있다. 이하 생략
)

만약 const value = heavyWork 이대로 썼다면 버튼을 눌렀을 경우 숫자가 바로바로count 되지 않고 조금 delay가 된다,
[const value = useMemo(() => heavyWork(), []) 씀으로써 값을 메모리에 따로 저장해서 기억?]

useMemo는 많이 사용하면 성능이 악화되므로 필요할 때만 사용할 것