메모이제이션(Memoization)

메모이제이션은 컴퓨터가 동일한 계산을 반복해야할 때 사용한다. 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산을 하지 않도록하여 속도를 높이는 기술이다. 보통 애플리케이션의 최적화를 위해 사용된다.

React에서 메모이제이션을 하는 방법
1. useMemo
2. useCallback
3. React.memo

useMemo() 사용방법_변수기억

useMemo()르르 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 이전 값을 기억해두었다 조건에 따라 재활용하여 성능을 최적화하는 용도로 사용된다.

// memoization 폴더 _ presenter 파일
import {useMemo} from 'react'

const containerPage = ()=>{
	console.log("컨테이너가 렌더링 됩니다.")

	let countLet = 0
	const [countState,setCountState] = useState(0)

// 1. useMemo로 변수 기억
	const memo = useMemo( () => {
		const aaa = Math.random()
	}, [])
	console.log(`${memo}는 더이상 안 만들어`)

	const onClickCountLet = ()=>{
		console.log(countLet+1)
		countLet += 1
	}

	const onClickCountState = ()=>{
		console.log(countState+1)
		setCountState(countState+1)
	}
	return(
		<div> 
			<div>================<div> 
			<h1>이것은 컨테이너 입니다.</h1>

			<div> 카운트(let): {countLet} </div>
			<button onClick={onClickCountLet}> 카운트(let) +1 올리기! </button>

			<div> 카운트(state): {countLet} </div>
			<button onClick={onClickCountState}> 카운트(state) +1 올리기! </button>

			<div>================<div>

		<MemoizationPresenterPage/>
		</div>
	)
}

export default containerPage

useCallback() 사용법_함수기억

useCallback을 사용하면 만들어 놨던 함수를 재사용할 수 있다. 컴포넌트가 렌더링 될 때마다 내부적으로 사용된 함수가 새롭게 생성되는 경우, 자식 커모넌트에 Props으로 새로 생성된 함수가 넘져기제 되면 불필요한 리렌더링이 일어날 수 있다.

// memoization 폴더 _ presenter 파일
import {useCallback} from 'react'

const containerPage = ()=>{
	console.log("컨테이너가 렌더링 됩니다.")

	let countLet = 0
	const [countState,setCountState] = useState(0)

// 2. useCallback으로 함수 기억하기	
// useCallback을 사용하게 되면 함수를 다시 만들지 않는다.
	const onClickCountLet = useCallback(()=>{
		console.log(countLet+1)
		countLet += 1
		},[])

// 3. usecallback의 잘못된 사용사례 _ state를 기억하기 때문에 아무리 count를 올려도 1만 찍히게 된다.
	const onClickCountState = useCallback(()=>{
		console.log(countState+1)
		setCountState(countState+1)
		},[])

// 4. 3번의 잘못된 사용사례 보완
	const onClickCountState = useCallback(()=>{
		setCountState((prev)=>prev+1)
		},[])

	return(
		<div> 
			<div>================<div> 
			<h1>이것은 컨테이너 입니다.</h1>

			<div> 카운트(let): {countLet} </div>
			<button onClick={onClickCountLet}> 카운트(let) +1 올리기! </button>

			<div> 카운트(state): {countLet} </div>
			<button onClick={onClickCountState}> 카운트(state) +1 올리기! </button>

			<div>================<div>

		<MemoizationPresenterPage/>
		</div>
	)
}

export default containerPage