필자가 이전 포스팅에서 직면한 문제는 데이터를 받아오는 것에 대한 문제였다면, 이번에는 화면에 띄우는 구성 상의 문제는 아니다.
01. 서론
왜?
화면은 잘 출력이 되니까....
물론 그렇다고 문제가 없다는 것은 아니다. 그냥 일종의 귀차니즘이 발동되었다고나 할까...
그런데 말입니다... 뭔가 기능 출력이 제대로 된 것인지 콘솔을 찍어볼 때마다..
02. 에러 코드
"warning: encountered two children with the same key,~"
결론적으로 요약하자면 뭔가 자식 요소들의 키 값을 동일하게 안 된다는 것이었다.
그래서 이게 뭔 소린가... 한 번 구글링을 시작해 봤다.
스택 오버 플로우에서 이런 답변을 볼 수 있었다.
즉, 맵을 돌릴 때 맵 함수에서 키 요소에 인덱스가 아닌 다른 파라미터를 줘야만 한다는 것 이었다. 대표적으로 보통 id값을 줘서 고유의 키를 만들어 줘야 한다고 했다.
03. 문제파악
그래서 필자도 본인의 코드를 펼쳐서 한 번 살펴 봤다.
그렇다. 키 값에 인덱스를 주고 있었다. 그래서 저렇게 고유의 키 값이 아니기 때문에 오류가 난다는 것을 알 수 있었다.
04. 해결책.
그래서 필자는 고유의 키 값으로 기존 배열에 있던 아이디 값을 각각 다르게 하여 설정해줬다.
그랬더니, 다행히도 콘솔에 에러가 잡히지 않았다.
05. why?
여기서 의문이 남아 더 찾아봤다. 왜 키 값은 인덱스로 돌면 안되는 것일까?
<map을 사용하였을때 index로 키값을 주면 안되는 이유>
key값을 index로 주게된다면 key값을 id로 주었을 경우와 다르게 맨앞에 값이 들어오게 되었을 경우
key: 0, {id:4, content:'ya!'},
key: 1, {id:0, content:'moya'},
key: 2, {id:1, content:'holly'},
key: 3, {id:2, content:'monya'},
key: 4, {id:3, content:'hulkhulk'}
리액트가 판단했을때 매칭이 싹다 바뀐것으로 인지해버리게 된다.
결과적으로 비효율적으로 일처리가 진행되고 리액트의 장점을 사용하지 못하게 된다.
결과적으로 state로 배열을 관리한다면 map을 사용할때 key로 index를 사용하지말자. 배열의 처음이나 중간에 새로운 데이터가 들어올경우 그부분만을 캐치하지 못하게 된다.
사용하고 싶으면 데이터가 절때 바뀌지 않을때 권장된다.
06. 느낀점.
그래서 이번 계기를 통해 콘솔에 찍히는 에러는 분명 뭔가 문제가 있음을 찍어주는 것이라는 것을 느꼈다. 당장에 문제가 발현되지 않았지만, 암 초기에 잡으면 살 확률이 엄청 높아지는 것처럼 콘솔에 뭔가 찍히면 이렇게 확인하고 넘어가야겠다. 그래야 차후에 있을 문제에 대비할 수 있으니...
