메모이제이션 (Memoization)

memo

memo는 react에서 제공하고 있는 기능으로 불필요한 렌더링을 줄여준다.

// memoization 폴더 _ presenter 파일
import {memo} from "react"

const MemoizationPresenterPage = ()=>{
	console.log("프리젠터가 렌더링 됩니다.")


	return(
		<div>  
			<div>================<div>
			<h1>이것은 프리젠터 입니다.</h1>
			<div>================<div>
		</div>
	)
}

export default memo(MemoizationPresenterPage)

이렇게 memo를 사용하여 state카운트를 클릭하면 프리젠터는 렌더링도 되지않고 콘솔에도 안찍히며 리액트툴에도 보이지 않는다.

useCallback(), useMemo()

자식컴포넌트는 memo를 사용해 불필요한 리렌더가 더이상 일어나지 않도록 할수 있지만, 부모 컴포넌트는 지속적으로 렌더링이 일어난다. 이때 부모컴포넌트에서도 부분적으로 렌더링이 일어나지 않아도 되는 부분이 있을 수 있다. 이러한 불필요한 값들이 지속적으로 다시 만들어지지 않도록 유지시켜주는 hooks가 바로 useMemo(),useCallback() 이다.

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

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

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

	const memo = useMemo(()=>{
	// return 값을 기억합니다.
	return 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