forEach와 map 의 차이 vue의 v-for react의 map 작동방식 차이

요즘 next 를 공부하다가 vue에선 v-for를 사용했는데 reactd 에선 map을 사용한다는걸 알게 되었고 

 

forEach와 map 의 차이에 대해서 궁금해졌다 

 

일단 가장 큰 차이로 두가지가 있다 .

 

1. return의 유무 

2. 새로운 배열을 생성하는지 

 

forEach는 return을 가지지 않고 새로운 배열을 생성하지않음 , 순회를 하고 배열 요소를 수정함 , 기존 배열을 직접 조작함 

 

map은 return을 가지고 새로운 배열을 생성함 , 지정된 콜백 함수를 실행하고 이를 기반으로 새 배열을 생성하고 반환함 

 

데이터 크기가 커지면 map 은 새로운 배열을 생성해야하기때문에 성능적으로 불리할 수 있고 

forEach는 원본 배열을 수정하기 떄문에 주의해야한다는 생각을 하게되었다 

 

추가로 react에서의 map 과 vue의 v-for에는 어떠한 작동방식의 차이가 있는지 궁금했는데 

 

https://github.com/vuejs/core/blob/main/packages/runtime-core/src/helpers/renderList.ts

GitHub - vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

vue의 v-for는 for문을 사용한다 

 

여기서 for 와 map 의 차이점에 대해 다시 생각하게 되었다 

 

단순하게 나는 여기서 어 그러면 v-for는 for문이기때문에 새로운 배열을 생성하지않고 그것때문에 배열안의 객체 데이터가 변경되었을 때 

감지하지 못하는것인가 ??? 라는 생각을 했었는데 

 

vue는 proxy로 객체의 내부를 감시하기때문에 배열을 생성하지 않는다고 문제가 생기진않는다는 답변을 얻었다 

 

이부분에 대해서는 좀 더 생각을 해보고 proxy 에 대해서도 조금 더 찾아봐야겠다