memoization

 

useMemo

import { useState , useMemo} from 'react';

function sum(persons){
    return person.map((person) => person.age).reduce((l,r) => l+r , 0)
}
export default function Test2() {
    const [value, setValue] = useState('');
        const [persons] = usetState([
            { name: "Mark", age : 39 },
            { name: "Hanna", age : 29 }
        ]);

        const count = useMemo(() => {
                return sum(persons);
        }, [persons]); 
//dependency list를 인자로 받는다. 
//persons가 변했을 때만 실행하겠다.
//person의 의존적이다.

        const click = useCallback(()=> {
            //최초의 값만 넣고싶어 .. 계속 갱신 xx 하고 싶다 라면? >>
            console.log(value);
        }, []); // 이렇게 생성하기 , 이전 함수내용 가지고 있음 
    return (
              <div>
                        <input value = {value} onChange={change} />
            <p>{count}</p>
                        <button onClick={click}>click</button>
        </div>
    );
        function change(e){
                setValue(e.target.value);
        }
}

다른 동작을 할때마다 render가 새로 된다. > sum함수가 불필요하게 실행된다. person에 의존적으로 계산이 된다.

person이 같으면 굳이 리렌더링 될 필요 없음 .. 이걸 해결하기 위해 useMemo를 사용한다.

동일한 props로 렌더링 할때 사용 / memo를 사용하면 react는 컴포넌트 렌더링하지 않고 마지막으로 렌더링 된 결과를 재사용한다.

---

ex> *****

list하나 추가하는 기능을 만들면 모든 리스트가 리렌더링되는데 , 하나씩 추가하게만 해주는 동작이라면 useMemo를 쓰면됨..

그런데 내가 props로 함수를전달한다면? 새로 렌더링 될때마다 새로운 함수가 만들어진다. useMemo를 써도 계속 모두 리렌더링 된다. → useCallback사용하기!

 

---

useCallback

최초의 값만 넣고싶어 .. 계속 갱신 xx 하고 싶다 라면? }, []); 이 내용 추가해주면 이전 함수내용 가지고있을 수 있다.

useCallback은 안에 들어있는 함수를 언제 세팅해줄것인지? [] 이 dependency list에 의존적으로 결정할 수 있음

언제 사용함??

 >>> 컴포넌트 최적화할때 사용한다.

 

useMemo vs useCallback

useMemo : 메모이제이션 된 값을 반환(함수를 시행시킨다.)

useCallback : 메모이제이션 된 함수를 반환 , 함수컴포넌트에서 불필요하게 함수를 업데이트 하는 것을 방지해준다.