js 개발자의 μ½”ν‹€λ¦° 적응기 1. ν™˜κ²½λ³€μˆ˜ μ„€μ •, compose 와 xml ui

2024. 1. 18. 23:48ㆍStudy_Develop/Kotlin

λ°˜μ‘ν˜•

 
 
 

 


μ½”ν‹€λ¦°μœΌλ‘œ μ œμž‘ν•˜κ³  μžˆλŠ” μ•± 개발 ν”„λ‘œμ νŠΈμ— νˆ¬μž… 2μ£Όμ „
λΆ€λž΄λΆ€λž΄ ν™˜κ²½μ„€μ •ν•˜κ³ 
μ½”ν‹€λ¦°μœΌλ‘œ μ–΄λ–»κ²Œ μ½”λ”©ν•˜λŠ”μ§€μ— λŒ€ν•œ
곡뢀λ₯Ό μ‹œμž‘ν–ˆλ‹€.
 
일단 코틀린을 ν•˜λ €λ©΄ μ•ˆλ“œλ‘œμ΄λ“œ μŠ€νŠœλ””μ˜€, μ½”ν‹€λ¦° ν™˜κ²½λ³€μˆ˜λ₯Ό μ„€μ •ν•΄μ•Ό 함!
 
μž‘λ…„ react native λ₯Ό μ‚¬μš©ν•œ ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•  λ•Œμ—λ„ ν™˜κ²½λ³€μˆ˜ 섀정을 ν•˜λŠλΌ
μ• λ₯Ό λ¨Ήμ—ˆλ˜ 기얡이 μžˆλŠ”λ°
그땐 일단 λ˜λŠ”κ²Œ μš°μ„ μ΄λΌ μ΄ν•΄ν•˜μ§€ λͺ»ν•˜κ³  
λΈ”λ‘œκ·Έ 무지성 λ”°λΌν•˜κΈ°λ§Œ ν–ˆλ˜ 기얡이 λ‚œλ‹€.
 
ν•˜μ§€λ§Œ μ°¨κ·Όμ°¨κ·Ό μ΄ν•΄ν•˜λ©΄μ„œ ν•΄λ³΄λ‹ˆ
크게 μ–΄λ €μš΄ 것은 μ•„λ…”λ‹€.
μ΄μ œμ•Ό ν™˜κ²½λ³€μˆ˜μ— λŒ€ν•΄ 살짝은 μ΄ν•΄ν•œ λŠλ‚Œμ΄ λ“ λ‹€.
 
 

 
 
ν™”λ©΄ ꡬ성뢀터 μ‹œμž‘ν•΄λ΄„
근데 λŒ€μΆ© uiκ΅¬μ„±ν•˜λŠ”κ±΄ μ–΄λ ΅μ§€ μ•Šμ•˜λŠ”λ°
ν™”λ©΄ λ³€κ²½, κΈ°λŠ₯ κ΅¬ν˜„ λ“±λ“± κΈ°λŠ₯듀은 μ–΄λ–»κ²Œ λ„£μ–΄μ•Ό ν•˜λŠ”μ§€
감도 μ•ˆμ™€μ„œ 
일단 'ν™λ“œλ‘œμ΄λ“œ' μœ νŠœλ²„λ‹˜ μ˜μƒμ„ μ •μ£Όν–‰ ν•˜μ˜€λ‹€.
 
그런데... 
ν™λ“œλ‘œμ΄λ“œ λ‹˜ μ˜μƒμ„ λ”°λΌν•˜λŠ”λ°,
λΉŒλ“œλŠ” λ˜λŠ”λ° 앱이 싀행이 μ•ˆλœλ‹€..
μ™œμΌκΉŒ?
 
μ°Ύμ•„λ³΄λ‹ˆ 
 

 
 
이 λΆ€λΆ„μ˜ ComponentActivity 그리고, AppCompatActivity 에 λŒ€ν•œ 이해도가 μ—†μ–΄
생긴 문제 μ˜€μŒ!
 

compose κΈ°λ³Έ μ•±κ³Ό xml  UI 차이

 
 
μ½”ν‹€λ¦°μ—λŠ” xml ui와 compose 에 λŒ€ν•œ 차이가 μžˆμ—ˆλ‹€.
 
xml uiκ°œλ°œμ„ ν•  λ•Œμ—λŠ” κΈ°λŠ₯은 클래슀, 화면은 xmlμ—μ„œ κ΅¬ν˜„ν•˜λŠ” 것
 
compose λ²„μ „μœΌλ‘œ κ°œλ°œμ„ ν•  λ–„μ—λŠ” ν΄λž˜μŠ€μ—μ„œ κΈ°λŠ₯κ³Ό ν™”λ©΄ 톡합을 κ΅¬μ„±ν•œλ‹€.
 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

 
 
μœ„λŠ” 잘λͺ»λœ μ½”λ“œ!!
이런 μ‹μœΌλ‘œ setContentView둜 xml화면을 μ—΄λ©΄μ„œ componentActivity()λ₯Ό μ¨λ†“μ€κ²Œ λ¬Έμ œμ˜€λ‹€.
 

 
 
μ²˜μŒμ— μƒμ„±λ˜λŠ” 이런 κΈ°λ³Έ μ½”λ“œλ“€μ΄ ν•„μš” 없을 쀄 μ•Œκ³  μ§€μ› λŠ”λ°
@Composable은 ν•„μˆ˜ μ½”λ“œμ΄κ³ , @previewλŠ” 미리보기 화면을 μ§€μ›ν•˜λŠ” μ½”λ“œμ˜€λ‹€!
 
@Composable은 JetPack Compose λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ”
μ–΄λ…Έν…Œμ΄μ…˜(λ‹€λ₯Έ ν”„λ‘œκ·Έλž¨μ—κ²Œ μœ μš©ν•œ 정보λ₯Ό μ œκ³΅ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” κ²ƒμœΌλ‘œ 주석과 같은 의미)이닀!
이게 호좜되면 ν•¨μˆ˜κ°€ composableν•˜λ‹€λŠ” 것을 λ‚˜νƒ€λ‚Έλ‹€.
ν•΄λ‹Ή ν•¨μˆ˜ λ‚΄μ—μ„œ ui의 μƒνƒœλ‚˜ λͺ¨μ–‘이 μ–΄λ–»κ²Œ κ΅¬μ„±λ˜λŠ”μ§€λ₯Ό μ •μ˜ν•œλ‹€.
Compose ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ˜ κ°œλ…μ„ 기반으둜 ν•˜μ—¬ uiλ₯Ό ν•¨μˆ˜λ‘œμ„œ μ·¨κΈ‰ν•˜κ³ , ν•¨μˆ˜κ°€ 호좜될 λ•Œλ§ˆλ‹€
ν•΄λ‹Ή uiλ₯Ό μƒˆλ‘œ 그리게 λœλ‹€.
 
  

 
 
 
 μ°Ύμ•„λ³΄λ‹ˆ μš”μ¦˜μ€ compose기반으둜 μ½”λ“œλ₯Ό μ§ λ‹€λŠ” 것 κ°™μ•„

compose κ΄€λ ¨ 기초 μ˜μƒλΆ€ν„° 찾아보며 μ°¨κ·Όμ°¨κ·Ό μ‹œμž‘ν•˜κ³  μžˆλ‹€. γ…‹

 

 

 

java기반의 μ–Έμ–΄λŠ” 처음이라.. 

일단 override, overloadλΆ€ν„° 이해가 잘 μ•ˆκ° γ…Žγ…Ž

 

but.. 

μ°¨κ·Όμ°¨κ·Ό μ΄ν•΄ν•˜λ©° 해보겠3..

λ‹€μŒμ€ ν™”λ©΄ μ „ν™˜μ–΄λ–»κ²Œ ν•˜λŠ”μ§€.. μ•Œμ•„λ³΄μ•„μ•Όκ² λ‹€.

 

그럼 20000..