불필요한 재 렌더링을 막으려면 memo, useMemo

리액트에서 컴포넌트가 재 랜더링되면 안에 있는 자식 컴포넌트도 항상 함께 재랜더링된다. 이것은 리액트의 특징인데, 만약 자식컴포넌트의 랜더링 시간이 무거운 컴포넌트라면, memo 함수를 통해 재랜더링을 막아줄 수 있다. memo() import { memo, useEffect, useMemo, useState } from 'react'; let Child = memo( function (props){ useEffect(()=>{ console.log("Child") }) return child }) function Cart(){ return ( ) } memo 함수에 들어있는 함수는 꼭 필요할때만 재 랜더링 된다. 꼭 필요할 때란? Child 컴포넌트에 전달되는 props가 변할 때 하지만, 이전 pro..

2022.12.11