[Vue vs. React 비교] (4)vue에 watch가 있다면 react에는 useEffect가 있다

  Vue  

Vue에서 watch의 역할은, 해당 데이터가 변경되었을때 이런 로직을 수행하도록 정해놓는 것입니다.

<template>
	<input v-model="myName" />
</template>
<script>
export default {
	data() {
    	return {
        	myName: ''
        }
    },
    watch: {
    	myName(newValue, oldValue){
        	console.log(`${oldValue}였다가 ${newValue}로 변경`)
        }
    }
}
</script>

이런식으로 정해놓으면 input 입력창안에 어떤 입력이 들어와서 myName이 변경된다면, myName이 watch속성에 걸려있기 때문에 키보드가 입력될때마다(값이 변화가 있을때마다) 해당 로직(콘솔찍기)이 수행됩니다. 첫번째 인자가 바뀐 값, 두번째 인자가 바뀌기 전의 값으로 들어옵니다. 

---

  React  

이런 data의 변경에 따라 원하는 로직을 수행하고 싶은 경우, React에서는 useEffect() 훅을 이용합니다, 
useEffect() 안에는 하나의 인자가 들어갈수도, 두개의 인자가 들어갈 수도 있는데요.
하나의 인자가 들어갔다면 무언가 작업을 할 로직이 들어가게 되는데, 이 때

useEffect(() => {
	console.log("Hello World");
})

와

useEffect( console.log("Hello World") )

는 똑같이 작동하게 됩니다. 

두개의 인자가 들어갔다면 첫번째는 로직이 들어있는 콜백함수가, 두번째 인자는 어떤 데이터가 들어왔을 때 해당 로직을 수행할지 [배열]의 형태로 넣어줍니다.

function App() {
	const [myName, setMyName] = useState('')
    
	useEffect(() => {
    	console.log(myName)
    }, [myName])
    
    return (
    	<input onChange={e => setMyName(e.target.value)} />
    )
}

만약 []빈 배열로 놔둘 경우, 해당 컴포넌트가 생성,변경,제거될때 실행되며, 그 이외에는 해당 로직을 수행하지 않습니다. React의 lifecycle로는 componentDidMount, componentWillUnMount, componentWillUpdate일때 수행됩니다!