angular를 처음 접하고나서 @output 혹은 @input 을 마주했을 때

굉장히 혼란스러웠고 지금도 쉽지만은 않습니다.

그럼에도 불구하고 프로젝트 과정에서 깨닫게 되었던 점과 output의 역할에 대해서

정리해보겠습니다.

#1 @output? 무슨 뜻인가.

거두절미하고 angular에서의 output은 어떤 의미를 내포하고 있는지 알아보겠습니다.

말 그대로 '바깥으로 나가다' 의 의미를 갖고있는데, output의 개념이 어떤 상황에서 쓰일 수 있는지 그 예제를 통해 먼저 알아보겠습니다.

Angular는 부모와 자식 컴포넌트의 개념이 있습니다. 어떤 컴포넌트가 있다고 가정을 해보고 그 안에 그 컴포넌트의 html파일에서 다른 컴포넌트를 다루고 있다면 그 관계가 부모자식간의 컴포넌트가 되는 것입니다.

이 부모자식간의 컴포넌트에서 @output은 자식이 되는 컴포넌트에서 부모가 되는 컴포넌트로 무엇을 전달하기 위해서 사용하는 angular의 디렉티브(지시자)입니다.

즉, '디렉티브'라고 말하는 놈이 말그대로 어딘가 속해있는 컴포넌트(A)를 (A)를 포함하고 있는 컴포넌트(B)에 무언가를 전달하라고 지시해주는 것입니다.

#2 실전 예제

로그인에 성공한 순간에 @output을 이용하여 자식이 부모에게 어떤 값을 보내면서 sign을 전달해준다.

다음 설명드릴 예제에서는 app.component가 부모 컴포넌트이고 login.component가 자식 컴포넌트가 됩니다.
#1의 설명에 의하면 login.component에서 app.component로 어떤 데이터를 전달하는데 이 때 @output을 이용해서 전달할 데이터를 지정한다는 것이죠.
먼저 login.component의코드를 살펴보겠습니다.

**로그인컴포넌트.ts**

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
 
 @Output() loginState = new EventEmitter<any>();


 login(){
 this.loginstate.emit(true);
 }

만약 login() 메소드가 실행이 된다면 EventEmitter의 emit 메소드에 의해서 true를 방출하게 되는 것이죠(emit)
그럼 이 방출된 true를 어디서받느냐, 바로 부모인 app.component에서 받게되는 것입니다.

즉 정리하자면, login컴포넌트에서 true 라는 값을 app.component에 전달하기위해(방출 혹은 emit) output 데코레이터를 이용한것이다.

그렇다면 이제 자식이 전달한 true라는 값을 부모가 어떻게 받느냐?

**app.component.html = 부모**

<app-login (loginState)="login_handler($event)" *ngIf="!loginOn"></app-login>

**app.component.ts**

login_handler(e){
    console.log(e);
    this.loginOn=e;
  }

위와 같이 앱 컴포넌트에는 로그인컴포넌트( <app-login> )를 자식으로 품고있다.
$event @output에서 전달(방출)한 데이터를 기억하는 angular의 약속된 형태이다. 그러므로 $event에는 로그인컴포넌트에서 방출한
true라는 값이 저장이 되어있다.

결국 앱컴포넌트의 login_handler 메소드로 true가 인자로 전달이 된다.<위 그림>

그래서 login_handler가 true를 받게되고 프로퍼티 loginOn까지 true를 전달하게 되는 것이죠. 결국 ngIf에 true가 오게 되므로써
로그인 성공시 *ngIf=!true가 되면소 로그인 창은 사라지는 알고리즘이 짜여진다.