React.memo

React.memo는 React에서 제공하는 고차 컴포넌트이다. 고차 컴포넌트란? 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환해준다. 일반의 컴포넌트가 React.momo를 거치면 최적화된 컴포넌트를 반환해준다.

 

렌더링이 되어야 할 상황에 놓일 때 마다 Props Check를 통해서 자신이 받는 props에 변화가 있는지 확인한다. props에 변화가 있다면 새로 렌더링 되는 것이 아닌, 기존에 렌더링 된 내용을 재사용한다.

 

const Student = ({ name, age, address }) => {
	return (
    	<div>
        	<h1>{name}</h1>
            <span>{age}</span>
            <span>{address}</span>
        </div>
    );
};

여기서 Props Check를 하면 name, age, address에 변화가 있으면 재사용하면서 렌더링을 하게 되고 변하지 않으면 렌더링을 하지 않게 된다. 

 

React.memo에서 memo는 Memoization을 의미한다. Memoization이란 이미 계산해 놓은 값을 저장해놓고 필요할 때 꺼내서 사용하는 것을 의미한다. 

 

React.memo는 렌더링 횟수를 감소시킬수 있지만 컴포넌트를 메모리에 저장시키기 때문에 무분별하게 사용되면 오히려 성능이 저하될 수 있다. 컴포넌트가 같은 props로 자주 렌더링 될 때나 컴포넌트가 렌더링 될때마다 복잡한 로직을 처리해야 할 때 사용하는 것이 좋다.

 

React.memo는 오직 props 변화에만 의존하는 최적화 방법이다. useState, useContext, useReducer등의 상태 훅을 사용한다면 재렌더링이 된다.

 

export default memo(Child);

 

사용 방법은 자식 컴포넌트를 export할 때 momo로 감싸주면 된다.

 

하지만 props에 객체로 전달하게되면 여전히 렌더링을 하게 된다. object는 메모리 주소가 변수 안에 저장되어있기 때문이다. 함수를 호출하게 되면 함수 안의 모든 변수들이 초기화가 되어 객체 변수를 다시 불러오게 된다. 그렇게 되면 새로운 메모리 주소를 불러오게 되어 다른 값으로 인식하게 된다. 이때 useMemo를 사용해서 객체를 넣어주면 된다.

 

또한 props를 함수로 전달하게되면 위와 같이 렌더링을 하게된다. 객체와 같은 이유이며 이때는 useEffect를 사용하면 된다. React.memo는 이렇게 useMemo, useEffect와 함께 사용하면 최적화에 매우 효율적이다.