Angular - 컴포넌트의 연결과 데이터 전달방법

컴포넌트와 컴포넌트의 연결

앵귤러에서 index.html 과 main.ts 파일은 앵귤러가 가장 처음 동작하는 파일을 의미합니다.

컴포넌트 ts파일에 존재하는 셀렉터 값이 다른 컴포넌트 html파일 또는 index.html 파일에 사용된다!
→ 셀렉터를 다른 컴포넌트 html파일이나, index.html 파일에 등록해야만 컴포넌트가 생명(동작)을 부여받습니다.

셀렉터가 어디에도 사용되지 않는다면 해당 컴포넌트는 아무런 행동도 할 수 없습니다.

가장 맨 처음 만들어지는 app컴포넌트는 빈 화면으로 두는 경우가 많습니다.
→ 이는 app컴포넌트에 따라서 다양한 컴포넌트를 붙여두고 조건에 따라서 나타나게, 보이게 하기 위함입니다. (app컴포넌트는 다른 컴포넌트를 컨트롤하는 역할을 주로 합니다.)

컴포넌트와 컴포넌트의 연결은 셀렉터!

컴포넌트간 데이터를 주고 받는 방법

컴포넌트간 데이터 공유 방법은 Input데코레이터(@input()), Output데코레이터(@Output())를 활용하는 것 입니다.

상위컴포넌트에서 하위컴포넌트로 데이터를 전달

app컴포넌트에서 loninBool 변수에 값을 전달하기 위해서 login컴포넌트의 셀렉터 태그에 아래처럼 데이터를 전달 했습니다.

[login컴포넌트가 받는 변수명] = “전달할 데이터”

이렇게 전달할 데이터를 하위 컴포넌트(login컴포넌트)에서 @Input이라는 데코레이터를 통해서 받습니다.

하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달

하위 컴포넌트에서 상위 컴포넌트로 이벤트 전달시에 @Output 데코레이터와 EventEmitter 클래스를 활용했습니다.

 

이를 통해서 하위 컴포넌트에서는 sendMyEvent라는 변수를 emit해서 getEventThanks라는 app컴포넌트의 함수로 전달했습니다.

 

EventEmitter클래스를 통해서 생성된 이벤트는 $event 라는 값(상수)을 전달하며, 이를 통해서 데이터를 받을수 있습니다.

app컴포넌트에는 boardBool값이 생성될때 false할당 되었고, 이는 ngIf디렉티브에 의해서 dashboard 컴포넌트가 보이지 않는 상황입니다.

로그인 시도는 “데이터베이스”가 연결이 된 서버에 http 또는 https요청을 통해서 정보를 가져와야 합니다.

DB가 연결이 된 서버에서 login컴포넌트가 tryToLogin이라는 함수를 통하여 로그인이 허용된 결과값을 받아 왔다고 가정하여 보면,

해당 값 유무에 따라서 dashboard 컴포넌트를 보여줄지 아니면 계속해서 login컴포넌트를 보여줄지를 결정 해야하기 때문입니다.

바로 이럴 때 컴포넌트가 서로 데이터를 주고 받아야하는 이유입니다.

 

 

 

참고

https://lts0606.tistory.com/354

앵귤러 튜토리얼(Angular tutorial) - 10 : 컴포넌트, 셀렉터