React.memo()

React.memo()

 

React는 먼저 컴퍼넌트를 렌더링(rendering) 한 뒤, 이전 렌더된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트한다.

 

컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다. 메모이징 한 결과를 재사용 함으로써, React에서 리렌더링을 할 때 가상 DOM에서 달라진 부분을 확인하지 않아 성능상의 이점을 누릴 수 있다.

 

언제 React.memo()를 써야할까

같은 props로 렌더링이 자주 일어나는 컴퍼넌트.

React.memo()는 함수형 컴퍼넌트에 적용되어 같은 props에 같은 렌더링 결과를 제공한다.

React.memo()를 사용하기 가장 좋은 케이스는 함수형 컴퍼넌트가 같은 props로 자주 렌더링 될거라 예상될 때이다.

일반적으로 부모 컴퍼넌트에 의해 하위 컴퍼넌트가 같은 props로 리렌더링 될 때가 있다.

 

언제 React.memo()를 사용하지 말아야 할까

만약 위에서 언급한 상황에 일치하지 않는다면 React.memo()를 사용할 필요가 없을 가능성이 높다.

경험적으로, 성능적인 이점을 얻지 못한다면 메모이제이션을 사용하지 않는것이 좋다.

---

import React,{useState} from "react";
import Child from "./mydir/Child";


function App() {
  const [fatherAge, setFatherAge] = useState(45);
  const [childAge, setChildAge] = useState(10);

  const changeFatherAge = () => { //아빠나이 변경 이벤트핸들러
    setFatherAge(fatherAge +1);
  }
  const changeChildAge = () => { //자녀나이 변경 이벤트핸들러
    setChildAge(childAge +1);
  }

  console.log('아빠 나이가 변경됨 - 렌더링');

const boxstyle = {border:'2px solid', padding:'10px'}
  return (
    <div style={boxstyle}>
      <h2>👨아빠(신기루)👨</h2>
      <span>나이: {fatherAge}</span>&nbsp;&nbsp;
      <button onClick={changeFatherAge}>아빠나이+1</button>
      <hr/>
      <Child irum={'신둘째'} nai={childAge} />
      <button onClick={changeChildAge}>자녀나이+1</button>
    </div>
  );
}

export default App;

 

import React,{memo} from "react";

const boxstyle = {border:'2px dotted green', padding:'20px'}

const Child = ({irum, nai}) => {
    console.log('자녀나이바뀜(렌더링)');

    return(
        <div style={boxstyle}>
            <h3>👧자녀1👧</h3>
            <p>이름: 신첫째</p>
            <p>나이: 13세</p>
            <h3>👦자녀2👦</h3>
            <p>이름: {irum}</p>
            <p>나이: {nai}세</p>

        </div>
    );

}

export default memo(Child);

 

export default memo(Child); 

이렇게 반환컴포넌트를 memo함수로 감싸주면 memo기능이 활성화된다.

작업 후 

 

 

---

 

https://ui.toast.com/weekly-pick/ko_20190731

React.memo() 현명하게 사용하기