[REACT NATIVE] JSX에서 map 과 forEach

테크33·2021년 12월 8일

목록 보기

1/11

개발을 하던 도중 Array 값을 for 문을 돌려 랜더링 시켜야하는 부분이 있었다.

flatList를 쓰려했지만 이미 해당 screen이 ScrollView 로 감싸져있었기 때문에 flatList가 nesting 되지 않았고, Array 또한 크지 않기 때문에 overdraw 문제는 없을 것으로 판단하여 아래 코드처럼 작성했다.

return (
  ...
  
Array.map((item: any) => (
   <RenderItem item={item} /> //RenderItem.tsx에서 작동
 ))
)

근데 짜보고 나니... 흠...
너무나도 당연하게 map을 써서 돌렸는데 forEach로 쓰면 안되나? 하는 물음이 들었다. forEach는 반환값이 undefined 임을 알고 있음에도 어떻게되나 한 번 해보았다.

Array.forEach((item: any) => (
   <RenderItem navigation={navigation} item={item} />
))

역시나 아무것도 랜더링 되지 않는다.

그 이유는 뒤에 어떻게 반환한다고 해도 jsx안의 Array.forEach(...) 자체가 undefined으로 반환되기 때문에 결론적으로는 아무것도 반환되지 않는 것이다. jsx 안에 컴포넌트로 들어가야하기 때문에 map으로 결과값을 반환시켜주는 것이 맞다.

나도 jsx안에서 map을 잘 쓰지는 않지만 혹여 이번처럼 쓸 일이 있으면 map을 쓰도록 하자.

react native