오늘은 제가 자주 겪었던 실수에 대해서 같은 실수를 반복하지 않기 위해 블로그 글을 작성하게 되었습니다 !!
코드를 작성하다 보면 정말 사소한 실수로 시간을 뺏기는 일이 자주 있는데요 .. !
오늘은 흔히 리스트를 렌더링 할 때 사용하는 map() 에서 발생한 실수와 이를 방지하기 위한 개념 설명 들어갑니다 !!
문제 코드
{books.map((book) => {
<BookItem key={book.id} {...book} />;
})}이 코드에서 어떤 점이 실수일까요 ? 정삭적으로 보이는데 왜 안나올까요 ?
결론부터 말하자면 : return 을 안했기 때문입니다.
자바스크립트에서 화살표 함수는 중괄호 {} 를 쓰면 명시적으로 return 을 써야하고
소괄호를 쓰면 암묵적으로 return 이 동작합니다.
잘못된 예시 : {} 사용 (return 없음 )
{books.map((book) => {
<BookItem key={book.id} {...book} />; // ❌ JSX는 있지만 return이 없음
})}따라서 이 코드는 return 이 없으므로 undefined 만 리턴하고 있어서 화면에 아무것도 나오지 않습니다.
TypeScript 를 사용한다면 "void[]는 ReactNode가 될 수 없다"라는 에러 메세지를 확인할 수 있습니다.
올바른 예시 1 : return 명시
{books.map((book) => {
return <BookItem key={book.id} {...book} />;
})}올바른 예시 2 : 소괄호 () 사용 (암묵적 return)
{books.map((book) => (
<BookItem key={book.id} {...book} />
))}
중괄호 {} vs 소괄호 () 차이 정리
| 형태 | 설명 | 리턴 |
| () => { <JSX /> } | 함수 블록, return 생략 시 undefined | ❌ |
| () => { return <JSX /> } | 함수 블록 + 명시적 return | ✅ |
| () => (<JSX />) | 소괄호 → 식(Expression) 처리됨 | ✅ |
따라서 JSX 를 반환할 땐 항상 return 을 쓰거나 () 로 감싸줍시다 !!!
