리액트 숙련 5일 차(完) @개인 과제 200% redux-toolkit, memoization, toaster

어제 context API를 이용한 리팩토링을 한 이후 오늘 오전까지 이어서 도전과제를 전부 달성했다. redux-toolkit, memoization, toaster을 사용하여 리팩토링, 불필요한 리렌더링 막기, alert 창 개선이다. 

 

redux-toolkit 리팩토링은 이전에 context api로 리팩토링한 것들을 활용하면 되었기에 개선 그 자체는 크게 어렵지 않았고, memoaization을 처음 사용해봤는데, React.memo(컴포넌트)의 형식으로 코드를 조금만 수정해도 잘 작동을 하는 것을 확인할 수 있었다. toaster를 사용해서 alert 창을 개선하는 것도 간단했는데, <Toaster/>를 어디에 두어야하는지만 잘 알고 있으면 어렵지 않았다. 

 

다만 문제는 오늘 튜터님이 내주신 챌린지반 과제로 reducer를 사용하여 todo-list를 작성하는 과정에서 문제가 좀 있었다. 

reducer를 사용하는 것 자체는 redux와 비슷하기 때문에 크게 어렵지 않았는데, 문제는 reducer+context api를 합쳐주자 무언가 치명적인 오류가 발생해서 몇 시간 동안 과제를 붙잡고 있어도 과제를 끝내지 못한 것이다... 월요일까지 제출하면 되는 과제이니 어찌저찌 완료할 수 있을 것 같다고 생각하는데, 내 응용력이 이렇게 부족해서 실제 업무를 어떻게 할 수 있을지 걱정이 되었다. 

 

오늘의 돌아보기는 여기까지하고, 나중에 reducer와 context api 합치는 문제를 해결하면 다시 글을 쓸 수 있을 것이다. 아래는 제목에 제시한 완료된 과제를 간단하게 명시하겠다. 

 

//redux-toolkit 리팩토링

const initialState = [];

const pokemonSlice = createSlice({
  name: "pokemon",
  initialState,
  reducers: {
    addBtn: (state, action) => {
      let sameId = false;
      for (const element of state) {
        if (element.id === action.payload.id) {
          sameId = true;
          break;
        }
      }
      if (sameId) {
        toast.warning("이미 추가한 포케몬입니다", {
          toastId: action.payload.id,
        });
        return [...state];
      }
      if (state.length < 6) {
        return [...state, action.payload];
      } else {
        toast.warning("더 이상 추가할 수 없습니다", {
          toastId: action.payload.id,
        });
      }
    },
    deleteBtn: (state, action) => {
      return state.filter((element) => {
        return !(element.id === action.payload.id);
      });
    },
  },
});

export const { addBtn, deleteBtn } = pokemonSlice.actions;
export default pokemonSlice.reducer;

 

//memoization으로 상태 유지하기

const AddForm = React.memo(Form);

export default AddForm;

 

//toaster          각 페이지의 반복문으로 돌리는 컴포넌트 안에 넣으면 오류가 발생함을 확인함

const Dex = () => {
  return (
    <div>
      <Toaster richColors position="top-center" />
      <Dashboard />

      <PokemonList />
    </div>
  );
};