[TIL] typescript props Array 처리 과정

<Parents.tsx>

해당 배열을 props 로 전달하기 위해서 아래와 같이 전달을 하였고,

<Children.tsx>

의도한 것은 받은 배열을 map 함수를 이용해서 표현을 하려고 했으며 VSCode에서는 문제가 없이 작동이 되었으나, 로컬로 돌리는 해당 주소에서는 Child.tsx 에서 likedRoutine.map is not a function 이라는 TypeError 문구가 뜨게 되었다.

---

문제 해결을 위해 console.log로 확인하니 배열이 아닌 object로 데이터가 들어오면서 오류를 작동했던 것이었기에,

여러 방법으로 하려고 하였으나 다 실패를 하였고.. 결국 해결하고자 방법을 찾은 것은 Object를 map 함수로 사용할 수 있게 만드는 것이었다.

출처 : https://ywtechit.tistory.com/162

이와 같은 방법으로 사용하여서 만들었다.

결국 원하는 것을 띄울 수 있었으나 오류가 남아있었다...

오류를 번역해보면

경고: 동일한 키 [object Object] 를 가진 두 개의 자식이 발생했습니다 . 키는 구성 요소가 업데이트 간에 ID를 유지하도록 고유해야 합니다. 고유하지 않은 키를 사용하면 하위 항목이 중복 및/또는 생략될 수 있습니다. 이 동작은 지원되지 않으며 향후 버전에서 변경될 수 있습니다.

key 값은 유일한 객체여야 하는데, 중복됨으로서 이와같은 오류를 발생하게 되었다.

사실 위에서 나온 문제와는 별개로 다른 map 함수를 쓰면서 중복으로 발생된 것으로 key값을 고치면서 해결되었다.