[React] memo, useMemo 란?

1. React.memo

• memo는 함수 컴포넌트를 렌더링하는 동안 이전 렌더링 결과를 기억해, 동일한 props가 전달될 경우 이전 결과를 재사용하여 렌더링을 방지한다.
• 즉, 특정 컴포넌트로 전달되는 props가 변할때만  재렌더링을 하기 때문에 불필요한 재렌더링을 방지한다.
• useMemo  = useEffect와 비슷한 용도이지만 

import {memo, useState} from 'react'

let Child = memo( function(){
   console.log('재 렌더링 됐습니다.');
   return <div> 자식 컴포넌트 </div>
})

function Parents () {

let [count, setCount] = useState(0)
 return (
   <div>
    <Child />
    <button onClick={()=>{ setCount(count+1) }}> 확인용 버튼 </button>
   </div>
 )
}

export default Parents;

 

• memo를 사용하는 방법은 원하는 컴포넌트의 정의 부분을 감싸면 된다. (  let 컴포넌트명 = function( ){ }  형태)
• 위 예제를 보면 버튼 클릭 시 자식 컴포넌트로 전송되는 props가 변하면 자식 컴포넌트가
  재 렌더링되도록 만들어져있다.
• memo는 불 필요한 렌더링을 막을 수 있지만 무분별하게 사용하면 오히려 성능저하를 일으킬 수 있어
  반드시 필요한 곳에만 사용하도록 하자.

2. React.useMemo

• useMemo는 이전에 계산된 값을 기억하고, 해당 값이 변경되지 않은 경우 이전 값을
  재사용하도록 하는 React Hook이다.
• 즉, Memoization (기존 결과값을 어딘가 저장하여 동일한 입력이 들어오면 재활용하는 프로그래밍 기법)
  된 값을 반환한다.

import {useMemo, useState} from 'react'

function Child (){
    return "Chicken";
 }

function Parents () {
 let Chicken_value = useMemo(()=>{ Chicken() }, [];
 return (
   <div>
       <div>{Chicken_value}</div> 
   </div>
 )
}

export default Parents;

• 위 예제를 보면 컴포넌트가 렌더링 될 때 마다 Chicken_value라는 값이 초기화 된다.
• 즉, 렌더링 될 때마다 Chicken() 함수가 불필요하게 재호출된다는 것으로 Chicken()함수가
  매우 복잡한 함수인 경우 비효율적인 상황이 된다.
• useMemo를 사용하면 처음 값을 저장해 계속 재 렌더링 된다 해도 값이 달라지지
  않는한 저장된 값을 재사용하기 때문에 효율적으로 동작하게 된다.
• 추가로 useEffect 처럼 dependency도 넣을 수 있어 특정 state, props가 변할 때만 실행도 가능하다.