상태관리와 Props2에서 todos.map 렌더링시 에러(4:30)

안녕하세요. 보너스 강의 정말 감사합니다. 아주 유익하고 저에게 큰 도움이 되어 정말 기쁩니다.

한 가지 궁금한 점이 있어서 글 남기는데요.

App.tsx에서 강의상에서는 에러가 안 나는데, 저는 에러가 나서 검색해보니 return을 해줘야 한다고 하네요.

{todos.map((todo) => { 
    <TodoItem key={todo.id} {...todo} />
})}

• 에러: ‘Type 'void[]' is not assignable to type 'ReactNode’

   

[아래는 제가 찾아본 내용입니다.]

• todos.map 콜백 함수 내부에 return문이 없기 때문에 해당 콜백 함수는 암묵적으로 undefined를 반환하게 되어 배열의 요소들이 모두 undefined로 채워진다.

• map 메서드는 배열의 각 요소에 대해 함수를 호출하고 해당 함수의 반환 값을 새로운 배열로 만든다. 이 때 콜백 함수에서 반환하는 값을 배열에 추가하고자 한다면 반드시 return 문을 사용해야 한다.

그래서 아래와 같이 변경하였습니다.

{todos.map((todo) => {
    return <TodoItem key={todo.id} {...todo} />
})}

강의랑 어떤 부분이 달라서 그런지는 모르겠지만, 혹시 저처럼 에러가 나는 분이 계시면 참고하시면 좋을 것 같습니다.

그리고 강의에서는 return을 생략해도 에러가 안 나는데 어떤 차이점이 있는지도 의문이 갑니다.

감사합니다.

// 1번 버전
() => {값} 

// 2번 버전
() => 값

{todos.map((todo) => { <TodoItem key={todo.id} {...todo} /> })}

{todos.map((todo) => ( <TodoItem key={todo.id} {...todo} /> ))}