Props & Emits: Vue에서의 컴포넌트 커뮤니케이션

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 개발자 및 Vue 학습자 (중간 난이도: React의 hooks와 JSX 기반 경험 필요)

핵심 요약

• Vue의 props와 emits는 부모-자식 커뮤니케이션을 간소화
• props로 데이터 전달, emits로 이벤트 발생 (React의 callback prop 대체)
• reactive 및 computed로 상태 변화 추적과 최적화
• Vue의 Proxy 기반 반응성 시스템
• 배열 직접 수정 가능 (slice() 대체)
• @select 이벤트 핸들러 사용으로 JSX 람다 제거
• React와의 핵심 차이점
• React: 불변 상태 업데이트 + useMemo 사용
• Vue: computed로 자동 캐싱 + ref/reactive 활용

섹션별 세부 요약

1. React의 컴포넌트 커뮤니케이션 패턴

• onSelect 콜백 prop 전달 및 클로저 생성
• 불변 상태 유지 위해 squares.slice() 사용
• useState + useEffect로 상태 관리 및 최적화
• JSX 내 map + 람다 인라인 처리

2. Vue의 `props` 및 `emits` 활용

• defineProps + defineEmits로 props/이벤트 정의
• 자식 컴포넌트에서 @click="select"로 이벤트 발생
• 부모는 @select="..."로 이벤트 리스닝
• props.value = 'X'는 Vue에서 경고 발생 (props는 읽기 전용)

3. Vue의 반응성 시스템

• reactive(Array(...))로 배열 감시 (Proxy 기반)
• squares[i] = 'X' 직접 수정 가능 (React의 slice() 대체)
• ref(xIsNext)로 플레이어 전환 상태 관리

4. `computed`의 활용

• winner 계산 속성: squares 변화 시 자동 재계산
• winner.value로 승자 상태 확인
• {{ winner ? ... : ... }} 템플릿 내 직접 사용

5. 템플릿 구조 비교

• React: onSelect={() => handleClick(i)} 인라인 람다
• Vue: @select="() => handleClick(...)" 템플릿 내 이벤트 핸들러
• v-for + :key로 HTML 중심 템플릿 구조 유지

결론

• Vue의 props/emits + reactive/computed로 React의 불변 상태 및 useMemo 복잡성을 간소화
• v-for + @select 기반 템플릿은 JSX 없이도 직관적 구조 유지
• 다음 단계: watch vs watchEffect, 중첩 컴포넌트 상태 관리, 폼 유효성 검증 학습 권장