React ์ฐธ๊ณ ์„œ ๊ฐœ์š”

์ด ์„น์…˜์€ React์™€ ๊ด€๋ จ๋œ ์ž‘์—…์— ๋Œ€ํ•œ ์ƒ์„ธํ•œ ์ฐธ๊ณ ์„œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. React์— ๋Œ€ํ•œ ์†Œ๊ฐœ๋Š” ํ•™์Šตํ•˜๊ธฐ ์„น์…˜์„ ์ฐธ๊ณ ํ•˜์„ธ์š”.

React ์ฐธ๊ณ ์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์ ์ธ ํ•˜์œ„ ์„น์…˜์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

React

React์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ๋Šฅ.

  • Hook - ์ปดํฌ๋„ŒํŠธ์—์„œ ๋‹ค์–‘ํ•œ React ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์„ธ์š”.
  • ์ปดํฌ๋„ŒํŠธ - JSX์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋‚ด์žฅ ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค.
  • API - ์ปดํฌ๋„ŒํŠธ ์ •์˜์— ์œ ์šฉํ•œ API๋“ค์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.
  • ์ง€์‹œ์–ด - React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์™€ ํ˜ธํ™˜๋˜๋Š” ๋ฒˆ๋“ค๋Ÿฌ์—๊ฒŒ ์ง€์‹œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

React DOM

React DOM์€ ๋ธŒ๋ผ์šฐ์ € DOM ํ™˜๊ฒฝ์—์„œ ์‹คํ–‰๋˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋งŒ ์ง€์›๋˜๋Š” ๊ธฐ๋Šฅ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์„น์…˜์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‚˜๋‰ฉ๋‹ˆ๋‹ค.

  • Hook - ๋ธŒ๋ผ์šฐ์ € DOM ํ™˜๊ฒฝ์—์„œ ์‹คํ–‰๋˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•œ Hook์ž…๋‹ˆ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ - React๋Š” ๋ธŒ๋ผ์šฐ์ € ๋‚ด์žฅ HTML ๋ฐ SVG ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ชจ๋‘ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
  • API - react-dom ํŒจํ‚ค์ง€์—๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋งŒ ์ง€์›๋˜๋Š” ๋ฉ”์„œ๋“œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
  • ํด๋ผ์ด์–ธํŠธ API - react-dom/client API๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €์—์„œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์„œ๋ฒ„ API - react-dom/server API๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์„œ๋ฒ„์—์„œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ HTML๋กœ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React์˜ ๊ทœ์น™

React์—๋Š” ํŒจํ„ด ์ดํ•ด๋ฅผ ์‰ฝ๊ฒŒ ํ•˜๋ฉฐ ๊ณ ํ’ˆ์งˆ์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ์ผ์ข…์˜ ๊ทœ์น™ ํ˜น์€ ๋ชจ๋ฒ”์ ์ธ ๋ฐฉ์‹์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ปดํฌ๋„ŒํŠธ์™€ Hook์€ ์ˆœ์ˆ˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค โ€“ ์ˆœ์ˆ˜์„ฑ์€ ์ฝ”๋“œ๋ฅผ ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ณ  ๋””๋ฒ„๊ทธํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ฉฐ, React๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ปดํฌ๋„ŒํŠธ์™€ Hook์„ ์ž๋™์œผ๋กœ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
  • React๊ฐ€ ์ปดํฌ๋„ŒํŠธ์™€ Hook์„ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ์‹ โ€“ React๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ตœ์ ํ™”ํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ์ปดํฌ๋„ŒํŠธ์™€ Hook์„ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.
  • Hook์˜ ๊ทœ์น™ โ€“ Hook์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜๋กœ ์ •์˜๋˜์ง€๋งŒ ํ˜ธ์ถœ ์œ„์น˜์— ์ œ์•ฝ์ด ์žˆ๋Š” ํŠน๋ณ„ํ•œ ์œ ํ˜•์˜ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ๋กœ์ง์ž…๋‹ˆ๋‹ค.

๋ ˆ๊ฑฐ์‹œ API

  • ๋ ˆ๊ฑฐ์‹œ API - react ํŒจํ‚ค์ง€์—์„œ ๋‚ด๋ณด๋ƒˆ์ง€๋งŒExported ์ƒˆ๋กœ ์ž‘์„ฑํ•  ์ฝ”๋“œ์—์„œ๋Š” ๊ถŒ์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.