2022. 10. 5. 00:35ㆍ프론트엔드개발/Angular
안녕하세요~ totally 개발자입니다.
이번 시간에는 Component에 관해서 살펴보도록 하겠습니다. 여러 개의 Component들로 웹페이지가 구성이 되기 때문에 Component에 대해서 반드시 이해가 필요합니다.
앵귤러에서 component를 생성할 때, 수동으로 하나씩 파일을 만들어서 생성하는 것이 아니라 Terminal을 열어서 현재 프로젝트 경로인지 확인한 뒤, ng generate component 컴포넌트명을 입력해주면 되며, 간단히 ng g c 컴포넌트명으로만 적어서 실행 가능합니다. 실행하면 위의 이미지처럼 app 하위 디렉토리 안에 header라는 컴포넌트가 생성되었음을 알 수 있고 app.module.ts 파일 내에 5번째 줄에 자동으로 import { HeaderComponent } from './header/header.component';처럼 임포트가 되며, 9번째 줄처럼 HeaderComponent,가 자동으로 생성됩니다.
추가적으로 about 컴포넌트가 하나 추가해주어 AboutComponent가 HeaderComponent에 이어 생성되었음을 확인할 수 있습니다.
이 about.component.html 파일을 열어보면 <p>about works!</p>라고 나와 있는데 바로 이 부분이 about 컴포넌트의 html 부분이 됩니다.
이 header.component.html과 about.component.html를 app.component.html에 가져오기 위해서는 위의 이미지처럼 2번째, 3번째 라인의 <app-header></app-header>과 <app-about></app-about>으로 적어주면 됩니다. 이 app-header selector의 기준은 아래 이미지를 보시면 됩니다.
위 이미지를 보시면 header.component.ts 파일인데, 4번째 줄에 selector: 'app-header'라고 명시되어 있습니다. 그렇기 때문에 위에서 <app-header>로 불러와야 하는 것입니다.
about.component.ts 파일 역시 header.component.ts 파일과 같은 방식으로 app-으로 시작되고 있습니다. 그래서 컴포넌트들을 app으로 가져와서 사용할 때에는 이 selector를 사용하시면 되고 또한 변경도 가능하니 상황에 따라 변경해서 사용하시면 됩니다.
ng serve -o를 입력하여 앵귤러를 serve 하여 브라우저에서 바로 열려서 볼 수 있게 터미널에 입력해줍니다.
위처럼 header works! about works!라고 출력되면 성공입니다. 오늘 이 시간에는 component와 component를 불러오는 방법에 관해서 살펴보았습니다. 감사합니다.
'프론트엔드개발 > Angular' 카테고리의 다른 글
| [004] 앵귤러 (Angular) - Component with inline template (0) | 2022.10.10 |
|---|---|
| [003] 앵귤러 (Angular) - Component with inline style (0) | 2022.10.06 |
| [001] 앵귤러 (Angular) - Hello World (2) | 2022.10.03 |