CODING/[React]
011. React.memo 최적화
ANX1Z3R0
2020. 11. 20. 11:12
이 또한 memoization의 일환으로, 컴포넌트에 전달되는 동일한 props가 전달됐을 때, 저장된 컴포넌트를 불러오도록 하는 고차 컴포넌트이다. 따라서 props가 거의 항상 변경되는 컴포넌트에는 갱신값 비교에서 계속 false가 될 것이므로, 오히려 비효율적이다.(props값 비교에 더 많은 자원을 사용하게 된다.)
사용법은 간단하다.
그냥 함수를 감싸주면 된다.
const hi = "name";
const hello = () => {
console.log(`hi, ${hi}`);
};
위와 같은 함수를
const hi = "name";
const hello = React.memo(() => {
console.log(`hi, ${hi}`);
})
하면 되고,
이게 컴포넌트 단위일때는
export default React.memo(foo);
하면 된다.