react.memo ? 왜 필요하죠?

react.memo

함수형 컴포넌트를 메모이제이션 해서 이전에 렌더링한 결과를 재사용 하여 불필요한 렌더링을 방지한다,

같은 props로 렌더링 될 때 이전에 렌더링한 결과를 재사용하여 컴포넌트를 다시 렌더링하지 않는다. 

 

---

 

App 컴포넌트에 있는 count state가 업데이트가 되면 자식컴포넌트인 countview도 업데이트 된다.

 

-> React는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 같이 렌더링 되기 때문

TextCheck 컴포넌트는 리렌더링 될 필요가 없지만 App컴포넌트가 count state를 업데이트 시켜주니 같이 리렌더링!

이럴 경우 연산의 낭비가 발생한다, 굳이 자신과 관련없는 업데이트로 인해서 성능상의 문제가 생길 수 있다.

 

그렇다면 업데이트 조건을 걸어서 count가 변경될 때만 / text가 변경될때만 렌더링 되도록 설정한다

 

react.memo 로 리렌더링 되지 않았으면 하는 컴포넌트를 감사주면 리렌더링하지 않는 강화된 컴포넌트로 돌려주는 방식

 

 

import React from "react";
import { useState, useEffect, useMemo } from "react";
import styled from "styled-components";

const OptimizeTestDiv = styled.div`
  padding: 50px;
`;

const TextCheck = ({ text }) => {
  console.log(`text changed ${text}`);
  return <div>{text}</div>;
};

const CountCheck = ({ count }) => {
  console.log(`count changed ${count}`);
  return <div>{count}</div>;
};

export const OptimizeTest = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const add = () => {
    setCount(count + 1);
  };

  const change = (e) => {
    e.preventDefault();
    setText(e.target.value);
  };

  return (
    <OptimizeTestDiv>
      <div>
        <h2>count</h2>
        <CountCheck count={count} />
        <button onClick={add}>+</button>
      </div>
      <div>
        <h2>text</h2>
        <TextCheck text={text} />
        <input value={text} onChange={change} />
      </div>
    </OptimizeTestDiv>
  );
};

 

count 와 text를 확인할 수 있는 코드를 작성하고 

+버튼을 클릭하면 

count의 state가 변경됨에 따라 text 컴포넌트도 리렌더링 되는 걸 확인할 수 있다.

const TextCheck = React.memo(({ text }) => {
  console.log(`text changed ${text}`);
  return <div>{text}</div>;
});

 

TextCheck 컴포넌트를 React.memo를 사용해 강화된 컴포넌트로 만들어 주면

버튼을 눌렀을 때 count컴포넌트만 리렌더링 되는 아주 아주 재밌는 현상을 볼 수 있다. 

 

그렇다면 다음에 찾아볼것

• React.memo 와 usememo의 차이점은 뭘까
• usememo도 메모이제이션기법을 사용하는 것으로 알고있는데