똑같은 삽질은 2번 하지 말자

개요성능문제 빠져서 디버그를 하면서 어느부분이 문제였는지를 파헤쳤던 경험을 적어보고자 한다. groupedFilterItems에서 같은 아이템들을 그룹으로 묶어서 묶인 아이템들은 filterItem의 items안에 보관updateSelectItem에서 새로운 filterItem를 생성할 때 filterItem안에 items가 들어간다.다시 groupedFilterItems가 실행되며 filterItems의 items의 하나의 item에도 items가 들어가 버린다. 이러면 filterItem을 추가할 때마다 필요없는 중첩된 데이트가 제곱수로 늘어나게 되어서 화면의 성능이 상당히 나빠졌었다. 해결 뒤 코드 결론복잡한 데이터를 다룰 때 필요없는 데이터를 양산하고 있지 않는지를 체크해보자

개요React로 개발을 하면서 예상치 못한 랜더링으로 인해 고생을 했던 케이스들을 모아보았다.  자식 컴포넌트에서 부모 컴포넌트에서 받은 상태를 변경하는 콜백 함수를 useEffect의 의존성으로 등록하고 실행할 때 밑의 코드를 보면 Parent의 handleUpdate가 실행되면 setNumber에 의해 부모 컴포넌트가 리렌더링되고 그로 인해 handleUpdate도 새롭게 재할당된다. 이 재할당으로 인해 자식 컴포넌트에서 onUpdate가 변경됨을 감지 다시 handleUpdate가 실행된다.import { useEffect, useState } from "react";type ChildProps = { onUpdate: () => void;};function Child({ onUpdate }: ..

보호되어 있는 글입니다.