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 |