react Warning: Each child in a list should have a unique "key" prop.

Each child in a list should have a unique "key" prop.

            {responseMsgArr.map((responesMsg, idx) => {
                const createAt = new Date(responesMsg.createdAt);
                return (
                    <S.ContentPTime>
                        <S.MsgContentP>
                            {responesMsg.text}
                        </S.MsgContentP>
                        <S.MessageTime>
                            {`${createAt.getHours().toString().padStart(2, "0")}:${createAt.getMinutes().toString().padStart(2, "0")}`}
                        </S.MessageTime>
                    </S.ContentPTime>
                )
            })}

다음 상황에서 자식요소에 unique key를 달라는 에러가 나온다.

            {responseMsgArr.map((responesMsg, idx) => {
                const createAt = new Date(responesMsg.createdAt);
                return (
                    <S.ContentPTime key={idx}> //추가
                        <S.MsgContentP>
                            {responesMsg.text}
                        </S.MsgContentP>
                        <S.MessageTime>
                            {`${createAt.getHours().toString().padStart(2, "0")}:${createAt.getMinutes().toString().padStart(2, "0")}`}
                        </S.MessageTime>
                    </S.ContentPTime>
                )
            })}

다음과 같이 추가해주면 된다.

 

자식의 자식에 따로 key가 필요하진 않고 map 돌리는 바로 아래 자식만 잘 챙겨주자.

key가 전역적으로 고유할 필요는 없다. 만약 그랬다면 위의 코드는 ( 코드 스니펫으로는 보이진 않지만 ) 에러를 뱉어야 했다. 반복문 안에서만 고유하면 된다.