[react] memo

개요

react + typescript + react beautiful dnd 로 드래그 앤 드롭으로 정렬기능을 구현했습니다.

리스트 중에서 하나의 아이템을 드래그 해서 정렬하면, 정렬은 잘 되는데, 문제가 생겼습니다.

옮긴 아이템과 그 이후에 순서가 밀려나야 하는 아이템들만 렌더링 되는게 아니라, 리스트 아이템 전체가 새로 렌더링이 되면서 잠깐 모든 리스트들이 깜박이는 현상이 발생했습니다.

 

해결 방법은 react의 memo hook을 사용하는 것입니다.

 

react memo를 사용하는 방법

👇 이전 코드

 

👇 memo를 사용해서 prop가 변경되지 않은 Card 컴포넌트가 다시 렌더링 되지 않도록 수정한 코드