컴포넌트가 불필요하게 리렌더링 된다면 앱의 성능을 떨어뜨리는 주 원인이 될 것이다. 따라서 컴포넌트의 리렌더링을 방지해주는 것이 필요한데, 그것이 바로 React.memo 함수이다. React.meomo 함수는 컴포넌트 props가 바뀌지 않았다면 리렌더링을 방지해준다.
- 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개 이상이라면 변수를 사용해준다.