하리하링웹

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 잘 응용하면 대부분의 경우 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. React의 memo에 대해 작성할 예정이다. 먼저 아래에 간단한 예시가 있다. import { useState } from 'react'; import { Button } from '@/components/ui'; function LargeComponent() ..

React.memo는 특정한 몇 가지의 경우를 제외하고는 실제로 사용할 일이 많이 없기에 React.memo는 생소하다고 느끼는 사람들이 많을 것 같다. 또한 React.memo는 사용하더라도 성능상의 큰 이득을 가져오지 못할수도 있으며 잘못 사용할경우 찾기 힘든 버그를 발생시키거나 오히려 페이지의 성능이 저하되는 경우도 있을수도 있기에 사용할 때 주의해서 사용해야하는 함수이다. React.memo는 Component를 memo라는 함수로 감싸는것으로 사용할 수 있으며 memo로 감싸져있는 Component를 render할때에 render 이전에 현재 render되어 있는 component의 Props와 다음에 render될 Props를 비교하는 연산을 한 번 거친다. 이후 두 개의 Props가 모두 일..