[React] 화면에 뿌릴 때 map은 되는데 forEach는 안 되는 이유

map 과 forEach 차이

const data.forEach((item) => {
    return item + 2;
})

const data.map((item) => {
    return item + 2;
})

forEach 는 반환이 없는 반면 map 은 새로운 배열을 반환함

선언형 프레임워크

선언형 프레임워크의 경우 실제 html 을 내가 작성하여 변수 선언을 함
기존 자바스크립트의 경우 명령형으로 메서드를 통해 html 을 그려서 만듬

리액트

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

기존 방식

const ul = document.createElement("ul");
items.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item;
  ul.appendChild(li);
});

리액트에선 map ?

• 화면에 보여줄 내용은 map 을 쓸 수 밖에 없지만 그렇지 않으면 forEach 사용
• api 호출이나 콘솔로그 등등 경우 forEach 가 유리