์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

React(๋ฆฌ์•กํŠธ) ์ƒํƒœ๊ด€๋ฆฌ ํ›…(Hook)

๋ณธ ๊ณผ์ •์€ React์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•œ useContext์™€ useReducer ํ›…์„ ์ง‘์ค‘์ ์œผ๋กœ ํ•™์Šตํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ์˜ ๋ณต์žก์„ฑ์„ ์ค„์ด๊ณ , ๊ทœ๋ชจ ์žˆ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ƒํƒœ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์‹ค์Šต๊ณผ ํ•จ๊ป˜ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ํ•™์Šต์ž๋Š” ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ์ดํ•ดํ•˜๊ณ , ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ๋ฐ”๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์‹ค๋ฌด ํ™œ์šฉ ๋Šฅ๋ ฅ์„ ๊ฐ–์ถœ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

4๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

๋‚œ์ด๋„ ์ž…๋ฌธ

์ˆ˜๊ฐ•๊ธฐํ•œ 12๊ฐœ์›”

๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๋งˆ์ผ€ํŒ… ํŒŒํŠธ๋„ˆ์Šค

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • React์˜ useContext ํ›…์„ ํ™œ์šฉํ•˜์—ฌ ์ „์—ญ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ตํž™๋‹ˆ๋‹ค.

  • useReducer ํ›…์„ ํ†ตํ•ด ๋ณต์žกํ•œ ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

React(๋ฆฌ์•กํŠธ) ์ƒํƒœ๊ด€๋ฆฌ ํ›…(Hook)

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

ํ•™์Šต์ž๋Š” useContext๋ฅผ ํ†ตํ•ด Props Drilling ์—†์ด ์ „์—ญ ์ƒํƒœ๋ฅผ ์†์‰ฝ๊ฒŒ ๊ณต์œ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ , useReducer๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ณต์žกํ•œ ์ƒํƒœ ์—…๋ฐ์ดํŠธ ๋กœ์ง์„ ๊ตฌ์กฐ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‹ค์Šตํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ TodoApp๊ณผ ๊ฐ™์€ ํ”„๋กœ์ ํŠธํ˜• ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด, ๋‹จ์ˆœํ•œ ์ด๋ก  ํ•™์Šต์„ ๋„˜์–ด ์‹ค์ œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ๋ฐ”๋กœ ์ ์šฉ ๊ฐ€๋Šฅํ•œ ํŒจํ„ด์„ ์ฒด๋“ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

๐Ÿ“Œ ์„น์…˜ 1: useContext

  • useContext ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

  • Context API๋ฅผ ํ™œ์šฉํ•ด ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ์ „์—ญ ์ƒํƒœ ๊ณต์œ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ตํž™๋‹ˆ๋‹ค.

  • ์‹ค์Šต์„ ํ†ตํ•ด useContext๋ฅผ ๋‹ค์–‘ํ•œ ์ƒํ™ฉ์— ์ ์šฉํ•˜๋ฉฐ ํ™œ์šฉ๋„๋ฅผ ๋†’์ž…๋‹ˆ๋‹ค.

  • UUID ์ƒ์„ฑ, ๋žœ๋ค ์•ŒํŒŒ๋ฒณ ์ถœ๋ ฅ ๋“ฑ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์‹ค์ œ ๊ฐœ๋ฐœ์—์„œ์˜ ์‘์šฉ๋ ฅ์„ ํ‚ค์›๋‹ˆ๋‹ค.

  • ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ณด์ถฉ ํŠน๊ฐ•์„ ํ†ตํ•ด ์ž๋™ ID ์ƒ์„ฑ ๋กœ์ง์„ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋ฉด์„œ ์‘์šฉ ์‚ฌ๊ณ ๋ ฅ์„ ๊ฐ•ํ™”ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ ์„น์…˜ 2: useReducer

  • useReducer์˜ ๊ฐœ๋…๊ณผ ์ƒํƒœ ๊ด€๋ฆฌ ํ๋ฆ„์„ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค.

  • Reducer ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ์‹ค์Šต์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

  • ํ…Œ๋งˆ ์ „ํ™˜ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด useReducer๋ฅผ ํ™œ์šฉํ•œ UI ์ƒํƒœ ์ œ์–ด๋ฅผ ์—ฐ์Šตํ•ฉ๋‹ˆ๋‹ค.

  • TodoApp ํ”„๋กœ์ ํŠธ๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋ฉฐ ์‹ค๋ฌด์— ๊ฐ€๊นŒ์šด ์ƒํƒœ ๊ด€๋ฆฌ ํŒจํ„ด์„ ์ฒด๋“ํ•ฉ๋‹ˆ๋‹ค.

  • Reducer ํ•จ์ˆ˜์—์„œ GET ํƒ€์ž…์œผ๋กœ ์ดˆ๊ธฐ ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ๋ฅผ ๋‹ค๋ค„ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ์˜ ์œ ์—ฐ์„ฑ์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

  • ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ํ†ตํ•ด useReducer์˜ ํ™•์žฅ ํ™œ์šฉ ์‚ฌ๋ก€๋ฅผ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ‘‰ ์ „์ฒด์ ์œผ๋กœ, ์ด ๊ณผ์ •์€ useContext์™€ useReducer๋ฅผ ํ™œ์šฉํ•œ ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ๋ณต์žกํ•œ ์ƒํƒœ ๋กœ์ง ์ฒ˜๋ฆฌ๋ฅผ ์‹ค์Šต ์ค‘์‹ฌ์œผ๋กœ ๋ฐฐ์šฐ๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค.

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์ด ๊ฐ•์˜๋Š” ์ง€์‹๊ณต์œ ์ž์˜ ์งˆ๋ฌธ/๋‹ต๋ณ€์„ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค

ํ•™์Šต ์ž๋ฃŒ

์ฃผ์ฐจ๋ณ„ ๊ต์•ˆ์ด pdfํŒŒ์ผ๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค

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

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

  • React ๊ธฐ์ดˆ(์ปดํฌ๋„ŒํŠธ, props, useState, useEffect ๋“ฑ)๋ฅผ ์ด๋ฏธ ํ•™์Šตํ•œ ํ•™์Šต์ž

  • ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ ์ ์  ๋ณต์žกํ•ด์ง€๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ํšจ์œจ์ ์ธ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

์•ˆ๋…•ํ•˜์„ธ์š”
์œ ์šฉํ•œITํ•™์Šต์ž…๋‹ˆ๋‹ค.

8,278,856

๋ช…

์ˆ˜๊ฐ•์ƒ

6,391

๊ฐœ

์ˆ˜๊ฐ•ํ‰

4.6

์ 

๊ฐ•์˜ ํ‰์ 

309

๊ฐœ

๊ฐ•์˜

์œ ์šฉํ•œ IT ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ๋ถ„์˜ ์„ฑ์žฅ์„ ๋•๊ฒ ์Šต๋‹ˆ๋‹ค.

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

์ „์ฒด

21๊ฐœ โˆ™ (8์‹œ๊ฐ„ 39๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

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

์ˆ˜๊ฐ•ํ‰

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

์œ ์šฉํ•œITํ•™์Šต๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

๋น„์Šทํ•œ ๊ฐ•์˜

๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

์›” โ‚ฉ16,720

5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

โ‚ฉ83,600