[Vue.js] Vue와 React의 차이 (if, state변경, for)

IF문
⭐️ v-if
⭐️ v-else

👀 Vue의 IF문

<template>
	<div>
    	<p v-if="show">true일 때 이 부분을 보여주세요!</p>
        <p v-else>false일 때 이 부분을 보여주세요!!</p>
    </div>
</template>

React의 IF문 (if-else 사용)

function App() {
	const conditional = () => {
    	if (true) {
        	return <p>true일 때 이 부분을 보여주세요!</p>
        } else {
        	return <p>false일 때 이 부분을 보여주세요!!</p>
        }
    }
    
    return(
    	<div>{conditional()}</div>
    );
}

React의 IF문 (삼항연산자 사용)

function App() {
    return(
    	<>
    		{
            	true
                ? <p>true 결과를 보여주세요</p>
                : <p>false 결과를 보여주세요</p>
            }
        </>
    );
}

STATE 변경
⭐️ this.human[0] = 'Lee'

👀 Vue의 STATE 변경

return {
	human: ['Jake', 20, 'Male'],
}

this.human[0] = 'Lee'

React의 STATE 변경

const [human, setHuman] = React.useState(['Jake', 20, 'Male'])

let humanCopy = [...human];
humanCopy[0] = 'Lee'
setHuman(humanCopy);

FOR문
⭐️ v-for="day in days" :key="day"

👀 Vue의 FOR문

<template>
	<ul>
    	<li v-for="day in days" :key="day">{{ day }}</li>
    </ul>
</template>
<script>
	export default {
    	data() {
        	return {
            	days: ['Mon', 'Tue', 'Wed', 'Thu']
            }
        }
    }
</script>

React의 FOR문

import React from 'react';

function List() {
	const days = ['Mon', 'Tue', 'Wed', 'Thu'];
    return (
    	<ul>
        	{
            	days.map((day) => 
                		<li key={day}>{day}</li>
                    )
            }
        </ul>
    );
}
export default List;