useReducer

공식문서에 있는 내용을 복사해서 가져왔습니다. 

Reducer 관련 내용을 다른 파일에 분리하는 장점이 없으니 한 페이지에 모두 몰아서 살펴보도록합시다.

 

useReducer를 활용해서 redux를 사용하는 방법입니다.

일반 redux랑 사용하는 거랑 다른 점이 없습니다만 

 

useReducer를 사용해서 해당 디스패치를 곧바로 사용할 수 있다는 점 정도가 다른 점이겠네요. 

음... 좀 더 써봐야 알겠지만 react-redux에서 제공해주는 useDispatch를 사용하는 게 더 손에 익는 것 같습니다.

 

import React, { useReducer } from "react";

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

const App = () => {
  return (
    <>
      <div>
        <h1>Counter!</h1>
        <Counter />
      </div>
    </>
  );
};

export default App;

 

 

input 값을 감지하는 데 남용되는 useState를 useRecuder로 바꾸면 깔끔해집니다.

 

import React, { useReducer } from "react";

const reducer = (state, action) => {
  // action.name에는 input의 name, value에는 우리가 입력한 값이 들어있습니다.
  // return 한 값은 당연히 state가 되겠죠.
  return {
    ...state,
    [action.name]: action.value,
  };
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, { id: "", password: "" });
  const { id, password } = state;

  const onChange = (e) => {
    dispatch(e.target);
  };
  return (
    <>
      <div>
        <h1>{state.value}</h1>
        <input
          name="id"
          type="text"
          value={id}
          placeholder="아이디"
          onChange={onChange}
        ></input>
        <input
          name="password"
          type="password"
          value={password}
          placeholder="패스워드"
          onChange={onChange}
        ></input>
      </div>
    </>
  );
};

export default App;