Programmazione di Ku0re

Angular 4 Tutorial Sesto) Angular 4 HeroEditor - 3 본문

Programmazione/Angular

Angular 4 Tutorial Sesto) Angular 4 HeroEditor - 3

ku0re kuore 2017. 5. 3. 16:59

이 글은 단순히 Angular 공식사이트의 Tutorial을 정리해 놓은

Alexband님의 블로그 포스팅을 보고  Angular를 공부하면서 내용을 정리한 글입니다.

공부하실 분은 Angular 공식사이트의 Tutorial을 보시고 제 포스팅은 참고만 하세요! :)


*Angular 4는 Angular 2와 문법적으로 큰 차이는 없다고 합니다.




Angular 4 HeroEditor - 3


이전 포스팅에 이어서 Hero Editor를 계속해서 만들어 보자.


이번엔 Multiple Component 파트이다.


현재까지의 작업은 컴포넌트 하나에 모든 로직이 들어가 있다.


그렇게되면 앱의 규모가 커질수록 유지 보수가 어려워진다.


그래서 이제 각각의 컴포넌트로 나누는 작업이 필요하다.

(사실 처음부터 나눠서 작업하는 것이 좋다.)


현재 만들어진 부분에서 먼저 Hero detail 부분을 떼어내서 컴포넌트로 만들어 보자.


/src/app/ 디렉터리 내부에 hero-detail 디렉터리를 만들고 그 안에 hero-detail.component.ts 파일과 hero.detail.component.html 파일을 만들자.



여기서 잠깐, 지금 우리가 사용하는 angular-cli를 사용하면 일일이 디렉터리와 파일을 만들지 않아도 Component, Directive, Pipe, Service 등 모두 커맨드 한방으로 만들어 준다.


먼저 cmd 또는 Terminal 창에서 현재 프로젝트 디렉터리로 이동하자.


그리고 ng g component hero-detail 명령어를 사용하자.



그러면 위와 같이 /src/app/hero-detail 디렉터리를 만들고 내부에 ts, html, css 파일을 뚝딱 만들어 준다.


와 angular-cli 겁나 편하다.



/src/app/hero-detail/hero-detail.component.ts



파일을 보니 깔끔하게 초기화 되어있다.


저기서 OnInit은 곧 배우게 되니 지금은 무시하자.


이제 Template 파일도 떼어내야 한다.


이전 app.component.html 파일로 가서 detail 부분을 가져오자.


그리고 hero-detail.component.html 파일에 붙여넣기 하자.



/src/app/hero-detail/hero-detail.component.html



자, 여기서 달라진 점이 있다.


selectedHero 부분이 그냥 hero로 바뀌었다.


컴포넌트를 떼어냈으니 현재 hero-detail에서는 selectedHero라는 변수를 더 이상 사용하지 않기 때문이다.


hero-detail에서는 hero라는 새로운 변수를 사용할 예정이기에 selectedHero는 hero로 이름을 바꿨다.


자, 이제 hero-detail.component.tx에 hero : Hero 라는 변수를 주면 되는가? 안된다.


Hero라는 모델은 app.component.ts 파일에 정의되어 있다.


이 것을 hero-detail에서 사용하기 위해서는 해당 모델을 import 해야 된다.


그럼 hero-detail 컴포넌트에서 import { Hero } from '../app.component' 코드로 불러오면 되지만 이는 우리가 원하는 디자인 패턴이 아니다.


Component, Model, Service의 구분을 명확하게 하기 위해 Hero라는 새로운 모델 파일을 만들고 나머지 컴포넌트가 공동으로 이를 가져다 쓰도록 하자.


그러기 위해 /src/app 디렉터리에 hero.ts 파일을 만들고 app.component.ts 파일에서 Hero Class를 가져와서 붙여넣기 하자.



/src/app/hero.ts



심플하게 모델 파일이 완성되었다.


이제 이 것을 사용하기 위해 app.component.ts 파일 상단에 import { Hero } from './hero'; 코드를 넣어주자.


추가로 hero-detail.component.ts 파일 상단에도 import { Hero } from '../hero';  코드를 넣어주자.



이제 다시 hero-detail을 보자.


해당 hero-detail에 선택된 영웅을 가져와서 보여주기 위해 app.component에서 selectedHero를 가져와야 한다.


그럼 이 것을 hero-detail에 어떻게 넘겨 줄 것인가?


먼저 app.component.html 파일로 가서 코드를 추가한다.



/src/app/app.component.html



hero-detail의 selector인 app-hero-detail 태그가 추가 되었다.


이렇게 되면 해당 부분에 hero-detail 컴포넌트가 나타나게 된다.


여기서 [hero]="selectedHero"라는 부분이 있는데 이 부분이 바로 자식 컴포넌트에게 부모가 데이터를 바인딩 하는 부분이다.


자식 컴포넌트의 hero라는 변수에 selectedHero를 대입한다는 것이다.


추가로 설명하면 []부분은 속성 값을 지정할 때 사용한다.


그럼 app-hero-detail 즉 hero-detail 컴포넌트의 속성=변수 hero 라는 것을 찾아서 selectedHero를 준다 라는게 성립한다.



이제 hero-detail 컴포넌트에서 hero라는 변수는 부모에게서 입력받는 변수라는 것을 설정해줘야 한다.


그러기 위해 hero-detail.component.ts 파일을 수정하자.


/src/app/hero-detail/hero-detail.component.ts



추가된 부분은 import 부분에서 Input을 새롭게 import 하였고 내부 로직 Class에서 @Input()이 추가 되었다.


@Input()이 바로 해당 변수는 입력 받는 변수라고 알려주는 역할을 한다.


이제 잘 동작하는지 보기 전에 Angular에서 component를 추가하고, 컴포넌트 간의 의존성을 유지하기 위해서는 연결을 시켜줘야 한다.


한마디로 app.component에 hero-detail을 import 시켜줘야 app.component에서 해당 컴포넌트를 인식하고 사용한다는 것이다.


그럼 app.component 파일 상단에 hero-detail 컴포넌트를 import 시켜줘야 할까?


예전 Angular 2에서는 그래야 했지만 Angular가 버전업을 거듭하면서 더욱 편리하게 변했다.


app.module 파일에서 이 모든 것을 관리할 수 있게 되었다.


그래서 app.module.ts 파일에서 hero-detail 컴포넌트를 추가 시켜주면 다른 어떤 컴포넌트에서도 hero-detail 컴포넌트를 사용할 수 있다.



자 그럼 app.module.ts 파일로 가보자.


/src/app/app.module.ts



그런데 확인해보니 angular-cli가 이미 hero-detail까지 import하고 declarations에도 추가한 것을 볼 수 있다.


cli 명령어로 생성할 시 자동으로 app.module 파일에 추가 시켜준다. 엄청 편하다.!



그럼 이제 app이 잘 작동하는지 확인해보자.



잘 작동한다.


그럼 이번 포스팅은 여기서 끝!



ps> cli 이놈 아주 만능이여 만능

0 Comments
댓글쓰기 폼