reducer 만들기

과제도 다 끝내고, 제출까지 했으니 오늘은 챌린지반 과제로 시간을 모두 보냈다. 이전에 하던 과제는 오전 중에 비교적 빠르게 완료할 수 있었는데, 오늘 새로 제시된 과제가 또 굉장히 어려워서(혹은 디버깅을 하지 못해서) 시간이 많이 지났다. 채 완료하지 못한 오늘의 과제는 내일 다루기로 하고, 이번에는 지난 번 과제인 'reducer 만들기'를 정리해볼까 한다. 

 

먼저 리듀서의 형태부터 소개하도록 하겠다. 아래가 리듀서이다. 

1. state와 action을 인자로 가져와서
2. action 객체의 type 값에 따라
3. state를 변환하여 저장한다. 

export const initialState = [];

export const todoReducer = (state, action) => {
  switch (action.type) {
    case "ADD_BTN":
      return [...state, action.payload];

    case "DELETE_BTN":
      return state.filter(
        (element) => element.id !== Number(action.payload.id)
      );
    default:
      return state;
  }
};

 

 

사용할 때는 아래와 같다. 

1. useReducer로 리듀서와 초기값을 가져오고
2. state와 dispatch로 함수를 만든다.
   1. type과 payload에 주의!(이 두 가지가 리듀서의 action을 이룬다.)

const [state, dispatch] = useReducer(todoReducer, initialState);
  const addEventHandler = () => {
    dispatch({
      type: "ADD_BTN",
      payload: { todo, id: new Date().getTime() },
    });
    setTodo("");
  };
  const deleteEventHandler = (element) => {
    dispatch({
      type: "DELETE_BTN",
      payload: element,
    });
  };

 

그리고 원하는 곳에서 실행

<button onClick={addEventHandler}>추가</button>

<button onClick={() => deleteEventHandler(element)}>삭제</button>

 

 

 

이게 리듀서의 구조이다. 다만 props-drilling 방식으로 이러한 리듀서를 다루는 것은 번거로운 일이기 때문에 context API를 결합하여 코드를 작성했다. 아래가 어제 날 고생하게 했던 reducer+contextAPI로 작성한 provider 컴포넌트이다.

 

export const TodoContext = createContext(null);

export const TodoProvider = ({ children }) => {
  const [todo, setTodo] = useState("");
  const [state, dispatch] = useReducer(todoReducer, initialState);
  const addEventHandler = () => {
    dispatch({
      type: "ADD_BTN",
      payload: { todo, id: new Date().getTime() },
    });
    setTodo("");
  };
  const deleteEventHandler = (element) => {
    dispatch({
      type: "DELETE_BTN",
      payload: element,
    });
  };
  return (
    <TodoContext.Provider
      value={{ todo, setTodo, state, addEventHandler, deleteEventHandler }}
    >
      {children}
    </TodoContext.Provider>
  );
};

이전에 실패한 코드는 삭제해버렸기 때문에 예전의 문제가 정확히 무엇이었는지는 알 수 없게 되었으나, 인지하기로는 이 코드는 내가 처음 생각한 코드와 달라진 점이 없기 때문에 아마 오타를 내지 않았을까 싶다. 철자 오타는 아닌 것 같고, 재구성하느라 이리저리 수정을 하고는 했으니 괄호를 잘못 사용했을 가능성이 크지 않나 싶다. 위의 성공한 코드는 처음부터 다시 작성한 것이기 때문에 달리 수정을 하지 않았기 때문이다. 

 

이번 경우를 생각하면 지금 매달리고 있는 router 만들기에도 수정으로 인한 괄호 오타 같은 것들이 있지 않을까 싶다. 아무래도 코드를 수정할 때 여기저기서 조금씩 가져오는 방식은 지양하는 것이 좋을 것 같다.