/My-Shop

Simple online shopping mall using Context API & Hooks

Primary LanguageJavaScript

๐Ÿ›’ Great Developeer Goods Shop

๐Ÿ’ป ์†Œ๊ฐœ

React JS์˜ Context API์™€ Hook์„ ์ด์šฉํ•œ ๊ฐ„๋‹จํ•œ ์‡ผํ•‘๋ชฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„

๐Ÿ’ป ๊ฐœ๋ฐœ ํ™˜๊ฒฝ

React ํ”„๋กœ์ ํŠธ ์ด์šฉ

  • nvm : 1.1.9.
  • npm : 6.14.12
  • react : ^18.2.0
  • react-dom : ^18.2.0

๐Ÿ’ป ์ฃผ์š” ๊ธฐ๋Šฅ

  1. ์ƒํ’ˆ ๋ฐ์ดํ„ฐ ๋ณด์ด๊ธฐ
    • context, provider๋กœ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ

  1. ์ƒํ’ˆ ์‡ผํ•‘์นดํŠธ์— ๋‹ด๊ธฐ
    • context, provider์—์„œ useSteate์™€ hook์ด์šฉ

  1. ์‡ผํ•‘์นดํŠธ์— ๋‹ด์€ ์ƒํ’ˆ ๋ณด์ด๊ธฐ
    • addToShoppingCart : (provider) useCallback์ด์šฉ orders map ๋Œ๋ฉด์„œ ์ƒํ’ˆ return

  1. ์‡ผํ•‘์นดํŠธ์— ๋‹ด๊ธด ์ƒํ’ˆ ํ•œ ๊ฐœ ์‚ญ์ œํ•˜๊ธฐ
    • remove : (provider) useCallback์ด์šฉ setOrders์—์„œ map๋Œ๋ฉด์„œ ์ƒˆ๋กœ์šด orders return

  1. ์‡ผํ•‘์นดํŠธ์— ๋‹ด๊ธด ์ƒํ’ˆ ์ „๋ถ€ ์‚ญ์ œํ•˜๊ธฐ
    • removeAll : (provider) useCallback์ด์šฉ setOrders([])์ด์šฉ, orders clear..(?)

  1. ์‡ผํ•‘์นดํŠธ์— ๋‹ด๊ธด ์ƒํ’ˆ ๊ฐ€๊ฒฉ ํ™•์ธ
    • good.price * order.quantity ๋กœ ์ƒํ’ˆ ์ข…๋ฅ˜๋ณ„๋กœ ๊ฐ€๊ฒฉ ํ™•์ธ
    • useMemo๋ฅผ ํ†ตํ•ด orders map๋Œ๋ฉด์„œ total ๊ฐ€๊ฒฉ return

  1. Checkout ๋ฒ„ํŠผ

๐Ÿ“Œ ์ฃผ์š” ๊ฐœ๋…

1. Context

๊ด€๋ จ React ๊ณต์‹ ๋ฌธ์„œ : Context

์‡ผํ•‘๋ชฐ์— ๋ณด์—ฌ์งˆ ์ƒํ’ˆ ๋ฐ์ดํ„ฐ๋ฅผ context๋ฅผ ์ด์šฉํ•˜์—ฌ component๋“ค์—๊ฒŒ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๊ด€๋ฆฌ

2. Hook

๊ด€๋ จ React ๊ณต์‹ ๋ฌธ์„œ : Hook

์ƒํ’ˆ ๋ฐ์ดํ„ฐ(goods), ์‡ผํ•‘์นดํŠธ ์ƒํ’ˆ ๋ฐ์ดํ„ฐ(order), ์ƒํ’ˆ ๋ฐ์ดํ„ฐ๋ฅผ ์ด์šฉํ•˜๋Š” ๊ธฐ๋Šฅ (์‡ผํ•‘ ์นดํŠธ์— ์ƒํ’ˆ ๋‹ด๊ธฐ, ์‡ผํ•‘ ์นดํŠธ ์ƒํ’ˆ ์‚ญ์ œ, ์‡ผํ•‘์นดํŠธ ์ƒํ’ˆ ์ „๋ถ€ ์‚ญ์ œ)์—์„œ useContext()๋ฅผ ์ด์šฉํ•œ Hook ์‚ฌ์šฉ

๐Ÿ’ป ์‹คํ–‰ ํ™”๋ฉด

DEMO

DGshop