가끔 개발을 하다 보면 원치않는 리랜더링이 계속적으로 발생해 화면 상에서 문제가 있을 때가 있다. 부모 컴포넌트에 있는 state 의 변화에 의해 자식 컴포넌트의 리랜더링 이라거나 하는 경우 말이다.
머리 한구석에서 아! memoization 이라고 기억하고 있는 기술이 있었던것 같은데.. 하면서 찾아본 React.memo 에 대해 이해한 내용을 적어보려한다!
Memoization
- 이전값을 메모리에 저장해 빠른 처리를 가능하게 하는 기술
- 결과를 캐싱하여 저장하고 있다가 다음 작업에 들어오는 결과값이 같다면 랜더링을 하지 않음
React에서 메모이제이션을 가능하게 해주는 방법은 React.memo,useCallback, useMemo가 있지만 그중에 React.memo를 알아봤다.
- 이유는 useCallback, useMemo는 찾아보니 복잡한 계산 결과 등의 처리를 할 때 쓰인다고 나와있었는데 아무리생각해도 나는 그런 이유때문이 아닌것 같다 고 생각해서..? 이다.
React.memo
React.memo는 리액트에서 memoizing을 위해 사용되는 React HOC(Higher-order components)이다.
HOC(High Order Component)즉 고차 컴포넌트는 '컴포넌트 로직 재사용'을 위한 패턴입니다. 현재는 Hooks 를 사용한 로직 재사용이 더 일반적이지만 로직 재사용만을 아닌 컴포넌트 자체에서 조건부 랜더링을 하게 하기 위해서는 HOC가 더 적합하다.
React.memo는 부모컴포넌트에서 넘어온 props를 기억하고 있다가 부모컴포넌트가 리랜더링 된다고 해도 이전 props의 값과 같다면 해당 React.memo로 감싸진 자식 컴포넌트의 경우 다시 랜더링을 하지 않는다. (자기자신의 state값 변화시에는 리랜더링 O)
여기서 알아야할 점은!
React.memo는 props 비교시 얕은 비교 를 진행한다. 원시 값의 경우는 같은 값을 갖는지 확인하고 참조값은 같은 주소 값을 가지고 있는 지 확인한다.결론적으로 memo는 props의 값이 원시값일 때만 유효하고 참조값일 때는 유효하지 않는다.
원시값 : 원시값은 문자열, 숫자, 불리언 등과 같이 값 자체가 비교 가능한 데이터. 예를 들어, string, number, boolean 등의 데이터
참조값 : 참조값은 객체나 배열과 같이 메모리 상에서 독립적인 객체로 존재하는 데이터. 예를 들어, object, array 등의 데이터
이는 리액트에서 객체를 비교할 때는 "얕은 비교"를 하기 때문이다
function sumFactory() {
return (a, b) => a + b;
}
const sum1 = sumFactory();
const sum2 = sumFactory();
console.log(sum1 === sum2); // => false위는 얕은 비교의 예시다. 주소(sum1, sum2)에 의한 비교지 각각의 내용물은 비교하지 않는다.
비교함수
보통 서버와 통신해서 axios 등을 통해 서버에서 가져온 값 랜더링 하는 경우 response로 들어오는 값은 보통 객체나 배열형태이다. 즉 참조값인 셈이다. 이럴때는 사용을 못하는걸까? 대답은 아니다! 가능하다!
React.memo의 두번째 인자로 비교함수를 싣어서 사용하면 해당 HOC 가 리랜더링 될 때마다 해당 비교함수를 통해서 이전 props 값과 비교해준다.
const areEqual = (prevProp, nextProp) => {
return prevProp.obj.count === nextProp.obj.count;
};
const MyComponent = React.memo(({ obj }) => {
// 렌더링 로직
}, areEqual);React.memo에 대한 내용을 찾아보면서 항상 모든 블로그 등에 나오는 마지막 말이 있다. React.memo는 오직 성능 최적화를위해서만 사용된다. 랜더링 '방지'를 위해서 사용은 위험하다.는 말이였다. 사실 이 말은 아직 체감하거나 경험해본 바가 없어서 이해도 되지 않을 뿐더러 그럼 어떤상황에 써야 최적인가? 라는 의문이 들긴 한다만 너무 많이 쓰지 말라는 말이겠거니와.. 생각해본다!
