본문 바로가기
  • Survival Plan
개발 이야기/React-Native

map과 foreach 혼동하지 마라

by IT/머신러닝 엔지니어의 독서/경제/육아 공부 리치윈드 - windFlex 2020. 3. 30.

React Native 로 개발을 하다보면, 

Fetch, AsyncStorage, DB 등으로부터 읽어들인 데이터

즉 Array Data를 처리하거나 중간 결과를 테스트 할 때가 있다. 

 

나중이 되면, 결과물을 Rendering하기 위해서 FlatList 또는 Card Content 등을 사용하겠지만,

바로바로 읽어서 사용할 때는 forEach 와 Map 을 사용할 경우가 더러 있다. 

 

이런 경우 종종 발생하는 일 중에 하나....

 

Map 과 ForEach의 용도를 혼동하는 것이다. 

 

결론 부터 이야기하면, 

Map은 각 Array의 아이템 별로 function을 실행 하고 그 결과를 반환하지만

forEach는 아이템별로 기능만 실행하고 결과값이 반환하지 않는다. 


다음과 같은 Data Array가 있다고 하자.

data =[
	{id : 1, name: "LEE"},
    {id : 2, title: "KIM"},
    {id : 3, title: "PARK"},
]

forEach와 Map 을 이용하여 값을 확인한다.

data.forEach( (item) => console.log(item))
data.map( (item) => console.log(item) )

이런 용도로 사용할 때는 동일하다.

그러나 이것이 함정인데, forEach는 결과값을 return 하지 않는다. 

즉, forEach를 Render() 함수 안에서 component 출력을 할 수 없다.

 

다음과 같은 코드는 아무것도 출력 하지 않는다. 

data.forEach( (item) => <View><Text>{item}</Text></View>)

축약식을 제외하고 다시 풀어서 코드를 쓰면, 아래와 같이 return을 하게 된다. 

data.forEach( (item) => {
	return (
			<View><Text>{item}</Text></View>
            );
    }
)

앞에서 말한것 처럼 forEach는 결과값을 반환하지 않는다. 

따라서, 아무것도 출력되지 않을 것이다. 

 

위 코드는 map을 사용하여 아래같이 작성되어야 한다. 

data.map( (item) => <View><Text>{item}</Text></View>)

Array의 각 item에 각각 function을 실행해 준다는 점은 동일하기 때문에, 

혼용 되고 있으나, 때때로 이런 점을 간과해서 많은 시간을 허비하게 되는 일이 종종 발생하여 

포스팅으로 오려 보았다. 

댓글2