도입기

모집 글 작성 페이지를 리팩토링하는 과정에서 prop drilling 문제를 해결하고자 Context API를 도입했습니다. Context API를 사용해 불필요한 props 전달을 제거하고 코드 가독성을 높일 수 있었으나, 한 가지 변수가 변경될 때 이를 참조하는 모든 컴포넌트가 재렌더링되는 문제가 발생했습니다. 이로 인해 너무 잦은 렌더링으로 인한 성능 문제에 직면하게 되었습니다.

조사 결과, Context API는 코드의 구조 개선에 도움을 주지만 성능을 직접적으로 개선해 주지는 않는다는 점을 알게 되었습니다. 이를 해결하기 위해 상태 관리 도구인 Zustand를 도입했습니다. Zustand는 Redux Toolkit에 비해 보일러플레이트 코드가 적고 러닝 커브가 낮아, 더 쉽게 적용할 수 있었습니다. 또한, Zustand를 통해 코드의 불필요한 렌더링을 방지할 수 있어 성능 문제를 개선할 수 있었습니다.

zustand 도입을 통해 코드의 효율성과 가독성을 동시에 높일 수 있었습니다.

zustand 사용법

import { create } from "zustand";

interface RecruitPostType {
  postData: TravelPlan;
  updateTravelData: (
    key: keyof TravelPlan,
    value: number | string | unknown[] | void,
  ) => void;
  setTravelData: (data: TravelPlan) => void;
  clearTravelData: () => void;
}

// create로 store를 생성합니
export const useRecruitPostStore = create<RecruitPostType>(set => ({
	// 사용할 변수를 선언합니다.
  postData: {
		// data
	},
	// set을 통해 상태를 변경할 수 있습니다.
  updateTravelData: (key, value) =>
    set(state => ({
      postData: {
        ...state.postData,
        [key]: value,
      },
    })),
  setTravelData: data => set({ postData: data }),
  clearTravelData: () =>
    set({
      postData: {
        // data
      },
    }),
}));

// 구조 분해를 통해 불러오기
const { updateTravelData, postData } = useRecruitPostStore();

// state를 통해 특정 값 불러오기 -> 렌더링 최적화
const updateTravelData = useRecruitPostStore(state => state.updateTravelData);
const title = useRecruitPostStore(state => state.postData.title);