버그 : 기존 배열에 수정이 생길 시, mansory에 변형이 생긴다.

기존 배열에 변형이 생기면, 그 배열이 틀어지며 이상한 구조를 가지게 된다.

MasonryInfiniteGrid는 items상태의 key를 기반으로 순서대로 보여주는 방식을 취한다.

만약 하나가 제거되면, 그에 맞는 개수로 다시 불러오지만 기존 UI에는 영향을 미치지 않는다.

before

after

이는 before & after를 비교해보면 원인에 대해 조금 더 생각해볼 수 있다.

좌측 상단부터 차례대로 1,2,3,4라 칭하겠다. after는 before에서 2번 요소를 제거한 상황이다.

2번이 제거되며 3번이 2번 자리로 이동한다. 4번은 3번 자리로 이동했다. 5번은 4번 자리로 이동했다. 여기서 6번은 before의 5번 자리로 이동해버린 것이다. 새로 위치가 계산된 위치로 이동을 해야하는데, 이를 무시하고 덮어써버린 것이다.

가장 쉬운 방법은 reload를 하는 것이다. 하지만, 이는 사용자에게 치명적인
공식문서를 찾아본다.
- https://naver.github.io/egjs-infinitegrid/docs/api/MasonryInfiniteGrid
  - https://naver.github.io/egjs-infinitegrid/docs/using-the-methods: ref를 이용하여 컴포넌트 요소에 접근한다.
  - https://naver.github.io/egjs-infinitegrid/docs/api/MasonryInfiniteGrid: ref를 이용하여 API를 활용한다.
  - removeGroupByIndex
GitHub을 찾아본다
- https://github.com/naver/egjs-infinitegrid/issues/471
  - 4.2.0으로 업데이트해보세요.
    - 나는 4.12.0을 사용 중이다.
  - useResizeObserver={true} 옵션을 활성화 해보세요
  - Demo : 데모에서는 잘 된다.
    - 특징
```
<MasonryInfiniteGrid
	items={products}
	itemBy={(product) => product.id}
/>
```