[React] key is not a prop.

<S.CommentList>
        {post.Comments.map((comment, i) => (
          <Comment
            key={i}
            comment={comment}
          />
        ))}
      </S.CommentList>

이후 개별 포스트 삭제, 수정을 위해 id 값을 사용할 목적으로
key 값을 사용하려 하니

'key'is not a prop. Trying to access it will result in 'undefined' being returned. If you need to access the same value within the child component, you should pass it as a different prop.

이러한 오류가 발생하였다.

찾아본 결과, 이는 React에서 사용하는 특수한 props인 key에 접근했기 때문이었다.
JSX 요소들을 통해 우리는 다양한 key 값을 갖는 props를 전달해 줄 수 있지만
딱 두 값, 'ref'와 'key'는 이미 React 에서 사용하고 있어
해당 값을 사용하여 전달한 값에 접근하는 것은 불가능하고,
접근하더라도 undefined라는 값이 나오는 것이다.

해결방법은 단순한데

<S.CommentList>
        {post.Comments.map((comment, i) => (
          <Comment
            key={i}
            Key={i}
            comment={comment}
            onEdit={handleEditPost}
            onDelete={() => {
              handleDeletePost(i);
            }}
          />
        ))}
      </S.CommentList>

위와 같이 다른 이름을 갖는 props를 하나 더 전달해주면 된다.
key와 Key는 가독성이 떨어지는 느낌이니
id = {i} 로 보내주는 것이 좋겠다.

또한 나는 map의 index 값을 사용했지만
개별 데이터에 id를 생성해주고, 해당 값을 받아와서
id = {id} 로 보내주는 것도 좋은 방법일 것 같다.

Reference
React 공식 문서 中 관련 부분