왜 에러가 났을까?

문제의 코드..
map()에서 오류가 생겼다..

해결 방법 (1, 2)

1

{ }괄호를 ( )로 수정해주면 바로 해결된다.

{
  ExposureOptions.map((item, idx) => (
    <option key={idx} value={item.value} >
      {item.label}
    </option>
  ))
}

2

{ }를 사용하고 싶다면, return()을 넣어준다.

{
  ExposureOptions.map((item, idx) => {
    return (
    <option key={idx} value={item.value} >
      {item.label}
    </option>
    )
  })
}

나는 1번 방법 사용해서 해결했다.

정리 + 화살표 함수 주의사항

const Button = () => (
  <button>Submit</button>
)

화살표 함수의 경우 괄호()로 감싸진 부분이 return 된다.
return문 작성하지 않아도 return 된다.

반면에 중괄호{}로 감싸진 다음과 같은 함수는 return문이 없다면 return값을 반환하지 않는다.

const Button = () => {
  <button>Submit</button>
}
console.log(Button);	// undefined
}

따라서 중괄호{}를 사용하여 return값을 반환하고자 하는 함수를 만드려면 다음과 같이 return문을 사용해준다.

const Button = () => {
    return <button>Submit</button>
}

화살표 함수