๐Ÿ“š 2์›” 17์ผ ๊ณต๋ถ€

2ujinยท2020๋…„ 3์›” 14์ผ
0

๐Ÿ“’ ๊ณต๋ถ€ํ–ˆ๋‹ค

๋ชฉ๋ก ๋ณด๊ธฐ
1/1
post-thumbnail

์ปดํฌ๋„ŒํŠธ ์ƒ๋ช…์ฃผ๊ธฐ

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>
profile
๋ž‘ํ˜ธ

0๊ฐœ์˜ ๋Œ“๊ธ€