hooks-useReducer
โWhat is useReducer
์ํ ๊ฐ์ ๊ด๋ฆฌํ๋ useState์๋ ๋ค๋ฅธ hook
์ํ ์ ๋ฐ์ดํธ ๋ก์ง์ ์ปดํฌ๋ํธ์ ๋ถ๋ฆฌ ๊ฐ๋ฅ
์ฃผ๋ก ๋ณต์กํ ์ํ๋ฅผ ๊ด๋ฆฌํ ๋ ์ฌ์ฉ(๊ฐ๋จํ ๊ฐ์ useState ์ฌ์ฉ)
์ฑ์ด ๋ณต์กํ๊ณ ํ์ฅ์ฑ์ด ์๋ ๊ฒฝ์ฐ useReducer๋ฅผ ์ด์ฉํ ์ํ๊ด๋ฆฌ๊ฐ ์ข๋ค. ๋์ค์ action ๋ง ์ถ๊ฐํ๊ณ , dispatch ํจ์๋ง ์์ ์ปดํฌ๋ํธ์ ์ ๋ฌํ๊ธฐ๋ง ํ๋ฉด ๋๊ธฐ ๋๋ฌธ์ด๋ค.
๋ก์ง์ด ๋ถ๋ฆฌ๊ฐ ๋๋ ํ ์คํธ ์ฝ๋๋ ์ง๊ธฐ ์ฌ์
useReducer ์ ํํ
const reduer = (state, action) => {
switch (action.type) {
case 'action1':
return 'return from some logic';
case 'action2':
return 'return from some logic';
default:
return state;
}
};
export default function SomeComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
// some code ...
return (
<div>
<button type='button' onClick={() => dispatch({ type: 'action1' })}>
some event button1
</button>
<button type='button' onClick={() => dispatch({ type: 'action2' })}>
some event button2
</button>
</div>
);
}
Last updated