์ด๋ฒ์ฃผ๋ ์ํผ์ ํํ ํธ๋ ธ๋ค. storybook์์ style component๋ฅผ ์ฐ๋ํด์ ๊ณผ์ ์ํ ์์ด ์ค์น๋ถํฐ ์๋ฌ๊น์ง ๋ธ๋ํ์ ๋น ์ง ๊ธฐ๋ถ... storybook์ ์ฒ์ ์ ํด๋ณด๋ ๊ฑฐ๋ผ ๊ฐ๋ ์ ์ค์ง๋ ์์๊ณ ์ ๋ณด๋ฅผ ์ฐพ๊ธฐ ์ํด ์ ํ๋ธ๋ฅผ ์ฐพ์๋ณด๊ธฐ๊ฐ๊น์ง...๋
ธ๋ ฅ์ ๋นํด ๊ณผ์ ์ํ์ ์ฉ ๋ง์ ๋ค์ง ์์๊ณ ์์ ๋ด๊ฒ์ด ๋์ง ์์๊ณ ์์ง๋ ์ ๋ชจ๋ฅด๊ฒ ๋ค. ๊ทธ๋ ๊ฒ ์ด๊ณผ์ ๋์ด๊ฐ๋ ์ถ๋๋ ๋ฆฌ๋์ค cmartket์์ ์ ์ ๊ฐ์ถํด๋ฒ๋ ธ๋ค. vscode ์๋์์ฑ ๊ณ ์ฅ๋๊ณ ๋ด๊ฐ ์ฒ์๋ถํฐ ์ด ์ฝ๋๊ฐ ์๋๋ค๋ณด๋ ์ฝ๋๋ฅผ ํด์ํ๋๋ฐ ์์ด ์๊ฐ๋ ๋ง์ด ๊ฑธ๋ฆฌ๊ณ ๊ฒฐ๊ตญ์๋ ๊ทธ๋ฆผ์ ๊ทธ๋ ค๊ฐ๋ฉด์ ํ๋ํ๋ ํผ์ฆ ๋ง์ถ๊ธฐ ์์์ ํ๋ค. ์ด๊ฑธ ํ๋ฉด์๋ ๋ด๊ฐ ํ๋ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค ์ ์์๊น? ์ ์ ๋๋ ค์ด ๋ง์์ ์ปค์ง๊ณ ๋ฌด์ญ๋ค. ๋ ๋นผ๊ณ ๋ค ์ํ๋ ๋๋...๋๋ง ์ ์๋ฆฌ ๊ฑธ์์ธ๊ฒ ๊ฐ์..์์ ๊ฐ์ด ์์ด์ง๊ธฐ๋ ํ๋ค. ๋ํ ์ฌ๊ธฐ ๊ธฐ์๋ค์ด ๋๋ฌด๋ ์ํ๋ค. ์๊ฐ์ด ์ง๋ ์๋ก ๊ฐญ์ฐจ์ด๊ฐ ๋๊ณ ์์ด ๋ฑ์๊ฐ ํฉ์๋ฐ๋ผ ๊ฐ๋ค๊ฐ ๊ฐ๋์ด ์ฐข์ด์ง๋ ๊ผด์ด ๋๋ฒ๋ฆฐ ๋๋์ด๋ผ๊ณ ๋ ํ ๊น? ์ด์ ๋ญ๊ฐ ๋ญ์ง ๋ชจ๋ฅด๊ฒ ๋๋ฐ ๊ธธ์ ์์ด๋ฒ๋ฆฐ ๋๋...
์ด๋ฒ ๊ณผ์ ๋ฅผ ํตํด์ ๋ด๊ฐ ๋ฆฌ๋์ค๋ฅผ ์๊ณ ์๋ค๊ณ ์๊ฐํ๋๋ฐ ์ญ์ ์ค์ ์ ์ ์ฉ ๋ชปํ๋ ๋์ ๋ชจ์ต์ ๋ณด๊ณ ๋ง์์ด ์ ์ ๊ธํด์ง๋ค. ์ฐจ๋ถํ ๋ค์ ์ฒ์๋ถํฐ ๋ง๋ค์ด๋ณด์....
โญ๏ธ ์ ๋ฆฌํ๊ธฐ
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์ ์ธ์๋ก ๋๊ฒจ์ ์ฌ์ฉํฉ๋๋ค.