상태관리와 Props2에서 todos.map 렌더링시 에러(4:3... - 인프런

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

상태관리와 Props 2

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

작성

262

수정됨

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

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

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

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

todos.map 콜백 함수 내부에 return문이 없기 때문에 해당 콜백 함수는 암묵적으로 undefined를 반환하게 되어 배열의 요소들이 모두 undefined로 채워진다.
map 메서드는 배열의 각 요소에 대해 함수를 호출하고 해당 함수의 반환 값을 새로운 배열로 만든다. 이 때 콜백 함수에서 반환하는 값을 배열에 추가하고자 한다면 반드시 return 문을 사용해야 한다.

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

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

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

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

감사합니다.

답변 1

지식공유자

안녕하세요 이정환입니다.

화살표 함수의 문법상 함수가 값을 바로 리턴하도록 만들려면

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

위 형태가 아닌

// 2번 버전
() => 값

위 형태로 코드를 작성해주셔야 합니다.

질문 주신 내용에는 다음과 같이 코드를 작성하셨다고 하셨는데요

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

이렇게 같이 작성하면 위 예시의 1번 버전에 해당하는 것 이기 때문에 아무런 값도 리턴하지 않게 됩니다.

따라서 다음과 같이 코드를 수정해주셔야 합니다.

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

중괄호를 소괄호로 변경했다고 이해하시면 되겠습니다.

강의중에도 중괄호가 아닌 소괄호를 이용합니다.

감사합니다.

질문자

앗... 제가 실수했습니다. 콜백함수에 익숙해져 있어서 그런지 제 눈엔 안 들어왔어요. ㅠㅠ

그냥 안 넘어가고 질문드리길 잘했네요.

정말 감사합니다!!!