5주차 - 렌더링 횟수 줄이기

👉 부모가 바뀔 때 자식은 왜 꼭 렌더링 되어야만 할까? 🤔

부모 컴포넌트가 바뀔 때마다 바뀔 게 없는 컴포넌트까지 다시 렌더링하는 걸 막아주는 방법이 있으면 참 좋을 것 같죠? → 사실 있습니다! 컴포넌트를 렌더링하고, 결과를 메모리제이션해두는 거예요! React.memo를 사용해서 할 수 있어요!

 

- React.memo()

: useMemo가 렌더링 때마다 연산하지 않도록,

연산된 값을 재 사용하는 훅이라면 memo는 컴포넌트의 리렌더링을 방지하는 함수예요!

// components/Post.js

import React from "react";
import { Grid, Image, Text, Button } from "../elements";

import {history} from "../redux/configureStore";

 const Post = React.memo((props) => {
   console.log("in post");
   return (
     <React.Fragment>
       ...
     </React.Fragment>
   );
 });
...