📌 오늘 한일
프론트엔드 데브코스(DAY 75)
- 팀프로젝트 보완
- notification 미디어 쿼리 작업
📌 배운 것
📌 어려웠던 점
컴포넌트 key 중복 문제
- notification 모바일 페이지에서 무한스크롤 작업을 함에 있어 관련 파일을 수정하고 저장을 하면 개발자 도구 탭 console에 중복 key가 있다고 알려주었다.
- 현재 특정 유저가 특정 포스트에 좋아요를 눌리면 알람이가고 취소 후 다시 알람이 가기 때문에(팔로우, 언팔로우도 마찬가지) 문제가 발생하지 않았을까 예상했지만 id 값으로 넘어오는 것은 알람 자체의 id였기 때문에 똑같은 알람이 들어온다는 사실을 알 수 있었고 아래의 과정을 통해 해결할 수 있었다.
해결 과정 : 현재 움직이지 않은 상태에서 저장 했을 때 중복 된 데이터가 들어와서 중복 된 key가 생기는 문제 발생
- 저장 버튼을 누르면 re-render 되어서 무한 스크롤 hook을 호출 하게 된다.
- 스크롤이 가장 위에 있을 때를 예로 들면 page가 0이므로 이 상태에서 re-render하면 기존에 기억하고 있던 page state(0)에 의해 useEffect 안의 sendQuery 호출
- sendQuery를 호출하게 되면 현재 page에 대한 데이터를 기존 누적 데이터에 덧 붙이기 때문에 중복 데이터가 내려오고 중복 키 발생
해결 방법=>리스트의 개수와page * limit이 같다면 re-render x
📌 한줄평
오늘도 수고했어.
