react useMemo 사용

useMemo

렌더링을 실행할때마다 변수를 재할당하지않고 메모리에 저장되있는 데이터를 그대로 불러와 불필요한 작업을 넘겨줌

 

useMemo 사용 전 :

export default function App(){
    const[valueOne, setValueOne] = useState(0);
    const[valueTwo, setValueTwo] = useState(0);

    const plus = () => {
        setValueOne(valueOne + 1);
        console.log("Plus")
    }

    const minus = () => {
        setValueTwo(valueTwo - 1);
        console.log("Minus")
    }

    console.log("Hello");

    return(
        <div className="Game">
            <button onClick={() => plus()}>{valueOne}</button>
            <button onClick={() => minus()}>{valueTwo}</button>
        </div>
    )

}

Plus
Hello
Minus
Hello

 

useMemo 사용 후 : 

export default function App(){
    const[valueOne, setValueOne] = useState(0);
    const[valueTwo, setValueTwo] = useState(0);

    const plus = () => {
    	setValueOne(valueOne + 1);
        console.log("Plus")
    }

    const minus = () => {
    	setValueTwo(valueTwo - 1);
        console.log("Minus")
    }

    useMemo(() => {
    	console.log("Hello")
    }, [valueOne])

    return(
        <div className="Game">
            <button onClick={() => plus()}>{valueOne}</button>
            <button onClick={() => minus()}>{valueTwo}</button>
        </div>
    )

}

Plus
Hello
Minus