[개발] map과 foreach 혼동하지 마라

React에서,
forEach 내부에 코드가 동작을 하지 않아요. Component가 출력되지 않습니다. 

왜 이런 현상이 발생 할까? 

 

Map과 Foreach는 다르다. Return Value or Nothing

 

React Native 로 개발을 하다보면, 

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

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

 

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

바로바로 읽어서 사용할 때는 forEach 와 Map 을 사용할 경우가 종종 발생한다. 

 

이럴 때, map / ForEach로 사용하는 경우, 빈번하게 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 출력을 할 수 없다.

 

forEach의 잘못된 사용 

 

다음과 같은 경우, forEach는 아무것도 출력 하지 않는다. 

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

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

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

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

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

 

map으로 작성해야 하는 코드

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

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

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

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

포스팅으로 올려 보았다.