React useMemo & useCallback

함수형 컴포넌트는 랜더링 → component 함수 호출 → 모든 내부 변수 초기화의 순서를 거친다.

컴포넌트가 랜더링 될 때마다 value 라는 변수가 초기화된다.

useMemo를 사용하면 랜더링 → component 함수 호출 → Memoize 된 함수를 재사용하는 동작 순서를 거친다.

memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그램 기법을 말한다.

 

object는 객체 타입으로 저장될 때 참조 주소값을 저장한다.

const location = { country: isKorea ? '한국' : '미국' }; 육안으로 보면 똑같지만 객체 타입으로 메모리에 저장될 때의 주소는 완전히 달라서 useMemo 를 사용하지 않으면 계속 rendering 될 수 있다.

React rerendering 하는 조건
- props가 변경되었을 때
- state가 변경되었을 때
- 부모 컴포넌트가 rendering 되었을 때
- forceUpdate() 를 실행하였을 때

useEffect, useCallback, useMemo의 모든 종속성은 참조 동일성을 확인한다.
useEffect() 함수는 두 번째 인자로 넘어온 의존 배열이 변경될 때만 첫 번째 인자로 넘어온 함수를 호출한다.

import React, {useEffect, useMemo, useState} from 'react';
 
const UseMemoEx = () => {
    const [number, setNumber] = useState(0);
    const [isKorea, setIsKorea] = useState(true);
 
    const location = useMemo(() => {
        return {
            country: isKorea ? '한국' : '미국'
        }
    }, [isKorea]);
 
    useEffect(() => {
        console.log('useEffect... 호출');
    }, [location]);
 
    return (
        <div>
            <h3>하루에 몇 끼 먹어요?</h3>
            <input
                type="number"
                value={number}
                onChange={(e) => setNumber(e.target.value)}
            />
            <p> 하루 식사 횟수 : {number}</p>
 
            <h3>어느 나라에 있어요?</h3>
            <p>나라: {location.country}</p>
            <button onClick={() => setIsKorea(!isKorea)}>토글</button>
        </div>
    );
};
 
export default UseMemoEx;

 

자식 컴포넌트에서 useEffect가 반복적으로 트리거되는 것을 막고 싶을 때 사용하자.

 

useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.

The useCallback and useMemo Hooks are similar. 

The main difference is that useMemo returns a memoized value and useCallback returns a memoized function.

The React useCallback Hook returns a memoized callback function.
The useCallback Hook only runs when one of its dependencies update.

useCallback(fn, deps)
의존성 배열인 deps에 변경을 감지해야할 값을 넣어주게 되면 deps가 변경될 때마다 콜백 함수를 새로 생성한다.

 

 

let x = 3;
let y = 4;
 
// 자바스크립트에서 함수는 객체로 취급한다.
const add1 = (x, y) => x + y;
const add2 = (x, y) => x + y;
 
console.log(add1(x,y)); // 결과 7
console.log(add2(x,y)); // 결과 7
console.log(add1 === add2); // 참조변수 비교 결과 : false

 

 

 
import React, {useCallback, useState} from 'react';
 
function Light({ room, on, toggle }) {
    console.log({ room, on });
    return (
        <button onClick={toggle}>
            {room} {on ? "💡" : "⬛"}
        </button>
    );
}
 
Light = React.memo(Light);
 
const UseCallbackEx = () => {
    const [bedroom, setBedroom] = useState(false);
    const [kitchen, setKitchen] = useState(false);
    const [bath, setBath] = useState(false);
 
    const toggleBedroom = useCallback(() =>
        setBedroom(!bedroom), [bedroom]
    );
    const toggleKitchen = useCallback(() =>
        setKitchen(!kitchen), [kitchen]
    );
    const toggleBath = useCallback(() =>
        setBath(!bath), [bath]
    );
 
    return (
        <div>
            <Light room="주방" on={kitchen} toggle={toggleKitchen} />
            <Light room="욕실" on={bath} toggle={toggleBath} />
            <Light room="침실" on={bedroom} toggle={toggleBedroom} />
        </div>
    );
};
 
export default UseCallbackEx;

참조 : https://www.daleseo.com/react-hooks-use-callback/

React Hooks: useCallback 사용법