프로젝트에서의 상태 관리: 템플릿과 Zustand를 통한 UX기반 설계

사용자 페이지 설계

프로젝트의 사용자 페이지를 기획할 때, 어떤 방식으로 사용자가 페이지를 구성할 수 있도록 할지에 대한 고민이 많았습니다. 처음에는 사용자가 원하는 컴포넌트를 자유롭게 배치해서 자신의 페이지를 만들 수 있게 하는 아이디어를 떠올렸습니다. 하지만 곧 몇 가지 문제가 떠올랐습니다.

1. 기술 구현의 복잡성: 사용자가 임의로 컴포넌트를 배치하려면, 드래그 앤 드롭과 같은 복잡한 UI 기능을 구현해야 합니다. 이를 위해서는 고급 기술 스택과 추가적인 시간 및 노력이 필요하게 되는데, 이는 프로젝트의 일정에 부담을 줄 것 같았습니다.
2. 페이지 구성의 어려움: 사용자가 자유롭게 배치할 수 있는 만큼, 어떻게 배치해야 좋은 페이지가 될지 모를 가능성도 컸습니다. 특히, 디자인 경험이 없는 사용자는 이 기능을 활용하는 데 어려움을 느낄 수 있겠다고 생각했습니다.
3. 구현 시간의 증가: 모든 컴포넌트를 자유롭게 배치하게 한다면, 각 컴포넌트가 어떻게 상호작용할지 고려해야 하며, 상태 관리 및 데이터 흐름을 복잡하게 만들어 개발 시간이 오래 걸릴 가능성이 있었습니다.

---

그래서 새로운 아이디어를 내게 되었어요. 자주 사용되는 템플릿을 미리 만들어서 제공하고, 사용자는 각 템플릿 안에서 컴포넌트의 prop만 변경하면 되도록 하는 것이었습니다. 이렇게 하면,

• 사용자는 복잡한 배치 작업 없이 미리 정의된 구조에서 필요한 내용만 조정할 수 있습니다.
• 또한, 페이지 배치에 어려움을 겪는 사용자를 돕는 직관적인 방식이 될 수 있습니다.
• 구현 난이도가 훨씬 낮아져 개발 속도가 빨라지고, 상태 관리도 단순해집니다.

이 방식은 사용자에게도 직관적일 뿐만 아니라 개발자로서도 효율적으로 구현할 수 있는 좋은 해결책이라고 생각했습니다.

---

Zustand를 활용한 상태 관리

템플릿을 기반으로 한 사용자 페이지에서 상태 관리는 중요한 요소입니다. 이를 위해 저는 Zustand를 사용해 상태를 관리했습니다. Zustand는 경량 상태 관리 라이브러리로, 다양한 상태를 빠르고 쉽게 업데이트할 수 있습니다.

Zustand 설치 및 설정

먼저, Zustand를 프로젝트에 설치해야 합니다. npm 또는 yarn 명령어를 통해 간단히 설치할 수 있습니다.

npm install zustand

yarn add zustand

설치 후, 상태 관리를 위해 store를 설정합니다. 저는 고객센터 폼에 필요한 폼 필드 상태와 드롭다운, 이미지 업로드 등의 상태를 관리하는 코드를 작성했습니다.

---

Zustand 상태 관리 코드 - 고객센터 서비스 폼

import create from "zustand";

export const useServiceStore = create<ServiceState>((set) => ({
  numberType: "02", // 기본값 설정
  phoneNumber: "",
  serviceItem: "",
  inputSize1: "medium",
  inputVariant1: "outlined",
  setServiceState: (key, value) => {
    set((state) => ({
      ...state,
      [key]: value,
    }));
  },
}));

이 코드에서는 고객센터 폼에 필요한 상태들을 정의하고, setServiceState 함수를 사용해 각 필드의 상태를 업데이트합니다. 예를 들어, 사용자가 전화번호를 입력하면 그 값이 phoneNumber 상태에 저장됩니다.

---

사용자 페이지에서 상태 사용하기

아래 코드는 고객센터 폼에서 사용자가 입력한 데이터를 Zustand를 통해 상태로 관리하는 예시입니다. 상태는 즉각적으로 업데이트되며, 폼의 모든 입력 필드와 드롭다운 선택 값은 Zustand의 상태로 저장됩니다.

const CustomerServiceForm: React.FC = () => {
  const { numberType, phoneNumber, serviceItem, setServiceState } = useServiceStore();

  return (
    <form>
      <Input
        placeholder="Phone Number"
        value={phoneNumber}
        onChange={(e) => setServiceState("phoneNumber", e.target.value)}
      />
      <DropDown
        options={["Option 1", "Option 2"]}
        selectedOption={serviceItem}
        onSelect={(value) => setServiceState("serviceItem", value)}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
};

이와 같은 방식으로 Zustand를 통해 사용자의 입력 상태를 실시간으로 관리할 수 있으며, 각 상태가 변경될 때마다 페이지에서 즉시 반영됩니다.

---

처음에는 사용자에게 컴포넌트를 자유롭게 배치할 수 있는 기능을 제공하려고 했지만, 기술적인 구현의 복잡성과 사용자 경험을 고려해 미리 정의된 템플릿과 props를 변경할 수 있는 구조로 변경했습니다. 이를 통해 프로젝트는 더 직관적이고 구현이 쉬운 방향으로 진행되었습니다. 또한, 상태 관리를 위해 사용한 Zustand는 가볍고 빠른 성능을 제공해 프로젝트에서 큰 도움이 되었습니다.