โถ 3-7 ~
๋ฆฌํด๋๋ ํํ๊ฐ ๋์ ๋๋ฆฌ์์ ์ ์ ์๋ค.
โkey๋ value๋ ์์ด widget๋ง ์๋ ๊ฑด ๋ญ๊น?
=> Javascript์์ key์ value๊ฐ ๋์ผํ ๊ฒฝ์ฐ ์ถ์ฝํด์ ํ๋๋ง ์์ฑํด๋ ์์์ ์ธ์ํ๋ค.
widget: widget
= widget
๋งจ ์ฒ์์ ๊ฐ์ง๊ณ ์์ ์ด๊ธฐ๊ฐ์ ์ง์ .
โ ํ๋ผ๋ฏธํฐ์ ํํ๊ฐ ์ด์ํ๋ค?
state = {}
, action = {}
ํจ์ ๋ด์์ ์์ง ๊ฐ์ ๊ฐ์ง๊ณ ์์ง ์์ ํ๋ผ๋ฏธํฐ๋ค(undefined, undefined, undefined, ...)์ ๋ถ๋ฌ ์์
์ ์ํํ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๊ธฐ ๋๋ฌธ์ ๋ฏธ๋ฆฌ ๊ธฐ๋ณธ๊ฐ์ ์ง์ ํด์ฃผ๋ ๊ฒ.
์ธ๋ถ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ๋, ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ ์ฌ ๋, ์์ง ๋ฐ์ดํฐ๋ ์์ ํ ๋์ด์ค์ง ์์๊ธฐ ๋๋ฌธ์ ์ก์ ์ ์ํํ ์ ์๋ค. ์ด ๋๋ฌธ์ ๋ฏธ๋ค์จ์ด๋ผ ํ๋ ์ค๊ฐ๋ค๋ฆฌ๋ฅผ ๋๋๋ค.
index.js์์ provider, store๋ฅผ importํ ๋ค, provider๋ฅผ ์ฌ์ฉํด store๋ฅผ ๋๊ฒจ์ค๋ค.
์ฐ๊ฒฐ์ ๋ง์น ๋ค, ๋ฆฌ๋์ค์์ ๋ฐ์ดํฐ๋ฅผ ์์ ํ ๊ฒฝ์ฐ ๊ทธ๋๋ก ๋ฐ์๋๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
โ App.js์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์๋ ๋ฆฌ์คํธ ํ์ด์ง๋ฅผ ๋ฆฌ๋์ค์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๋๋ก ์์ ํ๊ธฐ ๋๋ฌธ์ ์ด์ ์ถ๊ฐํ๊ธฐ ๊ธฐ๋ฅ์ ์ฌ์ฉํด๋ ๋ฐ์ดํฐ๊ฐ ์ถ๊ฐ๋์ง ์๋๋ค.
โ ํ๋ฆ ํ์ธํด๋ณด๊ธฐ 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;
ํ ๊ฒฝ์ฐ ๊ธฐ์กด์ ๋ฃจํธ๋ค์ด ๊ฒฝ๋ก๋ฅผ ์ฐพ์ ์ ์๊ฒ ๋์ด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.