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

이전시간 내용이 쉽지 않았습니다.
만들어 준 secondStudy 프로젝트 기반으로 컴포넌트에 대해서 다시 살펴보겠습니다.

우리가 여태껏 보아온 컴포넌트의 파일은 ts형식의 파일과 html파일입니다.
이러한 컴포넌트에서 셀렉터(selector)를 눈여겨 볼 필요가 있습니다.

컴포넌트 데코레이터에서 selector가 보이시나요?

저번시간에 우리는 app컴포넌트 html파일에 login컴포넌트의 셀렉터를 html테그처럼 붙여놓았고, dashboard컴포넌트의 셀렉터 또한 html 테그처럼 붙여놓았었습니다.

그렇게 붙여놓은 셀렉터 위치에 해당 컴포넌트에서 만든 html의 내용이 나타났었습니다.

또한 컴포넌트ts에 존재하였던 함수도 동작하였었지요.

그리고 ngIf 디렉티브를 통해서 보이기 가리기를 하였었습니다.

 

물론! app컴포넌트의 셀렉터도 사용되고있습니다.

바로 index.html이라는 파일에서 사용되고 있습니다.

index.html을 자세히 보시면 app컴포넌트의 셀렉터가 선언된 곳을 볼 수 있습니다.

 

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

아직 내용이 어려우므로 app컴포넌트의 셀렉터도 사용된다는 것만 이해하면 될 것 같습니다.

이러고보니 앵귤러는 규칙이 존재하는 것을 알 수 있습니다.
컴포넌트 ts파일에 존재하는 셀렉터 값이 다른 컴포넌트html파일 또는 index.html파일에 사용된다라는 점 입니다.
 * 물론 만들어놓고 안쓰는 컴포넌트의 셀렉터는 사용 안하겠지요.

갑자기 컴포넌트의 셀렉터에 대해서 다시 언급한 이유는, 이 셀렉터를 다른 컴포넌트html파일이나 index.html파일에 등록 해야만 컴포넌트가 생명(동작)을 부여받기 때문 입니다.
만약에 잘 만들어진 컴포넌트의 셀렉터가 어디에도 사용되지 않는다면 해당 컴포넌트는 아무런 행동도 하지 않습니다.
아무런 행동도 안한다는 것은 화면 어디에도 나타나지 않는다는 점 이며 내부의 내용 또한 동작하지 않는다는 점 입니다.

 

항상 컴포넌트는 각종 변수, 함수가 존재하는 ts파일, 화면 구성과 셀렉터를 표기할 html파일 2개를 포함한 내용이라고 생각 하여야 합니다.
물론 컴포넌트html파일 없이 ts파일 1개로 표기할 수 도 있습니다.   * 굳이 권장하지는 않습니다.
내가 만든 컴포넌트를 동작시키려면 셀렉터(selector)를 상위 컴포넌트에 붙인다라는 개념을 꼭 알아두어야 합니다!
* 상위 컴포넌트는 셀렉터가 붙여진 컴포넌트를 의미 합니다.

 

그러한 이유로 대부분 가장 맨 처음 만들어지는 app컴포넌트는 빈 화면으로 두는 경우가 많습니다.
app컴포넌트에 다양한 컴포넌트를 붙여두고 조건에 따라서 나타나기 보이기를 하고는 합니다.
 * 물론 router를 배우면 이유가 조금 달라집니다.

 

셀렉터는 통상적으로 "app-이름" 형식으로 붙여줍니다. (케밥표기법이라고도 합니다. 맛있겠군요?!)
당연히 이름이 겹쳐서는 안됩니다!
여기까지 컴포넌트와 셀렉터에 대한 내용을 다시한번 정리하여 보았습니다.
컴포넌트와 컴포넌트의 연결은 셀렉터! 잊지 말아야 합니다.

 

---

 

다음으로 살펴볼 내용은 컴포넌트와 컴포넌트간의 데이터를 주고 받는 방법 입니다.
컴포넌트간의 데이터 공유 방법은 바로 Input데코레이터, Output데코레이터를 활용하는 것 입니다.
여기서 Input 데코레이터는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 사용됩니다.

 

app컴포넌트에서 loginBool 변수가 있었습니다. 
해당 값을 우리는 login컴포넌트에 전달하기 위해서 login컴포넌트의 셀렉터 테그에 아래처럼 데이터를 전달 했습니다.
[login컴포넌트가 받는 변수명] = "전달할 데이터"

app컴포넌트에 있는 loginBool값을 login컴포넌트에 visible1이라는 변수에 전달 해 주었습니다.

 

이렇게 전달할 데이터를 하위 컴포넌트에서는 Input이라는 데코레이터를 통해서 받았습니다.
물론 변수명이 일치하지 않으면 오류가 발생하겠지요.

받을때는 Input 데코레이터 입니다.

 

이러한 방식으로 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하곤 합니다.

Input 데코레이터는 앵귤러의 기본 데코레이터 이므로 import를 할 때 불러오는 경로에 유의하여주세요.

다음으로, 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달 하려면 Output 데코레이터와 EventEmitter 클래스를 활용했었습니다.
해당 EventEmitter 클래스는 이벤트를 동기 또는 비동기식으로 전달 할 수 있는...
우리에게는 Output 데코레이터와 EventEmitter클래스와 같이 사용되는 일종의 규칙이라고 생각하면 좋을 것 같습니다.
이러한 Output 데코레이터가 선언 된 EventEmitter 클래스를 역시 데코레이터에 등록해서 전달 하였습니다.

Output데코레이터를 활용하여 login컴포넌트에서 sendMyEvent라는 변수를 emit해서 getEventThanks라는 app컴포넌트의 함수로 전달 했습니다.

 

소괄호의 내용이 바로 하위 컴포넌트의 EventEmitter클래스로 선언한 변수 명칭 입니다.
대입 연산자를 통해서 함수를 실행하는데 해당 함수는 상위 컴포넌트에 존재하는 함수 입니다.
여기서 흥미로운 점은 $event라는 변수를 통해서 데이터를 받는다는 것 입니다.
EventEmitter클래스를 통해서 생성된 이벤트는 $event 라는 값(상수)을 전달합니다.
해당 $event 값 이름을 아무 값으로 변경하면 오류가 나타나는 것을 볼 수 있습니다.

 

컴포넌트와 컴포넌트가 데이터를 서로 주고받는 이유를 우리가 만든 secondStudy 프로젝트를 통해 조금 더 자세히 설명하여 보겠습니다.

 

app컴포넌트에는 dashboard 컴포넌트가 ngIf 디렉티브에 의해서 false가 되어 보이지 않는 상황입니다.
오직 처음 화면인 login화면만 true로 인하여 보이고 있습니다.
로그인 시도는 "데이터베이스" 가 연결이 된 서버에 http 또는 https요청을 통해서 정보를 가져와햐 합니다. 
"데이터베이스" 가 연결이 된 서버에서 login컴포넌트가 tryToLogin이라는 함수를 통하여 로그인이 허용된 결과값을 받아 왔다고 가정하여 봅니다.

로그인 정보를 가져왔다고 하여 봅니다.

 

그런데, 로그인이 허용된 결과 값은 오직 tryToLogin함수가 있는 login컴포넌트만 가지고 있습니다.
로그인이 성공해서 다른 화면을 보여주어야 하는데 login컴포넌트만 성공여부 값을 가지고 있습니다.
그러면 app컴포넌트에게 "로그인성공" 값을 공유 해야되는 상황이 발생합니다.

해당 값 유뮤에 따라서 dashboard 컴포넌트를 보여줄지 아니면 계속해서 login컴포넌트를 보여줄지를 결정 해야 하기 때문 입니다.
바로 이럴 때가 컴포넌트가 서로 데이터를 주고 받아야 하는 이유인 것 입니다.

여기까지 컴포넌트간 데이터를 주고받는 방법에 대해서 살펴보았습니다.

이번시간에는 이전 시간에 만들어본 프로젝트를 통해서 컴포넌트의 동작에 대해서 조금 더 자세히 살펴보았습니다.
다음 시간에도 컴포넌트에 대해 조금 더 살펴보겠습니다.