[Vue vs React] Emit vs State끌어올리기

Emit : Vue에서 하위 컴포넌트에서 상위 컴포넌트의 state를 업데이트 하는 방법
State 끌어올리기: React에서 상위 컴포넌트의 state를 업데이트 하는 방법

아마도 Vue의 여러 기능 중 React와 구현 방식에서 가장 큰 차이를 보이는 부분이 아닐까 한다. React의 경우 Props를 제어하는 함수를 하위 컴포넌트에 전달해서 Props를 변경하는 반면, Vue의 경우 emit을 통해 이벤트를 발생시키고, 필요한 데이터를 전달하여 상위 컴포넌트의 state를 변경한다.

1) Vue로 구현

//자식컴포넌트
<templates>
	<div @click="fireEmit" />
</templates>

...

<script>
export default {
	name : "Child"
	methods : {
		//emit이벤트 발생시 실행할 함수
		fireEmit() {
			this.$emit("emit-event-name", data)
		}
	}
}
</script>

...

• 자식컴포넌트에서 emit을 동작시킬 함수를 만든 후
• this.$emit으로 emit 이벤트를 실행한다
• 괄호 안에 첫번째 인자로 emit이벤트 이름을 지정하고, 두번째 인자로 넘겨줄 데이터를 넣는다.

//부모컴포넌트
<templates>
	<Child @emit-event-name="emitFunction" />
</templates>

...

<script>
export default {
	name : "Parent"
	methods : {
		//emit이벤트 발생시 실행할 함수
		emitFunction(data) {
			...
			//emit과 함께 전달한 데이터를 사용할 수 있다.
			return data
		}
	}
}
</script>

...

• 자식컴포넌트에서 지정한 emit이름을 html요소에 넣어둔다.
• 자식컴포넌트에서 emit이벤트가 발생했을 시 실행할 함수를 바인딩한다
  
  

2) React로 구현

//부모컴포넌트
export default function Parent () {

const [state, setState] = useState("")
const handleState = (data) => { 
	setState(data)
}

return (
		<>
			<Child handleState={handleState} />
		</>
	)

//자식컴포넌트
export default function Child ({ handleState }) {

...

return (
		<>
			<div onClick={(data) => handleState(data)}> 
				...
			</div>
		</>
)

• 부모컴포넌트의 state를 변경시킬 함수를 Props넘겨주듯 자녀컴포넌트에 넘겨준다
• 자식컴포넌트에서 함수를 실행시켜 부모컴포넌트의 state를 갱신한다
• state를 변경하는 함수의 경우 주로 별도의 함수를 만들어서 업데이트 한다
• react의 이벤트 핸들러에 함수를 전달할 때는 ‘함수자체’를 전달해야 하기 때문에, handleState{data}와 같이 직접 입력하면 ‘함수실행결과’가 전달되어 에러가 난다. 위 예시와 같이 익명함수를 하나 만들어서 해결해야 한다.
  
  

3) Vue vs React

• 이부분에서는 React가 조금 더 직관적으로 구현 가능하다는 느낌을 받는다.
• 다만 컴포넌트의 계층이 많아지면 Redux나 Vuex를 활용해야 정신적 타격을 입지 않는다 수월하다.