React는 사실 javascript코드이기 때문에, props가 변경된다는 등의 업데이트가 있으면 화면을 rerender하게 된다. 하지만 rerender되는 조건을 우리가 정해줄 수도 있다.
값의 변경이 있는 컴포넌트를 React.memo()로 감싸는 방법이 있다. (함수형 컴포넌트에서만)
React.memo()는 인자로 들어간 컴포넌트에 어떤 props가 입력되는지 확인하고, 입력되는 모든 props의 신규 값을 확인한 뒤, 이를 기존의 props 값과 비교하도록 리액트에게 전달한다. 그리고 props의 값이 달라졌을 때에만 컴포넌트를 재실행 및 재평가하게 한다. 따라서 부모 컴포넌트의 일부 값이 바뀌어 부모 컴포넌트 전체를 rerender하게될 일이 일어났을 때, 해당 컴포넌트는 부모 컴포넌트가 rerender되더라도 해당 컴포넌트로 전해지는 props에 대한 내용에 차이가 없으면 rerender하지 않는다. 이렇게 불필요한 rerender를 방지할 수 있다.
모든 최적화 과정에는 비용이 따르기 마련인데, 위에서 말했듯이, React.memo()는 두 가지 비용이 포함되어있다. 기존의 props값을 저장한 공간이 필요하고, 신규 값과 비교하는 연산 작업이 있다. 이러한 비용을 생각해서 최소의 기회비용(performance-cost)으로 최대의 효율을 만드는 것은 개발자의 몫이다.
React.memo()는 인자로 들어가는 컴포넌트와, 그 하위 컴포넌트들의 불필요한 rerendering을 막기 때문에(전해지는 props에 차이가 없을 때), 인자로 들어가는 컴포넌트가 상위 컴포넌트일수록 그 효율이 커질 수 있다.
전해지는 props값이 원시 타입일 때와, 객체 타입일 때에도 작동하는게 달랐다. 결과적으로는, rerender될 때마다 객체 타입은 같은 '값'이 전해지는게 아니라, 가리키는 값만 같은 다른 '참조 값'이 전달되기 때문이었다. 이에 대한 자세한 내용은 [원시값과 객체의 차이]에서 다루었다.
또한, rerender 될 때마다 바뀌는 참조값에 대한 문제를 해결한 useCallback() Hook는 [React Hooks]에서 다룬다.
