(React) useReducer 사용법 / useReducer와 이벤트 함께 사용하기

---

(React) useReducer 사용법

---

* 이 포스팅은 개인적으로 복습을 위해 정리한 포스팅입니다.

 

useReducer이란?

> useReducer은 useState와 마찬가지로 상태를 변경하기 위해 쓰입니다.

 

useReducer 사용 이유

> useReducer은 다양한 상태를 업데이트해줄 수 있습니다.

> useState보다 코드를 더 깔끔하게 작성할 수 있습니다.

 

useReducer을 이용한 코드

사용된 이벤트

>onClick : 클릭 시 카운트 변수 값 +1을 해줌

>onClick: 클릭 시 카운트 변수 값 -1을 해줌

>onChange: input태그에 글을 쓸 수 있게 해줌

 

<결과 화면>

App.js

import React from 'react';
import ReducerComponent from './ReducerComponent';

const App = () => {
  return <ReducerComponent />;
};

export default App;

 

reducer.js

export const initialState = {
  count: 0,
  value: '',
};

export const indexReducer = (state, action) => {
  switch (action.type) {
    case 'INCREASE': {
      return {
        ...state,
        count: state.count + 1,
      };
    }
    case 'DECREASE': {
      return {
        ...state,
        count: state.count - 1,
      };
    }
    case 'INPUT': {
      return {
        ...state,
        value: state.value,
      };
    }
  }
};

 

ReducerComponent.js

import React, { useReducer } from 'react';
import { initialState, indexReducer } from './reducer';

const ReducerComponent = () => {
  const [state, dispatch] = useReducer(indexReducer, initialState);

  const onChange = (e) => {
    dispatch({
      type: 'INPUT',
      value: e.target.value,
    });
  };

  const increase = () => {
    dispatch({
      type: 'INCREASE',
    });
  };

  const decrease = () => {
    dispatch({
      type: 'DECREASE',
    });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="fill up"
        value={state.text}
        onChange={onChange}
      />
      <h1>{state.count}</h1>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
};

export default ReducerComponent;