였늘 μ΄μ‹œκ°„μ—λŠ” flutter κΈ°μ΄ˆλ‚΄μš©μ„ λ°°μ› μŠ΅λ‹ˆλ‹€.

ν•„μˆ˜ μœ„μ ―λΆ€ν„° statefulWidget, statelessWidget λ“± λ‹€μ–‘ν•œ μœ„μ ―μ„ μ•Œμˆ˜ μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

스크란샷 2023-07-08 α„‹α…©α„Œα…₯ᆫ 3.37.56.png

스크란샷 2023-07-08 α„‹α…©α„Œα…₯ᆫ 3.39.36.png

statelessWidget과 statefulWidget 차이점

**StatelessWidget**은 λ³€κ²½ λΆˆκ°€λŠ₯ν•œ μœ„μ ―μ„ λ‚˜νƒ€λ‚΄λ©°, ν•œ 번 μƒμ„±λ˜λ©΄ κ·Έ μƒνƒœλ₯Ό λ³€κ²½ν•  수 μ—†μŠ΅λ‹ˆλ‹€. μ΄λŠ” μœ„μ ―μ΄ λΉŒλ“œλ˜κ³  λ‚˜λ©΄ ν•΄λ‹Ή μœ„μ ―μ˜ μ†μ„±μ΄λ‚˜ ꡬ성 μš”μ†Œκ°€ λ³€κ²½λ˜μ§€ μ•ŠλŠ”λ‹€λŠ” μ˜λ―Έμž…λ‹ˆλ‹€. λ”°λΌμ„œ **StatelessWidget**은 주둜 정적인 μ½˜ν…μΈ λ₯Ό ν‘œμ‹œν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, ν…μŠ€νŠΈ, 이미지, μ•„μ΄μ½˜ 등을 ν‘œμ‹œν•˜λŠ” λ‹¨μˆœν•œ μœ„μ ―μ΄λ‚˜ λ ˆμ΄μ•„μ›ƒμ„ κ΅¬μ„±ν•˜λŠ” 데 주둜 μ‚¬μš©λ©λ‹ˆλ‹€.

λ°˜λ©΄μ— **StatefulWidget**은 λ³€κ²½ κ°€λŠ₯ν•œ μœ„μ ―μ„ λ‚˜νƒ€λ‚΄λ©°, μœ„μ ―μ˜ μƒνƒœλ₯Ό λ™μ μœΌλ‘œ λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€. **StatefulWidget**은 **State**라고 λΆˆλ¦¬λŠ” μƒνƒœ 객체와 ν•¨κ»˜ μ‚¬μš©λ©λ‹ˆλ‹€. **State**λŠ” μœ„μ ―μ˜ μƒνƒœλ₯Ό λ‚˜νƒ€λ‚΄λ©°, μƒνƒœμ— 따라 μœ„μ ―μ΄ λ‹€μ‹œ λΉŒλ“œλ  수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό 톡해 μ‚¬μš©μž μž…λ ₯, 데이터 λ³€κ²½, μ• λ‹ˆλ©”μ΄μ…˜ λ“± 동적인 상황에 λŒ€μ‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μœ„μ˜ μ˜ˆμ œμ—μ„œ **MyWidget**은 **StatefulWidget**이며, **MyWidget**의 μƒνƒœλ₯Ό λ‚˜νƒ€λ‚΄λŠ” _MyWidgetState 클래슀λ₯Ό κ°€μ§‘λ‹ˆλ‹€. μƒνƒœ ν΄λž˜μŠ€λŠ” setState λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•˜μ—¬ μƒνƒœμ˜ 변경을 μ•Œλ¦΄ 수 μžˆμŠ΅λ‹ˆλ‹€. μœ„ μ˜ˆμ œμ—μ„œλŠ” λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ changeText λ©”μ„œλ“œκ°€ ν˜ΈμΆœλ˜μ–΄ ν…μŠ€νŠΈκ°€ 'Hello'μ—μ„œ 'World'둜 λ³€κ²½λ˜κ³ , ν•΄λ‹Ή λ³€κ²½ 사항이 화면에 λ°˜μ˜λ©λ‹ˆλ‹€.

λ”°λΌμ„œ, **StatelessWidget**은 정적인 μœ„μ ―μ„ ν‘œν˜„ν•˜κ³ , **StatefulWidget**은 동적인 μƒνƒœλ₯Ό κ°€μ§€λŠ” μœ„μ ―μ„ ν‘œν˜„ν•©λ‹ˆλ‹€.

YouTube UI Clone μž‘μ—…

스크란샷 2023-07-08 α„‹α…©α„Œα…₯ᆫ 3.52.54.png

스크란샷 2023-07-08 α„‹α…©α„Œα…₯ᆫ 3.54.51.png

스크란샷 2023-07-08 α„‹α…©α„Œα…₯ᆫ 3.55.39.png

스크란샷 2023-07-08 α„‹α…©α„Œα…₯ᆫ 3.57.51.png

μš°μ—¬κ³‘μ ˆμ΄ λ§Žμ•˜λ˜ 첫 UI Clone μž‘μ—…..

κΈ°μ–΅ν•˜κ³  싢은 μ½”λ“œλΌλ©΄β€¦

스크란샷 2023-07-08 α„‹α…©α„Œα…₯ᆫ 3.59.43.png