์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

๋ฆฌ์•กํŠธ ํ›…(React Hook)์œผ๋กœ ๋งŒ๋“œ๋Š” ์›น์•ฑ

๋ชจ๋˜ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ ์ค‘ ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” React(๋ฆฌ์•กํŠธ), ํ•˜์ง€๋งŒ ๋ฐฐ์šฐ๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ํ›…(Hook)์ด ๋‚˜์™”์Šต๋‹ˆ๋‹ค. ๋ณธ ๊ฐ•์˜๋Š” ํ›…์„ ์ด์šฉํ•ด React๋ฅผ ์‰ฝ๊ฒŒ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋„๋ก ๋„์™€๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

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

  • React ๊ธฐ์ดˆ

  • React Hook ์‚ฌ์šฉ๋ฒ•

ํ•  ์ผ ๊ด€๋ฆฌ ์›น ์•ฑ ๊ฐœ๋ฐœโœ…๋กœ
์‰ฝ๊ณ  ์žฌ๋ฏธ์žˆ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ํ›…!

์ด ๊ฐ•์˜๋Š”! ๐Ÿ“–

React Hook?

ํ›…(Hook)์ด๋ž€, ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ 
ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์˜ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก
 React 16.8 ๋ฒ„์ „๋ถ€ํ„ฐ ๋„์ž…๋œ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

ํ˜„์žฌ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ ์ค‘ ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ, ๋ฆฌ์•กํŠธ์—์„œ ์ตœ๊ทผ ํ•จ์ˆ˜ํ˜• ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํ›…์„ ๋ฐœํ‘œํ–ˆ์Šต๋‹ˆ๋‹ค. ํ›…์„ ์ด์šฉํ•˜๋ฉด ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋กœ์ง์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ณ , ๋ณด๋‹ค ๊ฐ„ํŽธํ•˜๊ฒŒ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ณธ ๊ฐ•์˜์—์„œ๋Š” ๋ฆฌ์•กํŠธ ํ›…(React Hook)์œผ๋กœ ํ•  ์ผ ๊ด€๋ฆฌ(To-do List) ์›น์•ฑ์„ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ํ• ์ผ๊ด€๋ฆฌ์•ฑ์„ ํ›…์„ ํ†ตํ•ด ํ•จ์ˆ˜ํ˜• ๊ฐœ๋ฐœ ๋ฐฉ์‹์œผ๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๋ˆ„๊ฐ€ ๋ฐฐ์šฐ๋ฉด ์ข‹์„๊นŒ์š”? ๐Ÿ“

๋ฆฌ์•กํŠธ(React)๋ฅผ
์‰ฝ๊ณ  ์žฌ๋ฏธ์žˆ๊ฒŒ
์ ‘๊ทผํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„
๊ธฐ์ดˆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜
๋‹ค์Œ ๋‹จ๊ณ„
๋ฅผ
ํ•™์Šตํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€
๋˜๊ณ  ์‹ถ์€
๊ฐœ๋ฐœ์ž ์ทจ์—… ์ค€๋น„์ƒ
  • ๊ธฐ์ˆ ์€ ๋ฐฐ์› ๋Š”๋ฐ, ์–ด๋””์— ์–ด๋–ป๊ฒŒ ์“ฐ์ด๋Š”์ง€ ๊ฐ์ด ์˜ค์ง€ ์•Š์•˜๋˜ ๋ถ„๋“ค์„ ์œ„ํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
  • ๊ฐ ๋‹จ๊ณ„๋ฅผ ๊ฐœ๋ฐœ ๊ฐ€๋Šฅํ•œ ์ˆ˜์ค€์œผ๋กœ ๋‚˜๋ˆ , ๋‹จ๊ณ„๋ณ„๋กœ ์ฐจ๊ทผ์ฐจ๊ทผ ์ตํžˆ๊ณ  ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์–ด์š”.
  • ํŒŒํŠธ๋ณ„๋กœ ๊ธฐ๋Šฅ์„ ์ง์ ‘ ๋งŒ๋“ค์–ด๋ณด๊ณ , ๋” ๋†’์€ ํ•™์Šต ํšจ๊ณผ๋ฅผ ์–ป์–ด๋ณด์„ธ์š”!

์ง์ ‘ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”! ๐Ÿ“œ

๋ฆฌ์•กํŠธ ํ›…(React Hook)์œผ๋กœ ์œ„์™€ ๊ฐ™์€ ํ•  ์ผ ๊ด€๋ฆฌ ์•ฑ์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (๋ฐ”๋กœ๊ฐ€๊ธฐ)

๊ธฐ๋ณธ์— ์ถฉ์‹คํ•œ ์„ค๋ช…์œผ๋กœ
์ดˆ๋ณด์ž๋„ ์‰ฝ๊ฒŒ
๋”ฐ๋ผํ•  ์ˆ˜ ์žˆ์–ด์š”.

์‹ค์ œ๋กœ ๋ฆฌ์•กํŠธ ํ›…์ด
์›น์•ฑ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ
์–ด๋–ป๊ฒŒ ์“ฐ์ด๋Š”์ง€ ๋ฐฐ์›Œ์š”.

์‰ฝ๊ณ  ๊ฐ„๋‹จํ•œ
๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ค์ •์„ ์œ„ํ•œ
CodePen์„ ์‚ฌ์šฉํ•ด์š”.

๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ์ „์ฒด๋ฅผ
๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ๋Š”
์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.


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

Q. ๋ฆฌ์•กํŠธ๋ฅผ ์•Œ์•„์•ผ ๋“ค์„ ์ˆ˜ ์žˆ๋‚˜์š”?

๋ณธ ๊ฐ•์˜๋Š” ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ์„ค๋ช…์„ ๋‚˜์—ดํ•˜๋Š” ๋Œ€์‹  ์•„์ฃผ ๊ฐ„๋‹จํ•œ ์›น์•ฑ์„ ์ง์ ‘ ๊ฐœ๋ฐœํ•ด๋ณด๋ฉด์„œ ๋ฆฌ์•กํŠธ์˜ ๊ธฐ๋Šฅ์„ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

Q. ์ˆ˜๊ฐ• ํ›„, ๋ฆฌ์•กํŠธ์— ๋Œ€ํ•ด ์–ผ๋งˆ๋‚˜ ์•Œ ์ˆ˜ ์žˆ์„๊นŒ์š”?

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•™์Šต ๋ฒ”์œ„๋Š” ํฌ๊ฒŒ 3๊ฐ€์ง€๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 1) ๋™์  UI, 2) Router๋ฅผ ํ†ตํ•œ ํŽ˜์ด์ง€ ์ด๋™, 3) ์„œ๋ฒ„์™€ ํ†ต์‹ ์ž…๋‹ˆ๋‹ค. ๋ณธ ๊ฐ•์˜์—์„œ๋Š” ์ด ์ค‘์—์„œ โ€œ๋™์  UIโ€๋ฅผ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ๊ธฐ๊ฐ€ ์žˆ์œผ์‹  ๋ถ„

  • ์‰ฌ์šด React ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ  ์‹ถ์€ ๋ถ„

  • React Hook ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

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

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

  • HTML

์•ˆ๋…•ํ•˜์„ธ์š”
์ตœ๊ด‘์„ฑ์ž…๋‹ˆ๋‹ค.

4,881

๋ช…

์ˆ˜๊ฐ•์ƒ

112

๊ฐœ

์ˆ˜๊ฐ•ํ‰

29

๊ฐœ

๋‹ต๋ณ€

3.7

์ 

๊ฐ•์˜ ํ‰์ 

9

๊ฐœ

๊ฐ•์˜

  • ํ˜„) ๋ฆฌ์–ผ๋ฉ”์ด์ปค ์ˆ˜์„ ๊ฐœ๋ฐœ์ž
  • ์ „) CCG ์ˆ˜์„ ๊ฐœ๋ฐœ์ž
  • ์ „) VARDOT ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด, ๋“œ๋ฃจํŒ” ๊ฐœ๋ฐœ์ž
  • ์ „) ๋ฐ˜๋„์ฒด ์—์นญ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ ์ฑ…์ž„ ๊ฐœ๋ฐœ์ž

์ˆ˜๊ฐ•ํ‰

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