TL; DR(요약)

map()은 return값이 있고, forEach()는 return값이 없어서 map만 사용이 가능하다.

• return 값이 없으면 ReactNode에 assign 될 수 없다.

의문의 발단

React element 안에서 그러니까 리액트 컴포넌트의 return문 안에서 반복문을 통해 여러 element를 화면에 표출하고 싶을 때 왜 forEach는 안되고, map은 되는 지 궁금했다.

• forEach를 사용하면 아래와 같은 에러가 떴음
  Type 'void' is not assignable to type 'ReactNode'

• 예시 코드

{arr.map((item, idx) => (
  <Button key={idx} id="btn1"/>
}

의문의 전개

react를 시작한 작년 말부터 궁금했지만 사실 뭐라고 찾아봐야 할 지도 모르겠고, 무엇보다 react의 원리를 잘 모르고 있어서 그냥 일단 되는 코드를 외웠었다.

의문의 위기

왜 map을 사용해야 하는 지 명확히 모르니까 코드를 작성할 때도 forEach를 종종 써서 에러가 났었다.

의문의 절정

• React 기본서를 공부하다가 화면에 react element를 렌더링하려면 return을 해야한다는 것을 알게됨
• map(): 배열 내 각 요소를 순회하면서 인자로 주어진 연산을 수행하고, 새로운 배열을 반환함
  - map MDN
• forEach(): 각 요소를 순회하면서 인자로 주어진 연산을 수행함
  - forEach MDN

• 즉, map은 새로운 배열을 반환하기 때문에 그 반환값이 ReactNode에 할당될 수 있는 것!(assignable)
• 그러니까 발단에서의 에러는 당연한 것이다! ➡️ forEach는 return 값이 없으니까!

의문의 결말

React element 내에서 loop를 돌리고 싶을 때는 반환값이 있는 map만 사용 가능하다.