[React.js] 최상위 API React.memo

React.memo는 useMemo Callback과 동일한 개념인데, 이제 Hook이 아니라 Component를 감싸는 API다.

React.memo를 사용하면 감싸고 있는 Component의 Props가 바뀌면 다시 Rendering 하지 않는다.

 

사용방법은 매우 간단하다.

 

MemoComponent.tsx

import React from "react"
 
interface IMemoComponentProps {
    message: string
}
 
function MemoComponent({message}: IMemoComponentProps) {
    console.log("Memo Component!")
 
    return (
        <>
        <span>{message}</span>
        </>
    )
}
 
export default React.memo(MemoComponent);

export default할 때 React.memo로 감싸준다.

 

App.tsx

import React, { createContext, useState, useEffect } from 'react';
import MemoComponent from "./MemoComponent"
 
export const CounterContext = createContext({
  parent: "App"
});
 
function App() {
  const [memoMessage, setMemoMessage] = useState<string>("")
  const [tempState, setTempState] = useState<boolean>(true)
  
  useEffect(() => {
    setTimeout(() => {
      console.log("MemoMessage")
      setMemoMessage("TEST")
    }, 3000)
  
    setTimeout(() => {
      console.log("tempState")
      setTempState(!tempState)
    }, 1000)
  
  }, [])
 
  return (
    <>
      <MemoComponent message={memoMessage}/>
    </>
  )
}
 
export default App;

위처럼 테스트 코드를 작성해보면, App이 켜지고 1초 후에 tempState는 변경하지만 MemoComponent에 있는 console.log();는 실행되지 않고(Rendering이 되지 않았다는 뜻) 3초 후에는 console.log()가 발동된다.

 

위처럼 불필요한 Rendering을 줄일 수 있다.