[React] React.memo()로 성능 최적화하기

앞에서 React.memo()를 통해 성능이 빨라진 걸 확인할 수 있었다!
그럼 자세히 이 놈을 살펴보자

React.memo()란?

리액트는 컴포넌트를 렌더링 한 후에, 렌더링 된 이전 결과와 비교하여 DOM 업데이트를 수행한다.이때 react.memo()로 감싸면 react는 컴포넌트를 렌더링 한 후에 결과를 메모이징한다. 그래서 만약 props가 같다면, 메모이징된 내용을 재사용하는 것이다!

같은 props인걸 확인하면 굳이 다시 새롭게 만들 필요가 없는 것이다. 결과는 똑같을테니까!!

근데 그렇다고 해서 무조건적으로 react.memo()사용의 이점만 있는 것은 아니다 ..

props가 같을 경우에만 메모이징 내용을 재사용해서 효율적인 것이지,
props가 각각 다르면 계속 props만 비교하기에 비효율적이게 되는 것이다..

따라서, 무조건적으로 react.memo()를 사용하는 것이 아니라 profiler로 확인을 하면서 사용하면 된다!

이떄, React memo()에서 props를 비교할때 '얕은 비교'를 사용하곤 한다.
문자열,숫자일때 값을 비교하고, '깊은 비교'는 비교적 객체,배열 등 참조 자료형일때 비교한다.

const obj1={a:1, b:2};
const obj2= {a:1, b:2};

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)));