[Vue vs React] v-for vs map

v-for는 반복되는 HTML 요소를 구현하는데 사용되는 directive이다.(반복문 역할)
React에서는 주로 map함수로 구현한다.

1. React구현 예시

function Component () { 
	//임의의 배열
	let arr = [a, b, c, d]

	return (
	<>
	...

		// 맵을 통한 구현
		arr.map((el, idx) => {
			return <div key={idx}> {el} </div>
		}

	...
	</>
	)
}

• 자바스크립트 문법과 다른 점은 없다.
• 다만 return 안쪽에 html이 들어간다는 점이 특징이다.
• key를 반드시 설정해줘야 한다는 점을 주의해야 한다.

2. Vue를 통한 구현 예시

<template>
	//v-for을 통한 구현
	<div v-for="el in arr":key="el"> {{ el }} </div>
</template>

<script>
export default {
	name : "component"
	data : function () {
		return {
			//임의의 배열
			arr = [a, b, c, d]
		} 
}
</script>

1. 먼저 script에서 data를 하나 만든다.
   • 데이터에서 임의의 배열을 하나 생성
2. template에서 v-for사용
   • 기본 문법은 v-for=”배열의 요소 이름(아무거나) in “배열이름”:key=”앞의요소이름”
   • React와 마찬가지로 key가 반드시 있어야 한다
   • map함수나 여타 배열을 다루는 함수와 마찬가지로, 배열의 요소를 순회할 때 사용할 요소의 이름을 지정해주어야 한다.(내키는대로)
3. 데이터 바인딩
   • 태그 사이에 중괄호 두개`{{ }}`를 쓰고 안에 데이터를 입력한다

3. 사용 후 느낀점

※ v-for에서 React와 Vue 사이에 구현 방식에서의 차이가 확연하게 보인다.
React는 자바스크립트 문법에 기초해서 비교적 자유도 있는 구현이 가능하고, Vue는 정해진 문법 구조에 따라 구현해야 정상적으로 구현이 가능하다.