[DAY - 76] useMemo, useCallback

• useMemo
• useCallback

 

1) useMemo

useMemo의 Memo는 Memoization이다. useEffect와 비슷하게 의존성이 변경되었을 때 변수, 함수, 값 등을 다시 생성하고 계산한다.

useEffect와 마찬가지로 콜백함수, 의존성을 입력받는다.

 

    const [cnt, setCnt] = useState(1)
    const fun = useMemo (() => {
        return <Test2sub cnt={cnt} />
    },[cnt])

    return (
        <div>
            <h2>useMemo : return 기억</h2>
            <h1>count : {cnt}</h1>
            <button onClick={() => setCnt(cnt + 1)}>+</button>
            <hr />
            {fun}
        </div>
    );

const Test2sub = ({cnt}) => {
    return (
        <div>
            <h3>sub : {cnt}</h3>
        </div>
    );
};

 

Test2 컴포넌트와 sub 컴포넌트가 있을 때 버튼을 누르게 되면 cnt가 1씩 증가한다.

 

useMemo

cnt를 의존성의로 지정해 두었기 때문에 cnt값이 변할 때마다 sub 컴포넌트가 받는 cnt도 변하기 때문에 동일하게 증가한다.

 

 

2) useCallback

useMemo의 경우 Memoization된 값을 반환하지만 useCallback은 Memoization 된 함수를 반환한다.

const Test7 = () => {
    const [cnt1, setCnt1] = useState(1)
    const [cnt2, setCnt2] = useState(10)
    const [cnt3, setCnt3] = useState(100)

    const onUp1 = useCallback(() => {
        setCnt1(cnt1 + 1)
    }, [cnt1])

    const onUp2 = useCallback(() => {
        setCnt2(cnt2 + 1)
    }, [cnt2])

    const onUp3 = useCallback(() => {
        setCnt3(cnt3 + 1)
    }, [cnt3])

    return (
        <div>
            <h2>count1 : {cnt1}</h2>
            <Test7sub text="증가 1" num={cnt1} />
            <button onClick={onUp1}>증가</button>
            <h2>count2 : {cnt2}</h2>
            <Test7sub text="증가 2" num={cnt2} />
            <button onClick={onUp2}>증가</button>
            <h2>count3 : {cnt3}</h2>
            <Test7sub text="증가 3" num={cnt3} />
            <button onClick={onUp3}>증가</button>
        </div>
    );
};

import React from 'react';

const Test7sub = ({ text, num }) => {
    console.log(text, num);
    return (
        <div style={{ border: '1px solid black', margin: 30, fontSize: 20 }}>
            출력 : {text} / {num}
        </div>
    );
};

export default React.memo(Test7sub);

 

추가로 export default React.memo를 넣게되면 변하는 부분만 실행이 되기 때문에 console.log의 출력이 아래와 같이 된다.

 

btn1

btn2

btn3