React

React useMemo, useCallback

테라시아 2024. 12. 16. 15:18

1. useMemo
- 리엑트에서 컴포넌트의 성능을 최적화하는데 사용하는 훅함수이다.
- 사이드 이팩트가 발생하는 변수를 담아서 사용한다.
- memoization된 값을 반환하는 useMemo는 특정 결과값을 재사용할 때 사용한다.

2. useCallback
- memoization된 콜백 함수, 즉 이미 생성된 함수를 반환하는 리엑트의 훅함수이다.
- 실행할 문장 또는 변화를 주는 기능을 제어하기 위해 사용한다.
- 의존성 배열 값의 변화가 있을 때 콜백 함수를 새로 생성하고, 그렇지 않을 경우 콜백함수를 생성하지 않는다.

☆ Code

import React, { useCallback, useMemo, useState } from 'react';
import Amount from './Amount';

const ProductContainer = () => {
    // 스타일
    const containerStyle = {
        width : "500px",
        height : "300px",
        margin : "20 auto"
    }

    const productStyle = {
        border : "1px solid lightgray",
        padding : "30px",
        lineHeight : "1.3"
    }

    const divStyle = {
        border : "1px solid blue",
        height : "60px",
        display : "flex",
        justifyContent : "space-evenly",
        alignItems : "center",
        padding : "20px",
        marginTop : "20px"
    }

    const pStyle = {
        lineHeight : "0"
    }

    const buttonStyle = {
        width: "40px",
        height: "40px"
    }

    console.log('부모(Container) 랜더링👨‍🦳')
    const [like, setLike] = useState(0);
    const [amount, setAmount] = useState(1);
    const [coupon, setCoupon] = useState(0);

    const amountMemo = useMemo(()=>{
        console.log('amount 연산')
        return amount
    }, [amount])

    const couponMemo = useMemo(()=>{
        console.log('coupon 연산')
        return coupon
    }, [coupon])

    const props = { amount:amountMemo, coupon:couponMemo }

    const onClickToLike = () => {
        setLike(like + 1)
    }

    const onClickToAddAmount = useCallback(() => {
        setAmount(amount + 1)
    }, [amount])

    const onClickToSubtractAmount = useCallback(() => {
        setAmount(amount - 1)
    }, [amount])

    const onClickToAddCoupon = useCallback(() => {
        setCoupon(coupon + 1)
    }, [coupon])

    const onClickToSubtractCoupon = useCallback(() => {
        setCoupon(coupon - 1)
    }, [coupon])


    return (
        <div style={containerStyle}>
            <div style={productStyle}>
                <p>[책] 배워서 바로 써먹는 리엑트</p>
                <button onClick={onClickToLike}>좋아요 {like}</button>
                <Amount 
                    props={props}
                    divStyle={divStyle}
                    pStyle={pStyle}
                    buttonStyle={buttonStyle}
                    onClickToAddAmount={onClickToAddAmount}
                    onClickToSubtractAmount = {onClickToSubtractAmount}
                    onClickToAddCoupon = {onClickToAddCoupon}
                    onClickToSubtractCoupon = {onClickToSubtractCoupon}
                />
            </div>
        </div>
    );
};

export default ProductContainer;

'React' 카테고리의 다른 글

React context  (0) 2024.12.22
React 스타일 사용하기  (0) 2024.12.20
React 사이드이펙트  (0) 2024.12.16
React 라이프사이클  (1) 2024.12.15
React 레퍼런스 실습  (0) 2024.12.11