React.memo() ?

리액트는 먼저 컴포넌트를 렌더링한 뒤, 이전 렌더링된 결과와 비교하여 DOM 업데이트를 결정한다.

만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트한다.

리액트 memo는 고차 컴포넌트다. 컴포넌트가 React.memo() 로 래핑될 때, 리액트는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, 리액트는 메모이징된 내용을 재사용한다.

export React.memo(function MyComponent({name, age}){
    return (
        <div>
            <div>{name}:{age}</div>
        </div>
    )
})

React.Memo(MyComponent)는 새로 메모이징된 컴포넌트를 반환한다. props인 name이나, age가 변경되지 않는다면, 다음 렌더링 때 메모이징된 내용 그대로를 사용하게 된다.

props가 갖는 복잡한 객체에 대하여 얕은 비교만을 수행한다. 객체의 참조값만 비교하기 때문에 객체의 속성의 값이 변경되었다 하더라도, 같은 값으로 동작한다.

다른 비교 동작을 원한다면, 두 번째 인자도 별도의 비교 함수를 제공하면 된다.

function MyComponent(props) {
    // props를 사용하여 렌더링 
}

function areEqual(preProps, nextProps) {
    // nextProps와 preProps가 같은 값이면 ture, 아니면 false를 반환한다.
}

export default React.memo(MyComponent, areEqual);

언제 사용할까?

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

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

참고 자료

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