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