JSX foreach / map

JS를 공부하면서 foreach, map 둘다 반복문으로 사용해본적이 있을 것이다.

현재 React를 공부중인데 foreach와 map의 차이점을 알고 싶어서 작성한다.

foreach

forEach 메서드는 배열을 순회하는 여러 방법 중 하나입니다**

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

Map

map 메서드는 배열을 순회하는 여러 방법 중 하나입니다**

arr.map(callback(currentValue[, index[, array]])[, thisArg])

구성 요소

currentvalue : 사용할 요소 값 (필요)

index : 사용할 요소 index (선택적으로 사용 가능)

array : 순회중인 배열 (선택적으로 사용 가능)

두 문법의 파라미터는 같은데 뭐가 다른걸까?

성능

높을수록 효율적인데 foreach가 map보다 효율적이라고 한다.

각각 어디에 사용될까?

foreach

let numbers = [1,2,3]

console.log(numbers.forEach( (numbers) => numbers*2)) //undefined

반환값 : undefined

map

let numbers = [1,2,3]

console.log(numbers.map( (numbers) => numbers*2)) //[2,4,6]

반환값 : 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

map은 새로운 배열을 return 한다!

아래 JSX 실습을 통해 알아보겠다.

const lists = [
  {
    id : 1,
    name :'성민'
  },
  {
    id : 2,
    name :'주현'
  },
  {
    id : 3,
    name :'승재'
  },
]

foreach의 경우

function App() {
  return (
    <div className="App">
      {lists.foreach( (list)=> <div>{list.name}</div> )}
    </div>
  );
}

위 코드를 작성하면

Type 'void' is not assignable to type 'ReactNode’

📌 참고로 void function 반환값을 출력해보면 undefined 가 나온다

즉, foreach는 void라서 undefined를 반환하고, ReactNode 타입이 아니라서 사용할수 없다!

map의 경우

{lists.map( (list)=> <div>{list.name}</div> )}

Visual Studio Code 에서 map에 커서를 대면 JSX.Element[] JSX요소를 배열의 형태로 반환하는걸 확인할 수 있다.

웹에서 확인해보면

에러없이 정상적으로 출력되는걸 확인할 수 있다.

결론

foreach는 반환값이 없고, 성능이 우월하다

map은 callback의 결과를 모아 만든 새로운 배열을 리턴!

추가적으로

React typescript에서 map을 사용하다 보면

array.prototype.map() expects a return value from arrow function 이런 에러를 볼수 있는데

원인은 return을 명시해주지 않아서 그렇다.

map함수는 배열을 리턴해야되는데 리턴하지않아서 생기는 오류이다.

아래 코드와 같이 작성했을때 오류가 발생한다.

function Item(){
    const lists = [
        {
          id : 1,
          name :'성민'
        },
        {
          id : 2,
          name :'주현'
        },
        {
          id : 3,
          name :'승재'
        },
      ]
const label=[0,0,0,0]
lists.map( (data) => {
  if (data.name === '성민') {
    label[0] += 1;
  } else if (data.name === '주현') {
    label[1] += 1;
  } else if (data.name === '승재') {
    label[2] += 1;
  }
})
}

위 코드에서 map에 리턴이 없는걸 확인할 수 있다.

map은 () 을 사용할껀지{} 을 사용할껀지 정할 수 있다.

()을 사용하면 return을 생략해줄수 있다

function App() {
  return (
    <div className="App">
      {lists.map( (list)=> (
      <div>{list.name}</div>
      ) )}
    </div>
  );
}

{} 써주게되면 return 을 명시해야한다

function App() {
  return (
    <div className="App">
      {lists.map( (list)=> {
      return <div>{list.name}</div>
      } )}
    </div>
  );
}

근데 map의 ()은 jsx 문법에만 가능하고 일반 함수에서는 에러가 발생한다!

결론

jsx외에서 반복문을 사용하는데 리턴값이 없다면!
map{}을 사용해되는데 이는 warning을 발생!
foreach를 사용한다면 성능도 좋고 warning도 잡을수 있다.

참고자료

https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/
https://ko.legacy.reactjs.org/docs/lists-and-keys.html#embedding-map-in-jsx
https://velog.io/@rgfdds98/오류해결-Array.prototype.map-expects-a-value-to-be-returned-at-the-end-of-arrow-function
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map