WIL 11์ฃผ์ฐจ

hyena_leeยท2023๋…„ 2์›” 26์ผ
0

WIL

๋ชฉ๋ก ๋ณด๊ธฐ
15/21
post-thumbnail

๐Ÿ—“๏ธ ๋ฐฐ์šด ๋‚ด์šฉ

  • React custom Component
  • storybook
  • React Router
  • useState
  • Redux (Action, Dispatch, Reducer, Store)
  • Redux hooks(useSlector, useDispatch)

๐ŸŒˆํšŒ๊ณ 


์ด๋ฒˆ์ฃผ๋Š” ์˜ํ˜ผ์„ ํƒˆํƒˆ ํ„ธ๋ ธ๋‹ค. storybook์—์„œ style component๋ฅผ ์—ฐ๋™ํ•ด์„œ ๊ณผ์ œ ์ˆ˜ํ–‰ ์žˆ์–ด ์„ค์น˜๋ถ€ํ„ฐ ์—๋Ÿฌ๊นŒ์ง€ ๋ธ”๋ž™ํ™€์— ๋น ์ง„ ๊ธฐ๋ถ„... storybook์€ ์ฒ˜์Œ ์ ‘ํ•ด๋ณด๋Š” ๊ฑฐ๋ผ ๊ฐ๋„ ์ž˜ ์˜ค์ง€๋„ ์•Š์•˜๊ณ  ์ •๋ณด๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด ์œ ํŠœ๋ธŒ๋ฅผ ์ฐพ์•„๋ณด๊ธฐ๊ฐ€๊นŒ์ง€...๋…ธ๋ ฅ์— ๋น„ํ•ด ๊ณผ์ œ ์ˆ˜ํ–‰์€ ์ฉ ๋ง˜์— ๋“ค์ง€ ์•Š์•˜๊ณ  ์™„์ „ ๋‚ด๊ฒƒ์ด ๋˜์ง€ ์•Š์•˜๊ณ  ์•„์ง๋„ ์ž˜ ๋ชจ๋ฅด๊ฒ ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ์ด๊ณผ์ œ ๋„˜์–ด๊ฐ€๋‚˜ ์‹ถ๋”๋‹ˆ ๋ฆฌ๋•์Šค cmartket์—์„œ ์ •์‹  ๊ฐ€์ถœํ•ด๋ฒ„๋ ธ๋‹ค. vscode ์ž๋™์™„์„ฑ ๊ณ ์žฅ๋‚˜๊ณ  ๋‚ด๊ฐ€ ์ฒ˜์Œ๋ถ€ํ„ฐ ์“ด ์ฝ”๋“œ๊ฐ€ ์•„๋‹ˆ๋‹ค๋ณด๋‹ˆ ์ฝ”๋“œ๋ฅผ ํ•ด์„ํ•˜๋Š”๋ฐ ์žˆ์–ด ์‹œ๊ฐ„๋„ ๋งŽ์ด ๊ฑธ๋ฆฌ๊ณ  ๊ฒฐ๊ตญ์—๋Š” ๊ทธ๋ฆผ์„ ๊ทธ๋ ค๊ฐ€๋ฉด์„œ ํ•˜๋‚˜ํ•˜๋‚˜ ํผ์ฆ ๋งž์ถ”๊ธฐ ์‹œ์ž‘์„ ํ–ˆ๋‹ค. ์ด๊ฑธ ํ•˜๋ฉด์„œ๋„ ๋‚ด๊ฐ€ ํ•˜๋‚˜ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์„๊นŒ? ์ ์  ๋‘๋ ค์šด ๋งˆ์Œ์€ ์ปค์ง€๊ณ  ๋ฌด์„ญ๋‹ค. ๋‚˜ ๋นผ๊ณ  ๋‹ค ์ž˜ํ•˜๋Š” ๋Š๋‚Œ...๋‚˜๋งŒ ์ œ์ž๋ฆฌ ๊ฑธ์Œ์ธ๊ฒƒ ๊ฐ™์•„..์ž์‹ ๊ฐ์ด ์—†์–ด์ง€๊ธฐ๋„ ํ•œ๋‹ค. ๋˜ํ•œ ์—ฌ๊ธฐ ๊ธฐ์ˆ˜๋“ค์ด ๋„ˆ๋ฌด๋‚˜ ์ž˜ํ•œ๋‹ค. ์‹œ๊ฐ„์ด ์ง€๋‚ ์ˆ˜๋ก ๊ฐญ์ฐจ์ด๊ฐ€ ๋‚˜๊ณ  ์žˆ์–ด ๋ฑ์ƒˆ๊ฐ€ ํ™ฉ์ƒˆ๋”ฐ๋ผ ๊ฐ€๋‹ค๊ฐ€ ๊ฐ€๋ž‘์ด ์ฐข์–ด์ง€๋Š” ๊ผด์ด ๋˜๋ฒ„๋ฆฐ ๋Š๋‚Œ์ด๋ผ๊ณ ๋‚˜ ํ• ๊นŒ? ์ด์ œ ๋ญ๊ฐ€ ๋ญ”์ง€ ๋ชจ๋ฅด๊ฒ ๋Š”๋ฐ ๊ธธ์„ ์žƒ์–ด๋ฒ„๋ฆฐ ๋Š๋‚Œ...
์ด๋ฒˆ ๊ณผ์ œ๋ฅผ ํ†ตํ•ด์„œ ๋‚ด๊ฐ€ ๋ฆฌ๋•์Šค๋ฅผ ์•Œ๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์—ญ์‹œ ์‹ค์ „์— ์ ์šฉ ๋ชปํ•˜๋Š” ๋‚˜์˜ ๋ชจ์Šต์„ ๋ณด๊ณ  ๋งˆ์Œ์ด ์ ์  ๊ธ‰ํ•ด์ง„๋‹ค. ์ฐจ๋ถ„ํžˆ ๋‹ค์‹œ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋งŒ๋“ค์–ด๋ณด์ž....

๐ŸŒณRedux ๋ฐ์ดํ„ฐ Flow(strict unidirectional data flow)

โญ๏ธ ์ •๋ฆฌํ•˜๊ธฐ

  • Action : Action์€ ๊ฐ„๋‹จํ•œ JavaScript ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ˆ˜ํ–‰ํ•˜๋Š” ์ž‘์—…์˜ ์œ ํ˜•์„ ์ง€์ •ํ•˜๋Š” 'type' ์†์„ฑ์ด ์žˆ์œผ๋ฉฐ ์„ ํƒ์ ์œผ๋กœ redux ์ €์žฅ์†Œ์— ์ผ๋ถ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” 'payload' ์†์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
    (a plain object describing what happened.)

  • Reducer : ๋ฆฌ๋“€์„œ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๊ฒฐ์ •ํ•˜๊ณ  ์—…๋ฐ์ดํŠธ๋œ ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ์ธ์ˆ˜๋กœ ์กฐ์น˜๋ฅผ ์ทจํ•˜๊ณ  store ๋‚ด๋ถ€์˜ ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.
    (a function describing how the application's state changes)

(prebiousState, action) => nextState

์ด์ „ State๊ณผ action onject๋ฅผ ๋ฐ›์€ ํ›„์— next state์„ retun ํ•จ!!!

Reducer๋Š” pure function์ด๊ธฐ์— reucer ๋‚ด๋ถ€์—์„œ ํ•˜์ง€ ๋ง์•„์•ผํ• ๊ฒƒ (์ฃผ์˜)!!!

  • Mutate its arguments;
  • Perform side effects like API calls and routing transistions;
  • Call non-pure functions, e.g Date.now() or Math.random().
  • Redux Store : ๊ฐ์ฒด ์ €์žฅ์†Œ Redux Store๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ „์ฒด ์ƒํƒœ ํŠธ๋ฆฌ๋ฅผ ๋ณด์œ ํ•ฉ๋‹ˆ๋‹ค.
    ๋‚ด๋ถ€ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€ ํ•ด๋‹น ์ƒํƒœ์— ๋Œ€ํ•œ Action์„ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
    Redux Store๋Š” ํด๋ž˜์Šค๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๋ช‡ ๊ฐ€์ง€ Methods๊ฐ€ ์žˆ๋Š” ๊ฐ์ฒด์ผ ๋ฟ์ž…๋‹ˆ๋‹ค.

  • Dispathch : Dispatch๋Š” ์Šคํ† ์–ด์˜ ๋‚ด์žฅ ํ•จ์ˆ˜ ์ค‘ ํ•˜๋‚˜๋กœ
    ๋ฆฌ๋“€์„œ ํ•จ์ˆ˜์—๊ฒŒ Action์„ ๋ฐœ์ƒํ•˜๋ผ๊ณ  ์‹œํ‚ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
    dispatch(action) ์ด๋Ÿฐ ์‹์œผ๋กœ Action์„ ์ธ์ž๋กœ ๋„˜๊ฒจ์„œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

profile
์‹ค์ˆ˜๋ฅผ ๋‘๋ ค์›Œ ๋ง๊ณ  ๊ณ„์† ๋„์ „ ํ•˜๋Š” ๊ฐœ๋ฐœ์ž์˜ ์—ฌ์ •!

0๊ฐœ์˜ ๋Œ“๊ธ€