📚 2월 17일 공부

컴포넌트 생명주기

Angular 에서 컴포넌트와 지시자는 생명주기를 갖는다.

생명주기란?

컴포넌트나 지시자가 생성되고 파괴될때까지의 과정을 말함.

왜 쓸까?

view에 필요한 컴포넌트를 생성하고 다른 view로 전환할때 사용하지 않는 컴포넌트를 소멸시켜줌

해당 시점에 우리 로직을 수행할 수 있도록.....하기 위해서 쓰는 것. (8가지가 있다)

으 일단 우선적으로 알아둘 것

• ngOnInIt() : 컴포넌트나 지시자가 생성될 때 호출되는 메서드. 생명주기의 초기화

• ngAfterViewInit(): 컴포넌트 뷰가 초기화 된 후 최초 1회 실행함

  로딩화면 구현하는데 생명주기땜에 오류나서 공부했음 ㅠㅜㅠ 흠,,,.....더 공부해야될 것 같음

flex box

레이아웃을 구현하기 쉽게 만드는 CSS (왜 이걸 이제야 알았지)

<div class="div1" style="display: flex-inline; width: 100%">
	<div class="div2" style="flex: 1">
			짠!
	</div>
	<div class="div3" style="flex: 3">
			안녕하세욤
	</div>
</div>

일단 뭐 간단하게 이렇게 코드로 짤 수 있고..... 말로 설명하는 것보다 머릿속으로 그림그려서 생각하는게 편함

display: flex-inline 스타일 있는 div의 속에 div 비율을 의미함.. 비율만 넣으면 알아서 자동으로 만들어줌 진짜 편하고 좋음

뭐 간단한 개념은 이 정도고 정렬이나 더 자세한 건 차차 공부하도록....... ..

데이터 바인딩

컴포넌트의 데이터를 웹페이지에 표시된 것과 연결하는 프로세스 component ↔ view

1) 삽입식 : 컴포넌트의 변수 → 뷰에 {{value}} 이런식으로

2) 프로퍼티 바인딩 : DOM속성에 표현식 바인딩

이런식 → <input type="text" [value]="budget"> 여기서 budget은 컴포넌트 변수임

3) 이벤트 바인딩 : (click) 머 이런거..

*4) 양방향 바인딩

: 뷰와 컴포넌트 클래스의 상태변화를 상호반영. 뷰의 상태가 변화하면 컴포넌트 클래스의 상태도 변화..

<input type="text" [(ngModel)] = "name" >
<p> {{ name }} </p>