[프리온보딩 FE 챌린지 참가] 가장 나를 힘들게 했던 로직들 🫠

프리온보딩 FE 챌린지 참가 사전과제는 바로 "나를 가장 힘들게 했던 로직들"에 대한 글쓰기였다.

1. 나를 가장 힘들게했던 초기화 코드 & 액션 코드

아래는 jotai로 전역상태관리를 했을 때 작성했던 코드다.
힘들었던 이유
1. atomFamily의 사용법이 아직도 익숙하지 못하다.
2. 초기화 코드를 이해하고 설정하지 못했다. (다른 사람의 코드 참고)
=> 결론 나는 구조적으로 이해하고 코드를 짜는 부분에 약하다.
=> 결론2 컴퓨터 공학적 사고가 부족하다?

import { atom } from 'jotai';
import { atomFamily } from 'jotai/utils';

export const dropdownCountAtom = atom(1);
// eslint-disable-next-line no-unused-vars
export const dropdownToggleFamily = atomFamily((id: string) => atom(true));
export const dropdownIdsAtom = atom<string[]>([]);

export const initializeDropdownTogglesAtom = atom(
  null,
  (get, set, initialValues) => {
    const currentIds = get(dropdownIdsAtom);
    const newIds = Object.keys(initialValues);
    const uniqueIds = Array.from(new Set([...currentIds, ...newIds])); // Set을 배열로 변환

    set(dropdownIdsAtom, uniqueIds);

    Object.entries(initialValues).forEach(([id, value]) => {
      set(dropdownToggleFamily(id), value);
    });
  }
);

export const getDropdownInitialValues = (
  initialValues: Record<string, boolean>
): Record<string, boolean> => {
  const defaultValues: Record<string, boolean> = {};

  for (const id in initialValues) {
    defaultValues[id] = initialValues[id] ?? false;
  }
  return defaultValues;
};

export const dropdownToggleActionAtom = atom(
  null,
  (get, set, { id, state = undefined }) => {
    const currentToggle = get(dropdownToggleFamily(id));

    set(dropdownToggleFamily(id), state !== undefined ? state : !currentToggle);
  }
);

export const toggleAllDropdownsAtom = atom(
  null,
  (get, set, action: 'open' | 'close') => {
    const ids = get(dropdownIdsAtom);
    const initialDropdownStates = {};

    ids.forEach((id) => {
      initialDropdownStates[id] = action === 'open';
    });
    set(initializeDropdownTogglesAtom, initialDropdownStates);
  }
);

그리고 가장 큰 문제점은 위 코드를 다른 사람이 보기에도 복잡하고 이해하기 어려울 것 같다는 판단이 들었다.

이번 프리온보딩 FE 챌린지를 참가하면서 나의 이런 주먹구구식 코드를 개선할 수 있었으면 좋겠고 온전히 이해할 수 있는 코드를 작성할 수 있었으면 좋겠다.

프리온보딩 FE 챌린지가 종료되면 후기를 작성할 예정이다!