컴포넌트가 불필요하게 리렌더링 된다면 앱의 성능을 떨어뜨리는 주 원인이 될 것이다. 따라서 컴포넌트의 리렌더링을 방지해주는 것이 필요한데, 그것이 바로 React.memo 함수이다. React.meomo 함수는 컴포넌트 props가 바뀌지 않았다면 리렌더링을 방지해준다.

React.memo 사용법

1. React.memo(component)

- coponent: 불필요한 리렌더링 방지하고 싶은 컴포넌트

import React from "react";

function User({userName, email, onchange, onCreate}){
	return(
    <div> 
      코드
     </div>
    );
}

export default React.memo(User)

리렌더링을 방지하고 싶은 컴포넌트를 감싸준다.

const User = React.memo(function User({user, email}){
	return(
    	<div>코드</div>
    );
})

function UserList({users, onRemove}){
	return(
    <div>코드 </div>
    )
}

export default React.memo(User)

한 컴포넌트 파일에 컴포넌트가 2개 이상이라면 변수를 사용해준다.

2. React.memo(component, propsAreEqual)

• propsAreEqual : 특정 값들만 비교하는 함수