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

React(๋ฆฌ์•กํŠธ) ํ•™์Šต์˜ ์‹œ์ž‘

๋ณธ ๊ณผ์ •์€ React ํ•™์Šต์„ ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” ํ•™์Šต์ž๋ฅผ ์œ„ํ•ด ๊ตฌ์„ฑ๋œ ์ž…๋ฌธ ๊ณผ์ •์ž…๋‹ˆ๋‹ค. JSX์˜ ๊ธฐ์ดˆ ๋ฌธ๋ฒ•์„ ์ฒด๊ณ„์ ์œผ๋กœ ํ•™์Šตํ•˜๋ฉฐ, ์ด๋ฅผ ์ง์ ‘ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ์‹ค๋ฌด ๊ฐ๊ฐ์„ ํ‚ค์šฐ๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค. ๋‹จ์ˆœํ•œ ๋ฌธ๋ฒ• ํ•™์Šต์„ ๋„˜์–ด, React ๊ฐœ๋ฐœ์˜ ๊ธฐ๋ณธ ํ๋ฆ„๊ณผ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ ๋ฐฉ์‹์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

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

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

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

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

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

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

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

  • React๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ž…๋ฌธ์ž

  • ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ ์žˆ๋Š” ํ•™์Šต์ž

React(๋ฆฌ์•กํŠธ) ํ•™์Šต์˜ ์‹œ์ž‘

๋ณธ ๊ณผ์ •์€ React๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ํ•™์Šต์ž๋ฅผ ์œ„ํ•œ ์ž…๋ฌธ ๊ฐ•์ขŒ๋กœ, ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ๋ถ€ํ„ฐ JSX ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๊นŒ์ง€ ์‹ค์Šต ์ค‘์‹ฌ์œผ๋กœ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ์ตœ์‹  ๋ฒ„์ „ ์„ค์น˜ ์‹œ ๋งˆ์ฃผ์น˜๊ธฐ ์‰ฌ์šด ์˜ค๋ฅ˜ ๋Œ€์‘, ํด๋” ๊ตฌ์กฐ์™€ ๋ Œ๋”๋ง ํ๋ฆ„ ์ดํ•ด๋ฅผ ํ†ตํ•ด โ€œ์™œ ์ด๋ ‡๊ฒŒ ๋™์ž‘ํ•˜๋Š”๊ฐ€โ€๋ฅผ ๋จผ์ € ์žก์•„์ฃผ๊ณ , ์ด์–ด์„œ JSX ๋ฌธ๋ฒ•(ํƒœ๊ทธยทํ‘œํ˜„์‹ยท์†์„ฑยท์ด๋ฒคํŠธ ๋ฐ”์ธ๋”ฉ), ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ๊ณผ ์กฐ๋ฆฝ, CSS ์ ์šฉ, Props/Children ์ „๋‹ฌ์„ ๋‹จ๊ณ„์ ์œผ๋กœ ์ตํž™๋‹ˆ๋‹ค. ์ƒํƒœ ๊ด€๋ฆฌ์˜ ์ฒซ๊ฑธ์Œ์ธ useState์™€ ๋ถˆ๋ณ€์„ฑ๋„ ์˜ˆ์ œ๋กœ ๋ฐ˜๋ณตํ•ด ๋ณด๋ฉฐ, ํ™”๋ฉด๊ณผ ๋ฐ์ดํ„ฐ๊ฐ€ ๋งž๋ฌผ๋ ค ์—…๋ฐ์ดํŠธ๋˜๋Š” ๊ณผ์ •์„ ์ฒด๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ด๋ก ์— ๊ทธ์น˜์ง€ ์•Š๊ณ  TodoList ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ๋กœ ์—ฐ๊ฒฐํ•ด,

  • ํ•  ์ผ ์ถ”๊ฐ€/์‚ญ์ œ/์ˆ˜์ •(์ทจ์†Œ ํฌํ•จ), ์—”ํ„ฐํ‚ค ์ž…๋ ฅ ์ฒ˜๋ฆฌ, ์ „์ฒด ์‚ญ์ œ ๋“ฑ ํ•„์ˆ˜ UI ํŒจํ„ด์„ ๊ตฌํ˜„ํ•˜๊ณ 

  • ์ž…๋ ฅ๊ฐ’ ๊ฒ€์ฆ(๊ธธ์ด ์ œํ•œยท๋นˆ ๊ฐ’ ์ฒดํฌ), ์ค‘๋ณต ๋ฐฉ์ง€(Set/Filter ํ™œ์šฉ), ๊ธฐ๋ณธ ์Šคํƒ€์ผ๋ง์œผ๋กœ ์™„์„ฑ๋„๋ฅผ ๋†’์ž…๋‹ˆ๋‹ค.

์ด๋ฅผ ํ†ตํ•ด ๋‹จ์ˆœ ๋ฌธ๋ฒ• ์•”๊ธฐ๊ฐ€ ์•„๋‹ˆ๋ผ, ์ž‘์€ ๋‹จ์ผ ํŽ˜์ด์ง€ ์•ฑ์„ ์Šค์Šค๋กœ ๊ตฌ์กฐํ™”ํ•˜๊ณ  ์œ ์ง€๋ณด์ˆ˜ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๊ฐ๊ฐ์„ ๊ธฐ๋ฅด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค

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

๐Ÿ”น ์„น์…˜ 1 : JSX ๊ธฐ์ดˆ ๋ฌธ๋ฒ• 1

  • React ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋ฐ ์ตœ์‹  ๋ฒ„์ „์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• ํ•™์Šต

  • ์ฃผ์š” ํด๋” ๊ตฌ์กฐ์™€ ๋ Œ๋”๋ง ๊ตฌ์กฐ ์ดํ•ด

  • JSX์˜ ๊ฐœ๋…๊ณผ ํŒŒ์ผ ์ƒ์„ฑ ๋ฐฉ๋ฒ• ํ•™์Šต

  • ์ปดํฌ๋„ŒํŠธ ๊ธฐ์ดˆ๋ฅผ ๋ฐฐ์šฐ๊ณ , ์ปดํฌ๋„ŒํŠธ ์กฐ๋ฆฝ์„ ํ†ตํ•ด ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ• ์‹ค์Šต

๐Ÿ”น ์„น์…˜ 2 : JSX ๊ธฐ์ดˆ ๋ฌธ๋ฒ• 2

  • CSS ์Šคํƒ€์ผ ์ ์šฉ ๋ฐฉ๋ฒ• ์‹ค์Šต

  • ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ๋ฐฉ์‹ ํ•™์Šต

  • Props์™€ Children ๊ฐœ๋… ๋ฐ ํ™œ์šฉ ๋ฐฉ๋ฒ• ์ดํ•ด

  • Props ์‚ฌ์šฉ ์‹œ ์œ ์šฉํ•œ ES6 ๋ฌธ๋ฒ• ํ•™์Šต

  • useState ํ›…์„ ํ™œ์šฉํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ํ•™์Šต

  • ์ƒํƒœ ๋ถˆ๋ณ€์„ฑ(immutability) ๊ฐœ๋…๊ณผ ์‹ค์Šต

๐Ÿ”น ์„น์…˜ 3 : ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ 1 (TodoList)

  • TodoList ํ”„๋กœ์ ํŠธ๋ฅผ ๋‹จ๊ณ„๋ณ„๋กœ ๊ตฌํ˜„

  • ์ถ”๊ฐ€, ์‚ญ์ œ, ์ˆ˜์ •(Update) ๊ธฐ๋Šฅ ๊ตฌํ˜„ ๊ณผ์ • ํ•™์Šต

  • Cancel ๋ฒ„ํŠผ ๋ฐ ์—”ํ„ฐ ์ž…๋ ฅ ์ฒ˜๋ฆฌ ๊ธฐ๋Šฅ ์ถ”๊ฐ€

  • ์ „์ฒด ์‚ญ์ œ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ํ†ตํ•ด ๋ฐฐ์—ด ๋ฐ์ดํ„ฐ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ• ์‹ค์Šต

๐Ÿ”น ์„น์…˜ 4 : ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ 2 (TodoList ์‹ฌํ™”)

  • CSS ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ํ™œ์šฉํ•ด UI๋ฅผ ๊ฐœ์„ ํ•˜๊ณ  ๊พธ๋ฏธ๋Š” ๋ฐฉ๋ฒ• ํ•™์Šต

  • ์ž…๋ ฅ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ(๊ธธ์ด ์ œํ•œ, ๋นˆ ๋ฌธ์ž์—ด ์ฒดํฌ) ๊ตฌํ˜„

  • ์ค‘๋ณต ๋ฐ์ดํ„ฐ ์ฒดํฌ ๋กœ์ง์„ Set ๊ฐ์ฒด์™€ Filter ๋ฉ”์„œ๋“œ๋กœ ๊ฐ๊ฐ ๊ตฌํ˜„

๐Ÿ‘‰ ์ด ๊ณผ์ •์„ ํ†ตํ•ด ํ•™์Šต์ž๋Š” JSX ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๋ถ€ํ„ฐ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ, ์ƒํƒœ ๊ด€๋ฆฌ, ๊ทธ๋ฆฌ๊ณ  TodoList ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ๊นŒ์ง€ React ๊ธฐ์ดˆ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ์ตํžˆ๊ณ  ์‹ค์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

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

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

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

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

  • React ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ JSX ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์„ ์ดํ•ดํ•œ๋‹ค.

  • ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ์˜ ํ•ต์‹ฌ ์›๋ฆฌ๋ฅผ ํ•™์Šตํ•œ๋‹ค.

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

8,278,857

๋ช…

์ˆ˜๊ฐ•์ƒ

6,391

๊ฐœ

์ˆ˜๊ฐ•ํ‰

4.6

์ 

๊ฐ•์˜ ํ‰์ 

309

๊ฐœ

๊ฐ•์˜

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

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

์ „์ฒด

36๊ฐœ โˆ™ (13์‹œ๊ฐ„ 39๋ถ„)

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

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

์ˆ˜๊ฐ•ํ‰

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

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

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

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

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

โ‚ฉ140,800