[React] 다시 만드는 todo list (투두메이트 클론) (4 - atomFamily, 투두 색깔 채우기)

대략적인 기능 구현이 모두 끝났습니다. 하루이틀동안 급하게 마무리했음. 정리하자면,

• todoItem을 유저와 날짜에 따라 별도의 상태로 관리한다.
• 할일을 완료할 때마다 해당 날짜의 달력에 색깔과 남은 개수가 업데이트된다.

 

1. TodoItem 기능 확장

달력 기능 전에 먼저 투두 피드를 구현하면서 날짜를 생각하지 않고 단순하게 하나의 상태로만 관리했다. 이젠 선택한 날짜와 선택한 프로필에 따라 투두들을 관리하고 보여줘야했다. 많은 고민을 했음.

 

처음엔 백단 디비에서 관리한다면 어떻게 되어있을지를 생각했다 (원래는 서버에서 받아와야 하는 데이터를 프로젝트에선 목데이터처럼 사용하는 것이기 때문에). '투두' 테이블을 하나 두고, userId와 date 컬럼을 추가해서 그걸 통해 정보를 패칭해오지 않았을까?

 

export interface ITodoItem {
  label: string;
  id: string;
  isDone: boolean;
  category: ICategory;
  userId:string;
  date:string;
}

export const todoState = atom<ITodoItem[]>({
  key: 'todo',
  default: initialState,
});

기존과 크게 바꾸지 않고 인터페이스에 userId과 date만 추가해서 이렇게 관리를 해볼까.. 했더니 굉장히 마음에 들지 않았다. 모든 날짜와 모든 유저가 갖고있는 투두를 하나의 배열로 갖고있는다는 점이었다. 이건 엄청 큰 문제다.

 

투두를 가져올때마다 배열을 모두 돌면서 해당하는 유저와 날짜 값을 갖고있는 애만 필터해서 가져오면 될텐데, 더 근사한 방법이 있을 것 같았다. 무엇보다 모든 유저와 날짜의 투두를 하나의 상태(아톰)으로 관리하기 때문에 값이 바뀔때마다 전부다 렌더링되는 상황이 생길 수 있다.

 

 

리액트 쿼리를 사용한 상황이었다면 어떻게 했을까? [userId, date]를 쿼리키로 사용하지 않았을까. 각각을 별도의 상태로 캐싱하고 관리하는게 더 효율적이다. 리코일의 atomFamily 함수가 제공하는 기능이다.

 

atomFamily 도입

/**
 * @type [selectedDate, selectedProfile]
 */
export type ITodoItemKey = [string, string];

export const todoState = atomFamily<ITodoItem[], ITodoItemKey>({
  key: 'todo',
  default: [],
});

atomFamily 는 동일한 형태의 atom을 생성해주는 팩토리 함수를 제공한다. 무슨 말이냐면, 매개변수로 받아온 값에 따라 각각의 아톰을 생성하는데, 그게 모두 똑같은 인터페이스를 갖는 것. 모든 날짜와 유저의 투두를 하나의 배열로 관리하는 것이 아닌 각각의 아톰으로 분리하기 위해 사용한다.

 

매개변수를 리액트 쿼리의 쿼리키와 비슷한 방식으로 사용하고 싶었다. 스트링 배열의 형태로 주고 @Key라는 네이밍을 썼다. 직관적이어서 좋다.

 

selectorFamily에서 atomFamily 상태 가져오기

기존 프로젝트 구조에서는 FeedItemList.tsx에서 특정 카테고리의 투두들만 가져와서 렌더링하고 있다. 이제는 특정 날짜의 특정 유저의, 특정 카테고리의 투두들을 가져와야 한다. 원래 사용하던 selectorFamily가 atomFamily의 값을 가져와서 가공할 수 있도록 수정해주었다.

 

export type ITodoItemSelectorParams = {
  todoItemKey: ITodoItemKey;
  categoryLabel: string;
};

export const todosByCategory = selectorFamily<
  ITodoItem[],
  ITodoItemSelectorParams
>({
  key: 'todoSelector',
  get:
    ({ todoItemKey, categoryLabel }: ITodoItemSelectorParams) =>
    ({ get }) =>
      get(todoState(todoItemKey)).filter(
        (todo) => todo.category.label === categoryLabel,
      ),
});

atomFamily의 파라미터와 카테고리 라벨을 받아와서 사용한다.

 

인터페이스 만들기

export interface ITodoItemSelectorParams {
  todoItemKey: ITodoItemKey;
  categoryLabel: string;
}

type이 아니라 interface로 만들어 사용하면, 아래와 같은 오류가 발생한다.

 

type으로 바꾸어주기만 했는데 오류가 해결되었다. atomFamily param의 타입 중에서 {[key: string]: SerializableParam} 형태의 인터페이스로 구현하려했다. 저런걸 index signature라고 하는데, 타입별칭을 사용해야만 사용할 수 있는 듯 하다.

 

컴포넌트에서 사용

  const selectedDate = useRecoilValue(selectedDateState);
  const selectedProfile = useRecoilValue(selectedProfileState);
  const todos = useRecoilValue(
    todosByCategory({
      todoItemKey: [selectedDate, selectedProfile],
      categoryLabel: category.label,
    }),
  );

FeedItemList 컴포넌트에서 위와 같이 selectorFamily 함수를 호출해 사용한다. date와 profile 상태 또한 전역으로 관리한다.

 

 

2. 달력 투두 아이콘 색깔 채우기

되게 재밌게 작업했다. 투두메이트만의 아이덴티티라고 할 수 있는 기능이다.

완료한 투두의 색깔이 달력에도 표시된다. 구체적으로 어떤식으로 표시되는지 살펴봤음.

• 완료되지 않은 투두의 개수가 표시된다. 모든 투두가 완료되면 체크가 표시된다.
• 달력의 아이콘은 동그라미 네개로 이루어져있는데, 각 동그라미마다 다른 색상을 넣을 수 있다.
• 완료된 투두들의 카테고리 종류에 따라 다양하게 표시될 수 있다. 
• 카테고리가 한가지일때는 단색으로, 두가지일때는 반반씩. 네종류일때는 동그라미 하나씩 표시된다.
• 세가지일때는 색깔 하나가 두칸을 차지하는데, 완료된 투두 중 개수가 많은 카테고리가 두칸이다.

 

TodoIconSvg.tsx

interface TodoIconSvgProps {
  colors: string[];
}

const TodoIconSvg = ({ colors }: TodoIconSvgProps) => {
  let fill = [colors[0], colors[0], colors[0], colors[0]];

  switch (colors.length) {
    case 1:
      fill = [colors[0], colors[0], colors[0], colors[0]];
      break;
    case 2:
      fill = [colors[0], colors[1], colors[1], colors[0]];
      break;
    case 3:
      fill = [colors[0], colors[0], colors[1], colors[2]];
      break;
    case 4:
      fill = [colors[0], colors[1], colors[2], colors[3]];
      break;
    default:
      fill = ['#DBDDDF', '#DBDDDF', '#DBDDDF', '#DBDDDF'];
      break;
  }

  return (
    <svg
      width="21"
      height="21"
      viewBox="0 0 21 21"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="6.46154" cy="6.46154" r="6.46154" fill={fill[0]} fillOpacity={'0.9'}/>
      <circle cx="6.46154" cy="14.5387" r="6.46154" fill={fill[1]} fillOpacity={'0.9'}/>
      <circle cx="14.5387" cy="14.5387" r="6.46154" fill={fill[2]} fillOpacity={'0.9'}/>
      <circle cx="14.5387" cy="6.46154" r="6.46154" fill={fill[3]} fillOpacity={'0.9'}/>
    </svg>
  );
};

export default TodoIconSvg;

네개의 원으로 이루어진 svg 컴포넌트를 하나 만들었다.colors 배열을 컴포넌트 밖에서 만들어서 줬음. 위에서 언급했던 조건에 맞게 색을 채워준다. 투명도를 0.9로 했더니 실제 투두메이트랑 완전히 똑같다..! 중요한건 아니지만 괜히 기분좋은 포인트.

 

useTodoInfo.ts

const useTodoInfo = (date: string, userId: string) => {
  const todos = useRecoilValue(todoState([date, userId]));

  const colors = todos
    .filter((todo) => todo.isDone === true)
    .map((done) => done.category.color);
  const colorSet = new Set(getSortedArray(colors));
  const colorSetArr = Array.from(colorSet);

  const count = todos.filter((todo) => !todo.isDone).length;
  const isDone = count === 0 && todos.length !== 0;

  return { count, colorSetArr, isDone };
};

export default useTodoInfo;

달력 아이템 렌더링에 필요한 값들을 제공하는 로직이다. 완료한 투두들의 색깔을 가공해서 리턴한다. 빈도수로 정렬한 후에 set으로 중복을 제거하도록 했다.

 

CalenderItem.tsx

interface CalenderItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  date: string;
  userId: string;
  isSelected: boolean;
}

const CalenderItem = ({
  date,
  userId,
  isSelected,
  ...props
}: CalenderItemProps) => {
  const { count, colorSetArr, isDone } = useTodoInfo(date, userId);
  return (
    <>
      <button {...props}>
        <span className="count">{count !== 0 && count}</span>
        <TodoIconSvg colors={colorSetArr} />
        {isDone && <CheckIcon className="check" />}
      </button>
      <span className="date">{dayjs(date).date()}</span>
    </>
  );
};

이렇게 UI컴포넌트로 불러와 가독성있게 표현할 수 있다.

 

나 살짝 천잰듯ㅋ