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

์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ(React)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๊ณผ ํ•จ๊ป˜ ๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Thumbnail

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

์ด๋Ÿฐ ๊ฑธ
๋ฐฐ์›Œ์š”!

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๋ฌธ๋ฒ•

  • CSS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•

  • ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋‹ค์ง€๊ธฐ

  • ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•œ ์›น์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ

๊น”๋”ํ•œ ๊ฐ•์˜์ž๋ฃŒ, ๊ผผ๊ผผํ•œ ์„ค๋ช…์œผ๋กœ
์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๐Ÿ‘จโ€๐Ÿซ

๋ฆฌ์•กํŠธ์˜ ์„ธ๊ณ„๋กœ
์ดˆ๋Œ€ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ’ซ

๋ฆฌ์•กํŠธ๋Š” ๋ฉ”ํƒ€์—์„œ ๋งŒ๋“  ์˜คํ”ˆ์†Œ์Šค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
ํ˜„์žฌ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์œผ๋ฉฐ
๋น ๋ฅธ ์—…๋ฐ์ดํŠธ์™€ ๋ Œ๋”๋ง ์†๋„, ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ ๊ตฌ์กฐ ๋“ฑ ๋งŽ์€ ์žฅ์ ์„ ๊ฐ–๊ณ  ์žˆ์–ด์š”.


๊ฐ•์˜์˜ ํŠน์ง•์„

์•Œ๋ ค๋“œ๋ ค์š” ๐Ÿ”Ž

  • JavaScript ๊ธฐ์ดˆ ๋ฌธ๋ฒ•์„ ์ตํž™๋‹ˆ๋‹ค.
  • CSS์˜ ๊ฐœ๋…๊ณผ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์†์„ฑ์„ ๋ฐฐ์›๋‹ˆ๋‹ค.
  • ๋ฆฌ์•กํŠธ์— ๋Œ€ํ•œ ๊ธฐ์ดˆ ๊ฐœ๋…์„ ์Œ“๊ณ  ์‚ฌ์šฉ๋ฒ•์„ ์ตํž™๋‹ˆ๋‹ค.
  • ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ์‹ค์ œ ๋ฆฌ์•กํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.
  • ์ž…๋ฌธ์ž๋ถ„๋“ค์„ ์œ„ํ•ด HTML, CSS, JS์˜ ๊ธฐ์ดˆ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.


๊ฐ•์˜๋ฅผ ์ฑ…์œผ๋กœ๋„
๋งŒ๋‚˜๋ณผ ์ˆ˜ ์žˆ์–ด์š”! ๐Ÿ“–

๊ฐ•์˜๋ฅผ ์ฑ…์œผ๋กœ๋„ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก
๊ฐ•์˜ ๋‚ด์šฉ์„ ๊ณ ์Šค๋ž€ํžˆ ์ฑ…์— ๋‹ด์•˜์Šต๋‹ˆ๋‹ค.
๋™์˜์ƒ ๊ฐ•์˜์™€ ํ•จ๊ป˜ ์ฑ…์„ ๋ณด๋ฉด์„œ
๋ฆฌ์•กํŠธ์˜ ์„ธ๊ณ„๋กœ ๋น ์ ธ๋ณด์„ธ์š”!

๐ŸŒŸ ์†Œ๋ฌธ๋‚œ ๋ช…๊ฐ•์˜ ๐ŸŒŸ

์†Œํ”Œ์˜ ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ [2ํŒ]
- ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ๊ฐœ๋… ์ •๋ฆฌ๋ถ€ํ„ฐ ์‹ค์Šต๊นŒ์ง€

 


๊ฐ•์˜๊ฐ€ ๋๋‚˜๋„
์งˆ๋ฌธ&๋‹ต๋ณ€ ์ œ๊ณต ๐Ÿ’ฌ

๊ฐ•์˜๋ฅผ ๋ชจ๋‘ ์ˆ˜๊ฐ•ํ•œ ์ดํ›„์—๋„ ๋ฆฌ์•กํŠธ๋กœ ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ์ƒ๊ธฐ๋Š” ๊ถ๊ธˆ์ฆ๋“ค์„ ๋ชจ๋‘ ํ•ด๊ฒฐํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค.
์ง€์‹๊ณต์œ ์ž ์†Œํ”Œ์ด ๋งŒ๋“  ํ”„๋ก ํŠธ์—”๋“œ ์ง€์‹ ํฌํ„ธ FrontOverflow์— ์–ธ์ œ๋“ ์ง€ ์งˆ๋ฌธ์„ ๋‚จ๊ฒจ์ฃผ์„ธ์š”!

๐Ÿ”— FrontOverflow ๋ฐฉ๋ฌธํ•˜๊ธฐ


๊ฐ•์˜๋ฅผ ๋“ค์€ ํ›„ ์ˆ˜๊ฐ•์ƒ์˜ ๋ณ€ํ™” ๐Ÿ™‹โ€โ™‚๏ธ

JS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•์— ๋Œ€ํ•ด
์ดํ•ดํ•  ์ˆ˜ ์žˆ์–ด์š”!

์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” CSS๋ฅผ
์ดํ•ดํ•  ์ˆ˜ ์žˆ์–ด์š”!

๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ
์ž˜ ๋‹ค์งˆ ์ˆ˜ ์žˆ์–ด์š”!

์‹ค์ „ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์„
์Œ“์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


ํ•™์Šต ๋‚ด์šฉ ์—ฟ๋ณด๊ธฐ ๐Ÿ“š

์„น์…˜ 0 [์ค€๋น„ํ•˜๊ธฐ]

  • HTML, CSS์˜ ๊ฐœ๋…๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๋ฌธ๋ฒ•์— ๋Œ€ํ•ด ๋ฐฐ์šฐ๊ณ , ์‹ค์Šต์„ ์œ„ํ•œ ํ™˜๊ฒฝ์„ ์„ธํŒ…ํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 1, 2 [๋ฆฌ์•กํŠธ ์†Œ๊ฐœ, ์‹œ์ž‘ํ•˜๊ธฐ]

  • ๋ฆฌ์•กํŠธ์— ๋Œ€ํ•œ ์†Œ๊ฐœ, ์žฅ๋‹จ์ ์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฆฌ์•กํŠธ๋ฅผ ์ง์ ‘ ์—ฐ๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ create-react-app์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 3 [JSX]

  • JSX์˜ ์ •์˜์™€ ์—ญํ• , ๊ทธ๋ฆฌ๊ณ  ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 4 [Rendering Elements]

  • ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ์˜ ์ •์˜์™€ ํŠน์ง• ๋ฐ ๋ Œ๋”๋ง ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 5 [Components and Props]

  • ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์™€ Props์˜ ์ •์˜ ๋ฐ ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 6 [State and Lifecycle]

  • State์˜ ๊ฐœ๋…๊ณผ ์ปดํฌ๋„ŒํŠธ Lifecycle์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 7 [Hooks]

  • ๋ฆฌ์•กํŠธ ํ›…์˜ ๊ฐœ๋…๊ณผ ๋Œ€ํ‘œ์ ์ธ ํ›…๋“ค ๋ฐ ์ปค์Šคํ…€ ํ›…์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 8 [Handling Events]

  • ๋ฆฌ์•กํŠธ์—์„œ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 9 [Conditional Rendering]

  • ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์˜ ๊ฐœ๋…๊ณผ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 10 [Lists and Keys]

  • ๋ฆฌ์ŠคํŠธ์™€ ํ‚ค์˜ ๊ฐœ๋…๊ณผ ์‹ค์ œ ๋ Œ๋”๋ง ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 11 [Forms]

  • ๋‹ค์–‘ํ•œ Form๊ณผ ์ œ์–ด ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 12 [Lifting State Up]

  • Shared State์™€ ์ปดํฌ๋„ŒํŠธ๊ฐ„ State๋ฅผ ๊ณต์œ ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 13 [Composition vs Inheritance]

  • ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ ํ•ฉ์„ฑ ๋ฐฉ๋ฒ•๊ณผ ์ƒ์†์˜ ์˜๋ฏธ์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 14 [Context]

  • Context์˜ ๊ฐœ๋…๊ณผ Context API์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 15 [Styling]

  • ๋Œ€ํ‘œ์ ์ธ CSS์˜ ์†์„ฑ๋“ค๊ณผ styled-components์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 16 [๋ฏธ๋‹ˆํ”„๋กœ์ ํŠธ]

  • ์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด ๋‚ด์šฉ๋“ค์„ ์ข…ํ•ฉํ•˜์—ฌ ๋ฏธ๋‹ˆ ๋ธ”๋กœ๊ทธ๋ฅผ ํ•จ๊ป˜ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค. 

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

Q. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž˜ ๋ชฐ๋ผ๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ธ๊ฐ€์š”?

๋„ค! ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•ด ์ž˜ ๋ชจ๋ฅด์‹œ๋Š” ๋ถ„์ด๋ผ๊ณ  ํ•ด๋„, ๊ฐ•์˜์—์„œ ๊ธฐ์ดˆ ๋ฌธ๋ฒ•์„ ํฌํ•จํ•˜์—ฌ ์„ค๋ช…๋“œ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ์ƒ๊ด€์—†์ด ๋“ค์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. CSS์— ๋Œ€ํ•ด ์ž˜ ๋ชฐ๋ผ๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ธ๊ฐ€์š”?

๋„ค, CSS์˜ ๋Œ€ํ‘œ์ ์ธ ์†์„ฑ๋“ค์„ ํ•จ๊ป˜ ๋‹ค๋ฃจ๊ธฐ ๋•Œ๋ฌธ์— ์ž˜ ๋ชฐ๋ผ๋„ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ๋ฆฌ์•กํŠธ๋ฅผ ๋ฐฐ์šฐ๋ฉด ๋ญ๊ฐ€ ์ข‹์€๊ฐ€์š”?

๋ฆฌ์•กํŠธ๋ฅผ ํ†ตํ•ด ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๋Œ€๋กœ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


ํ•™์Šต ๊ด€๋ จ์ž๋ฃŒ ๐Ÿ’ก

๐Ÿšจ ํ˜„์žฌ ๋ฆฌ์•กํŠธ 19 ์ •์‹ ๋ฆด๋ฆฌ์ฆˆ๋กœ ์ธํ•ด create-react-app์ด ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์•„๋ž˜ ๋ช…๋ น์–ด๋ฅผ ์ฐธ๊ณ ํ•ด์„œ Yarn ์„ค์น˜ํ•˜๊ณ , Yarn์„ ์‚ฌ์šฉํ•ด์„œ ๋ฆฌ์•กํŠธ ์•ฑ์„ ์ƒ์„ฑํ•˜๊ณ  ์‹ค์Šต์„ ์ง„ํ–‰ํ•ด์ฃผ์„ธ์š”!

npm install -g yarn
yarn create react-app my-app

3๊ฐ• ~ 15๊ฐ•. ์‹ค์Šต ์†Œ์Šค์ฝ”๋“œ

๋ฆฌ์•กํŠธ v17 ์†Œ์Šค์ฝ”๋“œ
https://github.com/soaple/first-met-react-practice

๋ฆฌ์•กํŠธ v18 ์†Œ์Šค์ฝ”๋“œ
https://github.com/soaple/first-met-react-practice-v18

16๊ฐ•. ๋ฏธ๋‹ˆ ๋ธ”๋กœ๊ทธ ์†Œ์Šค์ฝ”๋“œ

https://github.com/soaple/mini-blog

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

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

  • ์›น์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์žˆ๋Š” ๋ถ„

  • ๋ฆฌ์•กํŠธ๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜์‹œ๋Š” ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
Inje Lee (์†Œํ”Œ)์ž…๋‹ˆ๋‹ค.

์ˆ˜๊ฐ•์ƒ ์ˆ˜

19,288

์ˆ˜๊ฐ•ํ‰ ์ˆ˜

437

๊ฐ•์˜ ํ‰์ 

4.8

๊ฐ•์˜ ์ˆ˜

4

์ด์ธ์ œ(์†Œํ”Œ)

๊ฐœ๋ฐœ์„ ์‚ฌ๋ž‘ํ•˜๋Š” ๊ฐœ๋ฐœ์ž์ด์ž 1์ธ ์Šคํƒ€ํŠธ์—…์˜ ์ฐฝ์—…์ž์ž…๋‹ˆ๋‹ค.
์˜ค๋ž˜ ์ „๋ถ€ํ„ฐ ์†Œํ”„ํŠธ์›จ์–ด ๊ต์œก์— ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ณ  ๊พธ์ค€ํžˆ ํ™œ๋™ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜€ 

 

๋”๋ณด๊ธฐ

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

์ „์ฒด

62๊ฐœ โˆ™ (5์‹œ๊ฐ„ 15๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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

๋ฌด๋ฃŒ