[Vue vs. React 비교] (2) 반복, 조건부렌더링은 어떻게 다를까

1탄 : https://imagineu.tistory.com/70

[Vue vs. React 비교] (1) template 생김새, router

반복

결론부터 말하자면, Vue에서의 반복문은 v-for을, React에서의 반복문은 Array.map을 이용합니다. 그럼 제가 만들었던 사이트의 글목록 부분을 보면서 어떻게 생겼나 함께 살펴보겠습니다.

  Vue  

Vue는 컴포넌트 안의 속성으로 v-for과 key를 사용해주었습니다. list가 데이터를 담고 있는 [배열]이며 item은 하나하나의 요소를 가르킵니다. 약간 javascript의 for... of 문법과 비슷한것 같네요ㅎㅎ 

<template>
	<ul>
    	<li v-for="(value, key) in myArray :key=":key">
        	{{ key }} : {{ value }}
        </li>
    </ul>
</template>

---

  React  

React에서는 JSX안에서 { } 을 이용해 javascript의 Array.map 문법을 사용한 것을 볼 수 있습니다 .map() 안에서 <Post>를 return 해주었고 마찬가지로 key값이 필요하기 때문에 item.id를 키값으로 넘겨주었습니다.

function App() {
	return (
    	<ul>
        	{myArray.map((value, key) => (
                	<li key={key} > { key } : { value } </li>
         	   ))}
        </ul>
    )
}

만약 유니크한 값이 없을 경우에는 Vue와 React 둘다 (item, 인덱스)를 받아와서 key값으로 인덱스를 사용할 수는 있지만 좋은방식은 방식은 아닙니다. 그 이유는 Vue의 v-for문 사용법 (https://imagineu.tistory.com/62)에 적어놓았습니다. 

조건부렌더링

조건부 렌더링의 방법에는 여러가지가 있지만 저는 javascript의 if/ else-if/ else와 같이 조건이 여러개인 경우를 코드로 비교해보겠습니다. 

  Vue  

Vue에서는 v-for과 마찬가지로 <태그>안에 속성으로 v-if / v-else-if / v-else가 들어가있고 각각의 조건을 ""안에 적어주었습니다.

  React  

React에서는 반복문에서와 마찬가지로 { } 안에서 javascript 문법을 이용했는데요, if(조건)에 따라 return해주는 태그(컴포넌트)를 다르게 해주었습니다. 저는 위와같은 방식으로 조건부 렌더링을 해줬지만 && operator나, 삼항연산자 (? : )를 사용할 수도 있습니다. 

그리고 조건부렌더링으로, Vue에서는 v-show와 같은 속성도 사용할 수 있지만 ( v-if와 v-show의 차이점은 https://imagineu.tistory.com/64 에 적어놓았습니다) React는 v-show처럼 렌더링은 하지만 브라우저에서만 감춰지는 기능은 따로 없는 것 같아 display:none;을 사용해야 할 것 같습니다. 혹시나 다른 방법이 있다면 댓글로 알려주세요!