728x90

이전 글 2025.03.31 - [Frontend/Vue 3] - [단일 파일 컴포넌트-1] 프로젝트 설정

컴포넌트의 조합

복잡한 화면의 Vue 애플리케이션은 여러 컴포넌트 조합하여 개발

부모-자식 관계로 `트리 구조` 형성

트리 구조 관계

여러 컴포넌트를 조합하면, 컴포넌트 간의 정보 전달 必

∴ `속성`과 `이벤트`를 이용함

속성

1) 속성을 이용한 정보 전달

부모 컴포넌트 → 자식 컴포넌트로 정보 전달하는 방법

  • 자식 컴포넌트는 `props` 옵션으로 속성 정의
  • 부모 컴포넌트는 `v-bind`를 이용해 자식 컴포넌트의 속성에 정보 전달
📌 속성으로 전달 받은 데이터 변경X = 읽기 전용
부모에서 속성 값 변경 👉 자식은 자동으로 다시 렌더링

자식 컴포넌트, props로 속성 받기

  • 부모 컴포넌트: App.vue
  • 자식 컴포넌트: TodoList.vue

왼쪽: App.vue / 오른쪽: TodoList.vue

  1. App 컴포넌트에서 data 옵션을 이용해 정의한 `todoList` 데이터
  2. v-bind 디렉티브를 이용해 (여기서는 `:todolist`) TodoList 컴포넌트에 전달
  3. TodoList 컴포넌트에서 props를 이용해 App 컴포넌트에서 전달한 todolist 데이터 받기

2) 속성을 이용해 객체 전달

전달할 속성이 많은 경우, 객체 하나로 통합해서 전달

객체의 속성이 컴포넌트에서 사용할 속성에 대응

TodoListItem.vue

위의 TodoList 컴포넌트의 자식인 `TodoListItem` 컴포넌트.

속성으로 전달받은 값은 읽기 전용, `기본 타입`인 경우는 자식 컴포넌트에서 변경 불가능

하지만, 객체나 배열 같은 `참조 타입`인 경우 변경할 수는 있으나 변경하지 마라.

왜 변경하지 말라는겨 ❓
속성의 목적은 자식 컴포넌트가 필요한 데이터를 속성으로 전달받아 UI를 렌더링 하기 위한 것임
자식에서 변경할 경우, 데이터 변경을 추적하기 어려움

 

3) 속성의 유효성 검증

속성에 대한 엄격한 유효성 검증 필요 시 사용

배열이 아닌 객체 형태로 속성 정의

props: {
  속성명1: {
    type: String,
    required: true,  // 필수 속성
    default: '기본 제목',
  },
  속성명2: 타입명,
  속성명3: [타입명1, 타입명2],
  ...
}
  • `속성명1`:  타입, 필수 전달 여부, 기본값
  • `속성명2`: 타입명만 지정
  • `속성명3`: 여러 타입 중의 하나 허용

타입으로 사용 가능한 생성자 함수

String Number Boolean Array
Object Date Function Symbol
default 옵션은 기본 타입의 값 리턴 시 `default:false` 같이 직접 리턴.
참조 타입의 경우, `default() { return ...  }` 같이 함수로 작성

사용자 정의 이벤트

1) 사용자 정의 이벤트를 이용한 정보 전달

`이벤트`: 자식 컴포넌트가 부모 컴포너트에게 정보를 전달하는 방법

자식 컴포넌트는 이벤트를 발신(`emit`)하고, 부모 컴포넌트는 `v-on` 디렉티브를 이용해 수신

사용 형식

자식 컴포넌트

this.$emit('이벤트이름', eventArgs1, eventArgs2 ... )

 

부모 컴포넌트

<child-component @event-name="handlerMethod" />

methods: {
	handlerMethod(eventArgs1, eventArgs2, …) {
		// 전달받은 아규먼트로 처리할 코드 작성
	}
}

예제

  • 자식 컴포넌트: InputName
  • 부모 컴포넌트: App2

왼쪽:InputName / 오른쪽: App2
이벤트 처리 과정

이벤트 발신을 위한 `$emit()` 내장 메서드는 직계 부모 컴포넌트로만 이벤트 전송

컴포넌트 계층 구조가 복잡한 경우, 중간에 거쳐가는 컴포넌트에서 이벤트 정보를 받아 다시 부모로 전달해야 함

TodoListItem > TodoList > App, 계층구조 이벤트 전달

이벤트 유효성 검증

속성에도 유효성 검증 기능이 있듯, 이벤트에서도 유효성 검사를 수행할 수 있음

이를 위해 `emits`라는 옵션을 등록해 유효성 검사 수행

const Component = {
	...
    emits : ['이벤트 명1', '이벤트 명2']
}

지정한 이벤트 이외의 이벤트 발생 시 경고 출력

const Component = {
	emits: {
    	이벤트명1: (e) =>{
        	// return true: 유효
            // return false: 유효하지 않음
        }
    ...
}

단순히 발신하는 이벤트 명 뿐만 아니라, 전달하는 이벤트 아규먼트의 유효성 여부 확인 가능

📌 emits 옵션만 살피면, 해당 컴포넌트에서 어떤 이벤트가 발생하는지 한눈에 알 수 있음
∴ 컴포넌트의 작동 방식에 대한 명확한 문서화를 위해 emits 옵션 정의 권장

예제

왼쪽: 경고 발생 / 아규먼트 유효성 여부 확인

 이벤트 에미터 (Event Emitter)

부모-자식-손자와 같은 많은 계층에서 이벤트 전달은 매우 힘듦

그리고 `형제 관계`에 있는 컴포넌트 사이 이벤트 전달은 기존 방법으로 개발하기 어려움

머가 힘듦 ❓
일일이 경로를 거슬러 올라가면서 이벤트 전달해야되니까.

이런 경우 사용하는 것 = `이벤트 에미터`

하나의 공유 이벤트 에미터를 만들어 두고, 모든 이벤트 정보가 에미터를 거쳐서 흘러가도록 함

이벤트 에미터 적용 방법

mitt 패키지 라이브러리로 사용함 → `https://github.com/developit/mitt`

현실에서는 잘 사용하지 않음
728x90

티스토리툴바