Monkeykim's blog

Angular는 컴포넌트 간의 상호작용을 효과적으로 관리하기 위해 다양한 생명주기 훅(Lifecycle Hook)을 제공한다. 그 중 하나가 바로 ngOnChanges()인데, 이 훅은 @Input() 속성 값이 변경될 때마다 호출되며, 컴포넌트가 부모로부터 전달받은 데이터가 변했을 때 적절한 처리를 할 수 있도록 도와준다.ngOnChanges()란?ngOnChanges()는 Angular 컴포넌트의 생명주기 훅 중 가장 먼저 실행되는 메서드이다. 이 훅은 @Input() 데코레이터로 부모 컴포넌트로부터 전달받은 값이 변경될 때마다 호출된다. 변경된 값뿐만 아니라 이전 값도 확인할 수 있어, 값이 변할 때마다 원하는 로직을 수행할 수 있다.ngOnChanges()가 호출될 때ngOnChanges()는 다..

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..