useMemo와 useCallback의 차이

react가 리렌더링을 하는 조건 3가지는?
1. state가 변경될 때
2. 부모 컴포넌트로부터 받은 props가 변경될 때
3. 부모 컴포넌트가 리렌더링 될 때

두개의 공통점과 차이점?

공통점
메모이제이션 된 값을 반환하는 것!

차이점
useMemo : 값을 메모이제이션한다.
useCallback : 함수를 메모이제이션한다.

메모이제이션이 뭔데?

• 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술.

useMemo

• 인자로 함수와 디펜던시를 넘겨받는데 이 때, 2번째 인자로 넘겨준 의존 인자 중에 하나라도 값이 변경된다면 1번째 인자인 함수를 재실행하고. 만약 디펜던시 인자를 전달하지 않는다면 매번 새롭게 계산하여 return하게 된다.

	const memo = () => {
      const memoized = useMemo(() => computeExpensiveValue(a, b), [a, b]);
    	return <>
          {memoized}
          </>
    }
    
    export default memo;

주의점 : 모든 함수를 useMemo로 감싸게 되면 이 또한 리소스 낭비가 될 수 있다, 최대한
퍼포먼스 최적화가 필요한 연상량이 많은 곳에 사용하는 것이 좋다.

useCallback

• 언제나 동일한 함수를 return 해준다!

	const memoized = useCallback(
    () => {
    	함수();
    },
    [deps]
    )

deps안에 들어간 값이 변경될 때만 새로운 객체를 생성한다.

어떻게 사용할까?

	//app.js
	function App(){
    	return(
          <div>
          	<div onClick={state,props,rerender}></div>
          	<Button/>
          </div>
        );
    }

	export default App;

	//위의 div에서 3개중 하나의 이벤트라도 발생 시 app은 재 렌더링을 하게 된다.
	// 이 때, 재 렌더링이 필요없는 button까지 재 렌더링이 된다.


	// 리렌더링을 막자!
	// React.Memo 적용방법
	function Button(){
    	return(
          <button>초기화</button>
        );
    }

	//이런식으로 감싸게 되면 부모컴포넌트가 렌더링이 되어도 Button 컴포넌트는 렌더링이 되지 않는다. 
	export default React.memo(Button);
	

문제점

만약 app.js에서 Button컴포넌트에 어떠한 함수를 props로 넘겼을 때는 어떻게 될까?

• div에서 이벤트 발생으로 인해 app.js가 리렌더링 되면 해당 컴포넌트의 모든 객체들은 다시 생성된다. 즉, 새로운 함수를 계속 생성하게 되는데 전에 있던 함수의 주소값과 다시 생성된 함수의 주소값은 다르기 때문에 props가 변경된 것으로 감지되어 memo가 적용이 안되게 된다.

해결법?

useCallback으로 함수 또한 메모이제이션을 해서 함수의 재생성도 막는 것이다!

	//app.js
	function App(){
      const [test, setTest] = useState('');
      const myCallBack = useCallback(()=>{
        setTest('초기화');
      },[]);
    	return(
          <div>
          	<div onClick={myCallBack}></div>
          	<Button onClick={myCallBack}/>
          </div>
        );
    }

	export default App;

	//위의 div에서 3개중 하나의 이벤트라도 발생 시 app은 재 렌더링을 하게 된다.
	// 이 때, 재 렌더링이 필요없는 button까지 재 렌더링이 된다.


	// 리렌더링을 막자!
	// React.memo 적용방법
	function Button(props){
    	return(
          <button onClick={props.myCallBack}>초기화</button>
        );
    }

	//이런식으로 감싸게 되면 부모컴포넌트에서 넘어온 props가 달라지지 않았다면 리렌더링이 되어도 Button 컴포넌트는 렌더링이 되지 않는다. 
	export default React.memo(Button);
	

이런저런 강의를 많이보고 내 생각을 정리한거지만.. 너무 이상하게 적은거 같기도..하다.
더 열심히 공부해서 제대로 이해하고 글을 수정하도록 해야겠다!

틀린내용이 있다면 꼭!!!!!!알려주세요