리액트 memo, useMemo 정리

리액트에서 컴포넌트가 재렌더링 될때, 그 컴포넌트 내에 있는 자식 컴포넌트도 재렌더링이 된다.

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


function Cart() {
  let user = useSelector((state) => { return state.data})
  let name = useSelector((state) => {return state.user})
  let dispatch = useDispatch();
  let [count, setCount] = useState(0);

  return (
    <div>
      <Child/>
      <button onClick={() => {setCount(count+1)}}> + </button>
      {name.age} 의 장바구니
      ...

예를 들어서 위의 코드가 있다고 가정할때, Cart 컴포넌트 내에서 Child 컴포넌트를 자식 컴포넌트로 사용해주었고

+버튼을 누르면 count의 state 값이 변경되도록 하였다.

사실 Child 컴포넌트는 굳이 재렌더링이 될 필요가 없는데, 결과를 출력해보면 저 재렌더링 됐다는 콘솔창이 +버튼을 누를때마다 출력 되는 것을 확인할 수 있다.

지금은 자식 컴포넌트가 가벼워서 상관 없지만, 만약에 자식 컴포넌트가 무거운 컨텐츠를 담고 있는 컴포넌트라면

성능 저하를 불러 일으킬 수 있다.

이럴때 필요한것이 memo 라는 hook 이다.

memo 를 사용하면 부모 컴포넌트는 재렌더링 되더라도 그 밑에 있는 자식 컴포넌트는 재렌더링 되지 않는다.

🔍 memo 사용법

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


function Cart() {
  ...

이런식으로 컴포넌트를 변수형으로 만들어줘서 이걸 memo( ) 로 감싸주면 부모컴포넌트가 재렌더링 되더라도

memo로 감싼 자식컴포넌트는 재렌더링 되지 않는다.

❗️ 저 memo는 기존 props와 바뀐 props를 비교하는 작업을 한다. props가 만약에 길고 복잡하다면 비효율적이니 꼭 필요할때 사용하자 ❗️

useMemo 는 useEffect()와 비슷한 역할을 한다.

import { useMemo } from "react";


function 함수(){
  return(
    반복문 10억번 돌리기
  )
}

function Cart() {

  let result = useMemo(() => {return 함수()}, [])
  
  ...
  

위의 코드에서 useMemo가 없었다면 컴포넌트가 재렌더링 될때마다 저 함수가 실행 될 것이다.

하지만 useMemo를 사용하면 컴포넌트 로드시 1회만 실행된다.

❗️ 이것도 memo 와 비슷하게 저 함수를 따로 메모리를 빼서 그곳에 저장해놓고 사용하는 것이므로 무조건 적으로 사용하면 오히려 비효율적일 수 있다. 필요할때만 사용하자 ❗️

❗️ useEffect()는 렌더링 이후에 실행이 되고 useMemo는 렌더링 과정 중에서 실행된다는 실행시점에 차이점이 있다 ❗️