[Vue vs. React 비교] (3)vue에 computed가 있다면 react에는 useMemo가 있다

vue에서 computed는 간단하게 말하면 data이지만, template에서 바로 사용하지 않고 "계산을 해야하는" data입니다. 예를들어, 

<template>
	<div> {{ myMame.split('').reverse().join('') }} </div>
</template>

<script>
export default {
	data(){
    	return{
        	myName: 'yoy'
        }
    }
}
</script>

위와같이 data를 template에서 뭔가 계산을 해줘서 뿌려줘야할 때가 있을때, template에서 그 연산을 하게되면, template이 지저분해질 수 있는데, 그것을 아래와 같이 간단하게 바꿀 수 있습니다.

Vue

<template>
	<div> {{ computedName }}  </div>
</template>

<script>
export default {
	computed: {
    	computedName() {
        	let myName = "yoy"
        	return myName.split('').reverse().join('');
        }
    }
}
</script>

  react  

Vue에서 data를 연산하는 방법으로 computed가 있다면, react에서는 useMemo를 사용할 수 있습니다. 

function App() {
	const myName = "yoy"
    
	const computedName = useMemo(()=>{
            return name.split('').reverse().join('');
        },[myName])
    
    return <div> { computedName } </div>
}

이런식으로 useMemo 훅을 사용한다면, vue의 computed속성과 동일하게 myName이 변경되었을때만 해당 computedName이 다시 계산되게 됩니다.