Skip to content

Latest commit

ย 

History

History
63 lines (34 loc) ยท 2.26 KB

compose.md

File metadata and controls

63 lines (34 loc) ยท 2.26 KB

Compose

Compose๋ž€?

Jetpack Compose๋Š” ๋„ค์ดํ‹ฐ๋ธŒ UI๋ฅผ ๋นŒ๋“œํ•˜๊ธฐ ์œ„ํ•œ Android์˜ ์ตœ์‹  ๋„๊ตฌ ํ‚คํŠธ์ด๋‹ค.
Jetpack Compose๋Š” Android์—์„œ UI ๊ฐœ๋ฐœ์„ ๊ฐ„์†Œํ™”ํ•˜๊ณ  ๊ฐ€์†ํ™”ํ•œ๋‹ค.
์ ์€ ์ˆ˜์˜ ์ฝ”๋“œ, ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ ๋ฐ ์ง๊ด€์ ์ธ Kotlin API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•ฑ์„ ๋น ๋ฅด๊ณ  ์ƒ๋™๊ฐ ์žˆ๊ฒŒ ๊ตฌํ˜„๊ฐ€๋Šฅํ•˜๋‹ค.

์™œ ์•ˆ๋“œ๋กœ์ด๋“œ์—๋Š” ์ƒˆ๋กœ์šด UI ํˆดํ‚ท์ด ํ•„์š”ํ–ˆ๋Š”๊ฐ€?

  • ๊ธฐ์กด ์•ˆ๋“œ๋กœ์ด๋“œ UIํˆดํ‚ท(View)์€ 10๋…„๋„ ๋” ์ „์— ์„ค๊ณ„๋œ ๊ฒƒ์ด๊ธฐ๋•Œ๋ฌธ์— ํ•œ์ •๋œ ํ•˜๋“œ์›จ์–ด์— ๋งž์ถฐ ์„ค๊ณ„๋˜์–ด์žˆ์Œ
  • ๊ธฐ์กด ์•ˆ๋“œ๋กœ์ด๋“œ View์˜ ํ•œ๊ณ„๋ฅผ ๋„˜์–ด์„ค๋ ค๋ฉด ํ”Œ๋žซํผ๊ณผ์˜ ๊ฐ•ํ•œ ๊ฒฐํ•ฉ์„ ๋Š์–ด์•ผ๋งŒ ํ–ˆ์Œ
  • ๊ธฐ์กด๊ณผ ๊ฐ™์ด compat( ํ˜ธํ™˜์„ฑ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ)๋ฅผ ๊ณ„์† ์ œ๊ณตํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค๋Š” ์™„์ „ํžˆ ๋ถ„๋ฆฌ๋œ ํ”Œ๋žซํผ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•จ
  • ๊ฐœ๋ฐœ ์–ธ์–ด์˜ ๋ณ€๊ฒฝ (Compose๋Š” Java๊ฐ€ ์•„๋‹Œ Kotlin์„ ๊ฐœ๋ฐœ์–ธ์–ด๋กœ ์‚ฌ์šฉ)

Compose ํŠน์ง•

  • Declarative UI (์„ ์–ธ์ ์ธ UI)
  • ๊ธฐ์กด์— ์žˆ๋˜ View์™€ ์ƒํ˜ธ ์šด์šฉ ๊ฐ€๋Šฅ
  • ๋ผ์ดํ”„์‚ฌ์ดํด์•ˆ์—์„œ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”๊ฐ€์—๋Œ€ํ•ด์„œ(ํƒ€์ด๋ฐ์—๋Œ€ํ•ด์„œ) Compose ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ๋˜๋ฉด ๊ณ ๋ฏผํ•  ํ•„์š”๊ฐ€ ์—†์Œ
  • ์ฝ”๋“œ๊ฐ์†Œ, ๋น ๋ฅธ๊ฐœ๋ฐœ๊ณผ์ •, ๊ฐ•๋ ฅํ•œ ์„ฑ๋Šฅ

Composable ํ•จ์ˆ˜

  • @Composable ์–ด๋…ธํ…Œ์ด์…˜์œผ๋กœ ์ง€์ •ํ•œ๋‹ค
  • Composable ํ•จ์ˆ˜๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ด ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ด ์•ฑ ๋กœ์ง์ด UI๋ฅผ ํ˜•์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค
  • Composable ํ•จ์ˆ˜๋Š” ์•„๋ฌด๊ฒƒ๋„ ๋ฐ˜ํ™˜ํ•˜์ง€ ์•Š๋Š”๋‹ค
  • ํ•จ์ˆ˜๋Š” ๋ฉฑ๋“ฑ์›์ด๋ฉฐ ๋ถ€์ž‘์šฉ์ด ์—†๋‹ค
  • ํ•จ์ˆ˜๋Š” ๋™์ผํ•œ ์ธ์ˆ˜๋กœ ์—ฌ๋Ÿฌ๋ฒˆ ํ˜ธ์ถœ๋  ๋•Œ ๋™์ผํ•œ ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•˜๋ฉฐ, ํ•จ์ˆ˜๋Š” ์†์„ฑ ๋˜๋Š” ์ „์—ญ๋ณ€์ˆ˜ ์ˆ˜์ •๊ณผ ๊ฐ™์€ ๋ถ€์ž‘์šฉ ์—†์ด UI๋ฅผ ํ˜•์„ฑํ•œ๋‹ค

ReComposition

๋ช…๋ นํ˜•๋ฐฉ์‹์—์„œ๋Š” ์œ„์ ฏ์„ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด ์œ„์ ฏ์˜ setter๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋‚ด๋ถ€ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•œ๋‹ค.
Compose์—์„œ๋Š” ์ƒˆ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Composableํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ํ•จ์ˆ˜๊ฐ€ ReComposition ๋˜๋ฉฐ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ํ•จ์ˆ˜์—์„œ ๋‚ด๋ณด๋‚ธ ์œ„์ ฏ์ด ์ƒˆ๋ฐ์ดํ„ฐ๋กœ ๋‹ค์‹œ ๊ทธ๋ ค์ง„๋‹ค.
Compose Framework๋Š” ๋ณ€๊ฒฝ๋œ ๊ตฌ์„ฑ์š”์†Œ๋“ค๋งŒ ์ง€๋Šฅ์ ์œผ๋กœ ์žฌ๊ตฌ์„ฑ ํ•  ์ˆ˜ ์žˆ๋‹ค.

State Hoisting

Compose Layout

  • Row
  • Column
  • Constraint
  • Layout

Compose Architecture

Compose Animation

Compose Navigation