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

์ง€๊ธˆ ๋ฐ”๋กœ React ์‹œ์ž‘ํ•˜๊ธฐ

๐Ÿค” React๋ฅผ A-Z๊นŒ์ง€ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์ง„ ์•Š๊ณ , ๋ฐ”๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ์›ํ•˜์‹œ๋‚˜์š”!? ์ž˜ ์˜ค์…จ์Šต๋‹ˆ๋‹ค! A-Z๊นŒ์ง€ ๊ฐ•์˜ํ•ด ์ฃผ์‹œ๋Š” ๊ฒƒ์€ ๋‹ค๋ฅธ ์ข‹์€ ๊ฐ•์˜ ๊ตฌ๋งคํ•˜์‹œ๊ณ , ์—ฌ๊ธฐ์„œ ์‹ค์šฉ์ ์ธ ๊ฒƒ๋งŒ ์–ป์–ด ๊ฐ€์„ธ์š”! ์ง€๊ธˆ ๋ฐ”๋กœ! ์ด ๊ฐ•์˜๋กœ React์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ํ™œ์šฉ๋ฒ•์„ ์ตํ˜€ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๋‚˜๋งŒ์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”

Thumbnail

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

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

  • React์˜ ๊ฐœ๋…๊ณผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

  • React ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ

  • JSX ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

  • ์กฐ๊ฑด์— ๋”ฐ๋ฅธ Component(์ปดํฌ๋„ŒํŠธ) ๋งŒ๋“ค๊ธฐ

  • Router ์‚ฌ์šฉ๋ฒ•

  • ์—ฌ๋Ÿฌ๊ฐ€์ง€ Hook์˜ ๊ฐœ๋…๊ณผ ์‹ค์Šต

  • Component์˜ ๋ผ์ดํ”„ ์‚ฌ์ดํด

  • Redux์˜ ๊ฐœ๋…๊ณผ ํ™œ์šฉ๋ฒ•

React๋ฅผ ๊ณต๋ถ€ํ•  ๋•Œ?
๋ฐ”๋กœ ์ง€๊ธˆ, Right Now! ๐Ÿฆพ

์ง€๊ธˆ ๋ฐ”๋กœ ์‹œ์ž‘ํ•˜๋Š” React ๐Ÿƒ

์ง€๊ธˆ ๋ฐ”๋กœ ์‹ค๋ฌด์— ํˆฌ์ž…๋˜์–ด์•ผ ํ•˜๋‚˜์š”?
์ง€๊ธˆ ๋ฐ”๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜์…”์•ผ ํ•˜๋‚˜์š”?
์ง€๊ธˆ ๋ฐ”๋กœ ๊ณผ์ œ๋ฅผ ์ œ์ถœํ•˜์…”์•ผ ํ•˜๋‚˜์š”?
์ง€๊ธˆ ๋ฐ”๋กœ React๋ฅผ ๊ฒฝํ—˜ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹ ๊ฐ€์š”?

๊ทธ๋Ÿผ ์ง€๊ธˆ ๋ฐ”๋กœ React ์‹œ์ž‘ํ•˜๊ธฐ์™€ ํ•จ๊ป˜ํ•˜์„ธ์š”! ๋งŒ๋“ค์–ด๋ณด๋ฉด ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

ํŒŒ์ผ:React-icon.svg

React?

React๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ '๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ'์ž…๋‹ˆ๋‹ค.
์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์œผ๋กœ ๋‹ค์–‘ํ•œ ํ˜•์‹์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜์˜ํ•˜์—ฌ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ,
ํ•„์š”ํ•œ ๋งŒํผ ํšจ์œจ์ ์œผ๋กœ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  ๐Ÿ“Œ

์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์œผ๋กœ
๋†’์€ ์žฌ์‚ฌ์šฉ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ

router๋ฅผ ์ด์šฉํ•˜์—ฌ
SPA ๊ฐœ๋ฐœ์— ์šฉ์ด

์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ์ž๋ฃŒ๊ฐ€ ๋งŽ์•„
๊ฐœ๋ฐœ ํ™•์žฅ์„ฑ์ด ๋†’์Œ


์ด ๊ฐ•์˜์˜ ํŠน์ง• โœจ

๋น ๋ฅด๊ฒŒ ๋ณด๊ณ 
์ ์šฉํ•˜์„ธ์š”!

์ค‘์š”ํ•œ ํ•ต์‹ฌ ๊ฐœ๋…๋งŒ์„ ๋‹ค๋ฃจ๋Š” ๋‹ค์–‘ํ•œ ์˜ˆ์ œ๋ฅผ ์ค€๋น„ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„ โ€˜์ด๋ก  โ†’ ํ”„๋กœ์ ํŠธโ€™ ๊ฐ•์˜๊ฐ€ ์•„๋‹ˆ๋ผ โ€˜ํ”„๋กœ์ ํŠธโ†’์ด๋ก โ€™์œผ๋กœ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

๊ฐ•์˜ ์ž๋ฃŒ์—์„œ
ํŽธํ•˜๊ฒŒ ์ฐพ์•„๋ณด์„ธ์š”!

๊ฒ€์ƒ‰ํ•˜์ง€ ์•Š์•„๋„ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ๋„๋ก ๊ฐ•์˜ Notion ํŽ˜์ด์ง€๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ์ดˆ ๊ฐ•์˜๊ฐ€
์•„๋‹™๋‹ˆ๋‹ค!

์ด ๊ฐ•์˜์—์„œ๋Š” '์‹ค์šฉ์ ์ธ' ๋ฌธ๋ฒ•๋งŒ ๋น ๋ฅด๊ฒŒ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค. HTML, CSS, JS๋ฅผ ์•Œ๊ณ  ์žˆ๋‹ค๋Š” ์ „์ œํ•˜์— ์ˆ˜์—…์ด ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค. 30๋ถ„ ์š”์•ฝ ๊ฐ•์ขŒ ์‹œ์ฆŒ1์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”. ๋ฆฌ์•กํŠธ์˜ A๋ถ€ํ„ฐ Z๊นŒ์ง€ ์•Œ๊ณ  ์‹ถ์œผ์‹  ๋ถ„์€ ํƒ€ React ๊ธฐ์ดˆ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜๊ณ  ์˜ค์‹œ๊ธฐ๋ฅผ ๊ถŒํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค. :)


๊ฐ•์˜์—์„œ ๋ฌด์—‡์„ ๋ฐฐ์šฐ๋‚˜์š”? ๐Ÿ•ต๏ธโ€โ™€๏ธ

  1. React์˜ ๊ฐœ๋…๊ณผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 
  2. React ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ
  3. JSX ๊ธฐ๋ณธ ๋ฌธ๋ฒ•
  4. ์กฐ๊ฑด์— ๋”ฐ๋ฅธ Component(์ปดํฌ๋„ŒํŠธ) ๋งŒ๋“ค๊ธฐ
  5. Router ์‚ฌ์šฉ๋ฒ•
  6. ์—ฌ๋Ÿฌ ๊ฐ€์ง€ Hook์˜ ๊ฐœ๋…๊ณผ ์‹ค์Šต
  7. Component์˜ ๋ผ์ดํ”„ ์‚ฌ์ดํด
  8. Redux์˜ ๊ฐœ๋…๊ณผ ํ™œ์šฉ๋ฒ•
  9. Project 1
  10. Project 2

๐Ÿ“ข ์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”!

  • VSC(Visual Studio Code)๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. (VSC์˜ ์œ ์šฉํ•œ Extension, Extension ์‚ฌ์šฉ๋ฒ•์„ ์•Œ๋ ค๋“œ๋ฆฌ์ง€๋งŒ VSC ์„ค์น˜๋ถ€ํ„ฐ ์ง„ํ–‰ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.)
  • ์ผ๋‹จ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์ด๋ก ์€ ์ฐจ์ฐจ ์•Œ์•„๊ฐ€๊ธธ ์›ํ•˜์‹œ๋Š” ๋ถ„์€ Project๋ถ€ํ„ฐ ๋ณด์‹œ๊ธธ ๊ถŒํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค!

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š” ๐Ÿ™‹

React๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€๋ฐ ์–ด๋–ป๊ฒŒ
์‹œ์ž‘ํ•ด์•ผ ํ• ์ง€ ๋ชจ๋ฅด๊ฒ ๋Š” ๋ถ„

์ง€๊ธˆ ๋ฐ”๋กœ React ํ”„๋กœ์ ํŠธ๋ฅผ
๊ฒฝํ—˜ํ•ด๋ณด๊ณ  ์‹ถ์€ ๋ถ„

์˜ˆ์ œ์™€ ํ•จ๊ป˜ ์ค‘์š” ํ•ต์‹ฌ ๊ฐœ๋…์„
๋น ๋ฅด๊ฒŒ ํ•™์Šตํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„


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

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

  • React๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€๋ฐ ์–ด๋–ป๊ฒŒ ์‹œ์ž‘ํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ๋Š” ๋ถ„

  • ์ง€๊ธˆ ๋ฐ”๋กœ React ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฒฝํ—˜ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • ์˜ˆ์ œ์™€ ํ•จ๊ป˜ ์ค‘์š” ํ•ต์‹ฌ ๊ฐœ๋…์„ ๋น ๋ฅด๊ฒŒ ํ•™์Šตํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„

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

  • HTML, CSS, JavaScript ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

์•ˆ๋…•ํ•˜์„ธ์š”
The Oreum์ž…๋‹ˆ๋‹ค.

9,202

๋ช…

์ˆ˜๊ฐ•์ƒ

287

๊ฐœ

์ˆ˜๊ฐ•ํ‰

2

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

20

๊ฐœ

๊ฐ•์˜

๋” ์˜ค๋ฆ„์€ ์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์˜ ํ”„๋ฆฌ๋ฏธ์—„ ๋ธŒ๋žœ๋“œ๋กœ ์ฃผ๋กœ ์‹ค๋ฌด, ์ทจ์—…๊ณผ ์—ฐ๊ด€๋œ ๊ฐ•์˜๋ฅผ ์ œ์ž‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์—์„œ ์ด๋ก ์ ์ธ ์ง€์‹์„ ํš๋“ํ•˜์…จ๋‹ค๋ฉด, ๋” ์˜ค๋ฆ„์˜ ์‹ค์ „ ๊ฐ•์˜๋“ค์„ ํ†ตํ•ด ํฌํŠธํด๋ฆฌ์˜ค์™€ ์‹ค๋ฌด ๋Šฅ๋ ฅ๋“ค์„ ๋ชจ๋‘ ๊ฐ€์ ธ๊ฐ€์„ธ์š”! 

" 2%๋ฅผ ์ฑ„์šฐ๊ธฐ ์œ„ํ•œ ์—ฌ๋Ÿฌ๋ถ„์˜ ์ง‘๋…๊ณผ ์—ด์ •์„ ์‘์›ํ•ฉ๋‹ˆ๋‹ค! "

 

โ–ถ๏ธŽ ๋” ์˜ค๋ฆ„ ๋กœ๋“œ๋งต

The Oreum แ„…แ…ฉแ„ƒแ…ณแ„†แ…ขแ†ธ.png.webp

 

๋”๋ณด๊ธฐ

๊ณต๋™ ์ง€์‹๊ณต์œ ์ž

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

์ „์ฒด

64๊ฐœ โˆ™ (8์‹œ๊ฐ„ 0๋ถ„)

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

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

์ˆ˜๊ฐ•ํ‰

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