[react] 화살표 함수

화살표 함수 헷갈려서 기록!

{items.map((item) => { <li><FoodListItem item={item} /></li>} )

콜백함수 쓸때 왜 위에 처럼 적으면 안될까?

화살표함수 특징

1. 화살표함수의 반환값이 한줄로 표현가능한 코드이면 {return }이 생략 가능하다
2. 그런데 반환값이 객체(object)이면 소괄호( )를 씌어줘야 한다.

console.log(typeof( <li><FoodListItem item={item} /></li>))

콘솔로그로 찍어보면 object가 반환되는 것을 확인할 수 있다.

따라서

방법 1.

items.map((item) => { return <li><FoodListItem item={item} /></li> } )

방법2.

items.map((item) => (<li><FoodListItem item={item} /></li>)) (생략형)