Monkeykim's blog

Angular를 사용하다 보면 부모 컴포넌트와 자식 컴포넌트 간의 데이터 통신이 필수적이다. 이때 중요한 두 가지 데코레이터가 바로 @Input()과 @Output()이다. 이 글에서 각각의 역할과 사용법을 예시를 통해 쉽게 설명하려고 한다.@Input() – 부모에서 자식으로 데이터 전달@Input()은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트에 텍스트 메시지나 객체와 같은 데이터를 보내고 싶을 때 유용하다.@Input() 사용 예시1. 부모 컴포넌트 (ParentComponent)부모 컴포넌트에서 자식 컴포넌트에 메시지를 전달하고자 한다.부모 컴포넌트// parent.component.tsimport { Component } from..

Angular에서는 컴포넌트 간에 데이터를 주고받을 때, 주로 부모-자식 관계를 활용한다. 그중에서 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달할 때 사용하는 것이 바로 @Output() 데코레이터와 EventEmitter이다.1. 자식 컴포넌트에서 EventEmitter 선언먼저, 자식 컴포넌트에서 @Output() 데코레이터로 이벤트를 선언한다. 이 이벤트는 부모 컴포넌트에 전달되어 특정 작업을 실행하게 만든다. 예를 들어, 자식 컴포넌트에서 버튼을 클릭했을 때 부모에게 그 정보를 전달하고 싶을 때 사용할 수 있다.import { Component, Output, EventEmitter } from '@angular/core';@Component({ selector: 'app-child', t..