블로그 제작 도중 원인불명의 카테고리 정렬 버그가 발생했다.
이를 해결하기 위해 처음에는 정렬에 사용되는 변수들을 state 변수로 바꾸어 useEffect로 추적하게 해보았으나,
간헐적으로 발생하는 버그를 완벽하게 잡지 못했는데 의외로 간단한 문제였다.
해당 반복문을 통해 필터링된 게시물들을 렌더하고 있었는데,
키값을 중복되지 않게 만들어주는 것에 대해 어느정도 인지는 하고 있었지만
이것이 렌더에 큰 영향을 줄 거라고 생각을 못했던것이다...
React에서 key 속성의 중요성은 컴포넌트의 목록을 렌더링할 때 특히 중요합니다.
key는 React에게 목록의 각 항목을 고유하게 식별할 수 있게 해줍니다.
이를 통해 React는 어떤 항목이 변경, 추가, 또는 삭제되었는지 효율적으로 파악하고 해당 부분만을 재렌더링할 수 있습니다.
key가 고유하지 않거나, 잘못된 값으로 설정되어 있을 경우 다음과 같은 문제가 발생할 수 있습니다:
비효율적인 렌더링: React는 key를 사용하여 각 컴포넌트가 이전 렌더링과 어떻게 다른지 파악합니다.
key가 중복되거나 예측할 수 없는 값으로 설정되어 있으면,
React는 컴포넌트를 올바르게 재사용하지 못하고 불필요하게 많은 렌더링을 수행할 수 있습니다.
상태 관리 문제: 컴포넌트의 상태가 예상과 다르게 동작할 수 있습니다.
특히 목록의 항목이 추가, 삭제, 또는 재정렬될 때, key가 잘못 설정되어 있으면 내부 상태가 혼란을 겪을 수 있습니다.
렌더링 버그: 특히 목록에서 항목이 재정렬되거나 업데이트될 때,
key가 고유하지 않으면 잘못된 컴포넌트가 업데이트되거나 잘못된 순서로 렌더링될 수 있습니다.
다음과 같은 내용을 찾아 수정하여 버그를 해결하였고 이로 인해 왜 키값에 대한 콘솔경고가 뜰때
바로 해결해줘야하는지 제대로 배우게 되었다...
