[React]map 과 key

마감된 데이터를 db에서 잘 받아왔는데

화면에서는 내 예상과는 다르게 보여준다

좀더 자세히 써보자면

마감된 게시물 + 필터링을 하게되면

조건에 따라 필터링된 마감된 게시물들이

화면에 정렬되기를 원했다.

그런데 화면에는

작성한 날짜, 글은 제대로 정렬이 되는데

좋아요수와 댓글수는 처음 최신 순서(default 필터링) 그대로 고정되는 것이다.

더 의아한건

진행중인 게시물(마감된 게시물 반대)은 필터링이 잘 된다는것.

차근차근 콘솔을 찍어보며 시작해보자.

---

1. 콘솔찍어보기

마감 + 최신순

text가 "aaaa", "bbb", "cccc" 게시물인 순서로 작성을 하였고

최신순으로 나열했으니

index 0 - "cccc", index 1 - "bbbb", index 2 - "aaaa" 

로 잘 정렬되어있다.

즉, "cccc"가 젤 위다.

 

마감 + 좋아요순

기존 데이터에서 likes를 기준으로 필터를 바꾸어 보았다.

현재 "cccc"의 likes 갯수가 0이고

"bbbb"와 "aaaa"게시물의 likes 갯수가 1로 같으므로

"cccc"게시물이 맨아래로 내려가면 된다.

"bbbb" - "aaaa" - "cccc" 이렇게되면 좋을 것 같다.

오 데이터 역시 잘 들어온다.

그런데 화면엔 이렇게 나온다

뭐가 이상한거지 할 수 있다.

게시물의 글이 아닌

좋아요수와 댓글수를 잘 보면 이상한 점을 느낄 수 있다.

해당게시물과 다른 데이터를 화면에 보여주고 있다.

"bbbb"의 좋아요 갯수는 1개 였고, 

"cccc"는 0개였다.

 

2. 문제 접근하기

정황을 봤을 때

화면에서 데이터를 보여주는데 있어

문제가 있었을 것이다.

서버는 잘못이 없다.

 

진행중인 게시물과 마감된 게시물을 보여주는 코드를 비교해보았다.

비교해보다보니..

받아온 각 게시물을 배열 상태값에 저장해 map을 이용해

화면에 뿌려주고 있는데,

하나 다른 부분이 눈에 띄었다.

바로 map을 쓸때 각 요소에 고유한 값을 부여해주는 key 였다.

 

(좌)진행중인 게시물의 key값, (우)마감된 게시물의 key값 

마감된 게시물의 key값을 index가 아닌 게시글의 고유 id값으로 부여해주어보았다.

문제가 해결되었다. 

그런데 왜 해결이 된걸까??

map을 쓸 때 요소에 key값을 쓰지않는게 좋다고는 얼핏들었지만

 그 정확한 원리는 잘 모른다.

검색 후 이해하기 쉽게 풀어놓은 블로그 내용을 발견했다.

감사합니다 :)

https://medium.com/sjk5766/react-배열의-index를-key로-쓰면-안되는-이유-3ce48b3a18fb

[React] 배열의 index를 key로 쓰면 안되는 이유

 

3가지 경우엔 key로 index를 써도 무방하다고 한다.

1) 배열의 각 요소가 static 하거나 computed 되지 않고 변하지 않아야한다

2) index 대신 쓸게 없을 떄

3) 데이터가 rendered나 filtered 되지 않을 때

 

내 경우에는 분명히 filtered 되는 배열의 요소들이기에

index를 key로 쓰는게 좋은 방법은 아니었다.

그 이유는,

만약 배열의 요소에 변경이 이루어졌을 때,

예를 들면 삭제를 한다고 가정해보자.

index를 이용해 key값이 0인 데이터를 삭제하면

re-render 후

index가 1이었던 기존의 데이터에 key값이 0으로 다시 mapping된다.

이때 index가 1이었던 데이터에 삭제된 index가 0인 데이터가 들어가게된다.

위 블로그에서 예시 코드를 잘 들어놓아서 참고하면 좋겠다.

 

내가 filtered한 배열에 게시글에 부여된 고유 id값을 부여해주니

내가 원하던 filtered기능이

원활하게 작동했다.

끝