문제점

1. 맵을 사용하면서 발생한 문제

useEffect(() => {
  setBasicImgs([
    "basic01",
    "basic02",
    "basic03",
    "basic04",
    "basic05",
    "basic06",
    "basic07",
    "basic08",
    "basic09",
    "basic10",
    "basic11",
    "basic12",
    "basic13",
    "basic14",
  ]);
  setMiniImgs([
    "mini01",
    "mini02",
    "mini03",
    "mini04",
    "mini05",
    "mini06",
    "mini07",
    "mini08",
    "mini09",
    "mini10",
    "mini11",
    "mini12",
    "mini13",
  ]);
  setLargeImgs([
    "large01",
    "large02",
    "large03",
    "large04",
    "large05",
    "large06",
  ]);
}, []);

<StickerColumn>
  {miniImgs.map((img, index) => (
    <MiniSticker key={index} onClick={onClick}>
      <div>
        <img
          src={`../images/${customUrl}/${customUrl}_mini_${index}.png`}
          alt=""
        />
      </div>
      <input type="text" name={img} />
    </MiniSticker>
  ))}
</StickerColumn>

map을 쓰려면 배열을 만들어야한다는 생각에 만들었던 것이 엄청나게 거추장스러웠다.

딱히 연산이 들어가지 않은 값을 불러와서 쓰는데다가, index만 사용하는 상황에서는 map을 사용한 코딩이 그다지 효율적으로 보이지 않았다.

이대로라면 유지보수도 힘들것이고 여간 불편한 게 한두가지가 아니었다…

개선방법

1. 각 스티커의 이름, 갯수 가져와 배열에 집어넣고, 이 배열을 다시 map으로 풀어내는 방법.

스티커 각각의 이미지는 각각 수정할 필요 없기에, 인덱스를 활용해서 코딩해 둔 상태이기 때문에 단순히 반복만 해도 될 것이라고 생각이 들었다

개선

useEffect(() => {
  makeArr("mini", 13);
  makeArr("basic", 14);
  makeArr("large", 6);
}, []);

const makeArr = (size: string, num: number) => {
  let arr = [];
  for (let i = 0; i < num; i++) {
    arr.push(`${size}${i}`);
  }
  size === "mini"
    ? setMiniImgs([...arr])
    : size === "basic"
    ? setBasicImgs([...arr])
    : setLargeImgs([...arr]);
};

엄청나게 줄어든 코드 줄 수를 보니 만족스러웠다.

배열을 생성하는 makeArr 함수를 만들어 사이즈와 숫자를 받아오게 만들었다. 추후 기능을 추가하게 되거나, 레이아웃을 변경할 상황이 오게 된다면 유지보수하기도 간편할 것 같다.