[TIL] d+20.5

riverยท2022๋…„ 3์›” 26์ผ
0

โ–ถ 3-7 ~

๐Ÿ”—Redux

https://ko.redux.js.org/introduction/getting-started/

๋ฆฌํ„ด๋˜๋Š” ํ˜•ํƒœ๊ฐ€ ๋”•์…”๋„ˆ๋ฆฌ์ž„์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

โ“key๋‚˜ value๋„ ์—†์ด widget๋งŒ ์žˆ๋Š” ๊ฑด ๋ญ˜๊นŒ?
=> Javascript์—์„œ key์™€ value๊ฐ€ ๋™์ผํ•  ๊ฒฝ์šฐ ์ถ•์•ฝํ•ด์„œ ํ•˜๋‚˜๋งŒ ์ž‘์„ฑํ•ด๋„ ์•Œ์•„์„œ ์ธ์‹ํ•œ๋‹ค.
widget: widget = widget

initialState

๋งจ ์ฒ˜์Œ์— ๊ฐ€์ง€๊ณ  ์žˆ์„ ์ดˆ๊ธฐ๊ฐ’์„ ์ง€์ •.

reducer


โ“ ํŒŒ๋ผ๋ฏธํ„ฐ์˜ ํ˜•ํƒœ๊ฐ€ ์ด์ƒํ•˜๋‹ค?
state = {} , action = {}
ํ•จ์ˆ˜ ๋‚ด์—์„œ ์•„์ง ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š์€ ํŒŒ๋ผ๋ฏธํ„ฐ๋“ค(undefined, undefined, undefined, ...)์„ ๋ถˆ๋Ÿฌ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋ฉด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฏธ๋ฆฌ ๊ธฐ๋ณธ๊ฐ’์„ ์ง€์ •ํ•ด์ฃผ๋Š” ๊ฒƒ.

๋ฏธ๋“ค์›จ์–ด

์™ธ๋ถ€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ๋•Œ, ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ฌ ๋•Œ, ์•„์ง ๋ฐ์ดํ„ฐ๋Š” ์™„์ „ํžˆ ๋„˜์–ด์˜ค์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์—†๋‹ค. ์ด ๋•Œ๋ฌธ์— ๋ฏธ๋“ค์›จ์–ด๋ผ ํ•˜๋Š” ์ค‘๊ฐ„๋‹ค๋ฆฌ๋ฅผ ๋†“๋Š”๋‹ค.


Redux์™€ ์ปดํฌ๋„ŒํŠธ ์—ฐ๊ฒฐํ•˜๊ธฐ

index.js์—์„œ provider, store๋ฅผ importํ•œ ๋’ค, provider๋ฅผ ์‚ฌ์šฉํ•ด store๋ฅผ ๋„˜๊ฒจ์ค€๋‹ค.


์ปดํฌ๋„ŒํŠธ์—์„œ Redux ๋ฐ์ดํ„ฐ ์‚ฌ์šฉํ•˜๊ธฐ

Redux Hook

  • useSelector ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๋Š” ํ›….

์—ฐ๊ฒฐ์„ ๋งˆ์นœ ๋’ค, ๋ฆฌ๋•์Šค์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ •ํ•  ๊ฒฝ์šฐ ๊ทธ๋Œ€๋กœ ๋ฐ˜์˜๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

โ— App.js์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™”๋˜ ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€๋ฅผ ๋ฆฌ๋•์Šค์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋„๋ก ์ˆ˜์ •ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด์ œ ์ถ”๊ฐ€ํ•˜๊ธฐ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ด๋„ ๋ฐ์ดํ„ฐ๊ฐ€ ์ถ”๊ฐ€๋˜์ง€ ์•Š๋Š”๋‹ค.

  • useDispatch


    ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์ด ๋‹ค์‹œ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

โ— ํ๋ฆ„ ํ™•์ธํ•ด๋ณด๊ธฐ App.js์˜ ์•ก์…˜ ์ƒ์„ฑ => bucket.js์˜ ์•ก์…˜ ์‹คํ–‰

๋ชฉ๋ก์˜ ๋‚ด์šฉ ์ƒ์„ธํŽ˜์ด์ง€์—๋„ ์ถœ๋ ฅํ•ด์ฃผ๊ธฐ

1. ์–ด๋Š ๊ฒƒ์„ ๋ˆŒ๋ €๋Š”์ง€?
=> useParams()๋กœ URL Parameter ์‚ฌ์šฉํ•ด index ๋ฒˆํ˜ธ ๋„˜๊ฒจ์ฃผ๊ธฐ
2. ์„ ํƒํ•œ ๋ชฉ๋ก ๊ฐ€์ ธ์˜ค๊ธฐ
=> useSelector ์‚ฌ์šฉํ•ด์„œ ๋ฆฌ๋•์Šค ์Šคํ† ์–ด์—์„œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์™€ ์ธ๋ฑ์Šค์™€ ๋งค์นญ์‹œํ‚ค๊ธฐ.

์žŠ์ง€ ๋ง๊ณ  url ์ˆ˜์ •ํ•ด์ฃผ๊ธฐ.

์„ฑ๊ณต์  โœŒ


๋ฐ์ดํ„ฐ ์‚ญ์ œํ•˜๊ธฐ


์ œ๋Œ€๋กœ ์—ฐ๊ฒฐ ๋๋Š”์ง€ ํ™•์ธ


state, action ํ™•์ธ

โ“ ์–ด๋–ป๊ฒŒ ์‚ญ์ œํ•˜์ง€?
list ๋ฐฐ์—ด ์ค‘ ์„ ํƒํ•œ ํ•ญ๋ชฉ๊ณผ index๊ฐ’์ด ๊ฐ™์€ ์š”์†Œ๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ์š”์†Œ๋ฅผ ์ƒˆ ๋ฐฐ์—ด์— ๋„ฃ์–ด return


Array.filter() ์‚ฌ์šฉํ•ด ์‚ญ์ œํ•˜๋ ค๋Š” ํ•ญ๋ชฉ์˜ index๊ฐ’๊ณผ ๋ชฉ๋ก์˜ index๊ฐ’์„ ๋น„๊ต, index๊ฐ’์ด ๊ฐ™์ง€ ์•Š์€ ์š”์†Œ๋“ค์„ ๋ชจ๋‘ ์ƒˆ ๋ฐฐ์—ด์— ๋„ฃ์Œ.
console๋กœ ์š”์†Œ๊ฐ€ ์ค„์–ด๋“ค์—ˆ๋Š”์ง€ ํ™•์ธ(4->3).


list๋ฅผ ์ƒˆ ๋ฐฐ์—ด๋กœ ๋ณ€๊ฒฝํ•ด returnํ•ด์ฃผ๋ฉด ์‹ค์ œ๋กœ ๋ชฉ๋ก์—์„œ ์‚ญ์ œ๋˜๋Š” ๋ชจ์Šต์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

โ— ์›๋ž˜ ์žˆ๋˜ state์˜ {list:...} ํ˜•์‹์œผ๋กœ return ํ•˜์ง€ ์•Š๊ณ return new_bucket_list; ํ•  ๊ฒฝ์šฐ ๊ธฐ์กด์˜ ๋ฃจํŠธ๋“ค์ด ๊ฒฝ๋กœ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†๊ฒŒ ๋˜์–ด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

profile
๊ฐ€๋ณด์ž๊ณ 

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