div 내부에서 map 사용하여 요소 반복시 prop 관련 에러

개요

댓글 목록을 보여주는 부분에서 div태그 내부에서 map함수를 이용해 매핑하였는데 아래와 같은 에러 발생

This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.

소스코드(일부)

<div className="w-11/12 h-32 p-4 mx-auto">
      <CommentInput articleId={articleId} mutate={mutate} />
      {data?.content.map((comment, index: number) => {
        return ( //...?
          <CommentCard
            key={index}
            author={comment.author}
            date={new Date(comment.createdAt)}
            content={comment.content}
          />
        );
      })}
    </div>

해결(?)

map함수에 파라미터로 들어가는 콜백함수에서 return()을 추가했고, 문제가 해결됨. SCG의 Ourlim 코드와 비교하여 차이점을 찾다가 수정한 것인데, 원인을 정확히 파악하지는 못함

원인

화살표 함수에 대한 잘못된 이해가...문제였다.
화살표 함수는 여러 형태로 축약이 가능하지만 (item) => {item + 1}형태로 썼을 때는 void 반환형의 함수가 된다. 원하는 대로 동작하게 하고 싶으면, 뒤쪽 부분에도 소괄호를 사용하거나 single line이라면 차라리 괄호를 생략하자.(근데 생략하면 formatter가 화내면서 소괄호로 써준다...!)
나는 일단 중괄호로 감싸고 명시적으로 return()을 써주는 방식으로 해결했다.

화살표 함수의 유일한 문장이 return이라면 중괄호와 '함께' 생략할 수 있다

참고자료

https://velog.io/@dom_hxrdy/javascript-%ED%99%94%EC%82%B4%ED%91%9C%ED%95%A8%EC%88%98-return-%EB%AC%B8%EC%A0%9C