์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

[ํ”Œ๋Ÿฌํ„ฐ ์ƒํƒœ๊ด€๋ฆฌ] Bloc ๋งˆ์Šคํ„ฐ ์ฝ”์Šค ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‘์šฉ๊นŒ์ง€!

์ด ์˜์ƒ ์‹œ๋ฆฌ์ฆˆ์—์„œ Bloc์— ๋Œ€ํ•ด ์ตœ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ๋  ์ˆ˜ ์žˆ๋„๋ก ์„ค๋ช… ๋ฐ ์˜ˆ์ œ์†Œ์Šค๊ฐ€ ํฌํ•จ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Bloc์„ ์‚ฌ์šฉํ•˜๋Š”์ด์œ 

  • Stream

  • flutter_bloc_widget

  • bloc๊ณผ cubit ๋น„๊ต

  • bloc_concurrency ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง

  • bloc๊ฐ„ ํ†ต์‹  ๋ฐฉ๋ฒ•

ํ”Œ๋Ÿฌํ„ฐ bloc์€ ์‹ค๋ฌด์— ์–ด๋–ป๊ฒŒ ์“ฐ๋ƒ๊ณ ์š”?
์ด ๊ฐ•์˜์—์„œ ํ™•์ธํ•ด๋ณด์„ธ์š”! ๐Ÿค—

ํ”Œ๋Ÿฌํ„ฐ bloc์˜
๊ธฐ๋ณธ๋ถ€ํ„ฐ ์‘์šฉ๊นŒ์ง€ ๐Ÿ“Œ

ํ”Œ๋Ÿฌํ„ฐ์—๋Š” ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋‹ค์–‘ํ•˜๊ฒŒ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. bloc, getx, provider, riverpod ๋“ฑ ๊ฐœ๋ฐœ์ž ์ทจํ–ฅ์— ๋งž์ถฐ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ตญ๋‚ด/ํ•ด์™ธ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์—์„œ ๊ฐ€์žฅ ์ ํ•ฉํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋‹จ์—ฐ Bloc์„ ๊ผฝ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌด์Šจ ์ด์œ ์—์„œ bloc์ด ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์— ์ ํ•ฉํ•œ์ง€ ์•Œ์•„๋ณด๊ณ  ์‚ฌ์šฉ ๋ฐฉ๋ฒ•๊นŒ์ง€ ์‚ดํŽด๋ณด๋ฉด์„œ ์‹ค๋ฌด ํ”„๋กœ์ ํŠธ์— Bloc์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์›€์„ ๋“œ๋ฆฌ๊ณ ์ž ์˜์ƒ์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

๋ณธ ๊ฐ•์˜๋Š” ์ œ๊ฐ€ ์ •๋ฆฌํ•œ ๋‚ด์šฉ ๋ฐ ์‹ค๋ฌด์—์„œ ์‚ฌ์šฉํ•œ ๊ฒฝํ—˜์„ ๋ฐ”ํƒ•์œผ๋กœ ์ œ์ž‘๋œ ์˜์ƒ์ž…๋‹ˆ๋‹ค. ๊ฐ•์˜์—์„œ๋Š” ํ”Œ๋Ÿฌํ„ฐ bloc ๊ธฐ๋ณธ๋ถ€ํ„ฐ ์‘์šฉ, ์‚ฌ์šฉ๋ฒ•์„ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๋‹จ์ˆœํ•œ ์‚ฌ์šฉ๋ฒ•๋งŒ ์•Œ๊ณ  ๋„˜์–ด๊ฐ€๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๋‹ค๋ฅธ ์ƒํƒœ๊ด€๋ฆฌ getx์™€ ๋น„๊ตํ•˜์—ฌ ๋ฌด์—‡์ด ๋‹ค๋ฅธ์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒํƒœ๊ด€๋ฆฌ ์—†์ด ๊ฐœ๋ฐœ์€ ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€์™€ ๋‹ค๋ฅธ ์ƒํƒœ๊ด€๋ฆฌ Getx๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋ฅผ ๋น„๊ตํ•˜๋ฉด์„œ Bloc์˜ ํŠน์„ฑ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์™œ bloc์„ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ์š”? ๐Ÿง

  1. ๋ทฐ ์˜์—ญ๊ณผ ๋น„์ฆˆ๋‹ˆ์Šค ์˜์—ญ์„ ์‰ฝ๊ฒŒ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋‹ค.
  2. ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์‰ฝ๊ณ , ์žฌ์‚ฌ์šฉ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.
  3. ์ด๋ฒคํŠธ ํŠธ๋ž˜ํ‚น์„ ํ†ตํ•ฉ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  4. ๋งŽ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ํ•˜๋‚˜์˜ ์ฝ”๋“œ ๋ฒ ์ด์Šค๋กœ ์ผ์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  5. Github์—์„œ ๊ฐ€์žฅ ๋†’์€ Star ์ˆ˜๋ฅผ ๋ฐ›์€ ํ”Œ๋Ÿฌํ„ฐ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

ํ•™์Šต ๋‚ด์šฉ ๐Ÿ“š

1. ์™œ ๋ธ”๋ก์„ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š”๊ฐ€?

  •  bloc์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์ด์œ  5๊ฐ€์ง€์— ๋Œ€ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

2. Stream ์ดํ•ดํ•˜๊ธฐ

  •  bloc์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ๋Š” stream์ž…๋‹ˆ๋‹ค. ์ŠคํŠธ๋ฆผ์ด ๋ฌด์—‡์ธ์ง€ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ดํ•ดํ•˜๊ณ  ๋„˜์–ด๊ฐ‘์‹œ๋‹ค. 

3. Flutter_bloc ์œ„์ ฏ (์ƒ/ํ•˜)

  • ํ”Œ๋Ÿฌํ„ฐ bloc widget์—๋Š” ์–ด๋–ค ๊ฒƒ๋“ค์ด ์žˆ๋Š”์ง€ ๋ฐ˜๋“œ์‹œ ์•Œ์•„์•ผ ํ•˜๋Š” ์œ„์ ฏ๋“ค๊ณผ, ์•Œ์•„๋‘๋ฉด ์ข‹์€ ์œ„์ ฏ๋“ค๋กœ ๋‚˜๋ˆ„์–ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

4. ๋”ํ•˜๊ธฐ ๊ธฐ๋ณธ ์˜ˆ์ œ๋กœ ๋ณด๋Š” Bloc/Cubit 

  • Bloc core์— ๋Œ€ํ•ด ๋”ํ•˜๊ธฐ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด Bloc/Cubit์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค. getx์™€ ์–ด๋–ป๊ฒŒ ๊ตฌ์กฐ๊ฐ€ ๋‹ค๋ฅธ์ง€ ๋น„๊ตํ•˜์—ฌ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.  

5. Bloc๊ณผ Cubit ์ค‘ Bloc์ด ์ข‹์€ ์ด์œ ๋Š”?

  • bloc์—๋Š” cubit์— ์—†๋Š” ๊ธฐ๋Šฅ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๋ถ€๋ถ„์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

6. Bloc_concurrency ํŒจํ‚ค์ง€ ์‚ดํŽด๋ณด๊ธฐ 

  • Bloc์—์„œ ์‚ฌ์šฉ๋˜๋Š” transformer ์˜ต์…˜์„ ํ†ตํ•ด ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณต๋˜๋Š” ์ด๋ฒคํŠธ ์ œ์–ด ๋ฐฉ์‹์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

7. ์‚ฌ์šฉ์ž ์กฐํšŒ ๋งŒ๋“ค๊ธฐ

  • ์‚ฌ์šฉ์ž ์กฐํšŒ API๋ฅผ ํ†ตํ•ด setState ๋ฐฉ์‹, Getx๋ฐฉ์‹, Cubit ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐฉ์‹ 2๊ฐ€์ง€ ๋ชจ๋‘ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.

 

8. bloc ๊ฐ„ ํ†ต์‹  ๋ฐฉ๋ฒ•  

  • bloc๊ณผ bloc ๊ฐ„ ์˜์กด์„ฑ์„ ๋งบ์ง€ ์•Š์œผ๋ฉด์„œ ํ†ต์‹ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

 

 




์˜ˆ์ƒ ์งˆ๋ฌธ Q&A ๐Ÿ’ฌ

Q. ํ”Œ๋Ÿฌํ„ฐ ์ž…๋ฌธ์ž๋„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”?

๋‹คํŠธ ๋ฌธ๋ฒ•๊ณผ ํ”Œ๋Ÿฌํ„ฐ ์œ„์ ฏ ๋งŒ๋“ค ์ •๋„ ๋˜์‹ ๋‹ค๋ฉด ์ฐฌ์ฐฌํžˆ ๋ฐ˜๋ณตํ•ด์„œ ๋ณด์‹œ๋ฉด ์ถฉ๋ถ„ํžˆ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ํ”Œ๋Ÿฌํ„ฐ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์ง„ํ–‰ํ•˜์‹œ๋‚˜์š”?

3.x ๋ฒ„์ „์œผ๋กœ ํฐ ๋ฌด๋ฆฌ ์—†์ด ๋นŒ๋“œ ๋ฐ ํ…Œ์ŠคํŠธ๊ฐ€ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Q. ์˜ˆ์ œ ์†Œ์Šค๊ฐ€ ์žˆ๋‚˜์š”?

์˜ˆ์ œ ์†Œ์Šค๊ฐ€ ํ•„์š”ํ•œ ์˜์ƒ์—๋Š” github์—์„œ ์†Œ์Šค๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ์ค€๋น„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ํ”Œ๋Ÿฌํ„ฐ ์ƒํƒœ๊ด€๋ฆฌ ํ•˜๋‚˜ ์ด์ƒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ๋žŒ

  • ํ”Œ๋Ÿฌํ„ฐ ์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•ด ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  • ํ”Œ๋Ÿฌํ„ฐ bloc ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • flutter

  • dart

  • ์ƒํƒœ๊ด€๋ฆฌ

์•ˆ๋…•ํ•˜์„ธ์š”
๊ฐœ๋ฐœํ•˜๋Š”๋‚จ์ž์ž…๋‹ˆ๋‹ค.

1,483

๋ช…

์ˆ˜๊ฐ•์ƒ

31

๊ฐœ

์ˆ˜๊ฐ•ํ‰

61

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

ํ”„๋กœํ•„

๋ธ”๋กœ๊ทธ : ๊ฐœ๋ฐœํ•˜๋Š”๋‚จ์ž ๋ธ”๋กœ๊ทธ

์œ ํŠœ๋ธŒ : ๊ฐœ๋ฐœํ•˜๋Š”๋‚จ์ž ์œ ํŠœ๋ธŒ

๊นƒํ—ˆ๋ธŒ : ๊ฐœ๋ฐœํ•˜๋Š”๋‚จ์ž ๊นƒํ—ˆ๋ธŒ

์†Œ๊ฐœ

๊ฐœ๋ฐœ์„ ์ฆ๊ธฐ๋Š” ์‚ฌ๋žŒ์ด ๋˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž.

์•ˆ๋…•ํ•˜์„ธ์š” ๊ฐœ๋ฐœํ•˜๋Š”๋‚จ์ž ๊ฐœ๋‚จ์ž…๋‹ˆ๋‹ค. 

์ด๋ ฅ

2024.07 ๐Ÿ“š ๊ฐœ๋ฐœํ•˜๋Š”๋‚จ์ž์˜ ํ•ธ์ฆˆ์˜จ ํ”Œ๋Ÿฌํ„ฐ ์ฑ… ์ถœ๊ฐ„

2023.07 ๐Ÿ’ป ์ธํ”„๋Ÿฐ ํ”Œ๋Ÿฌํ„ฐ Bloc ์‘์šฉ ๊ฐ•์˜

2023.03 ๐Ÿ’ป ์ธํ”„๋Ÿฐ ํ”Œ๋Ÿฌํ„ฐ Bloc ๊ธฐ์ดˆ ๊ฐ•์˜ 

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

13๊ฐœ โˆ™ (5์‹œ๊ฐ„ 8๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

๋ฌด๋ฃŒ