임통 아이콘

임통 블로그

[PORKO] 사이드 이펙트 해결하기

문제해결

2024년 06월 12일

[PORKO] 사이드 이펙트 해결하기의 썸네일

발견한 문제

기획의 기능 요구사항은 카드를 비교할 때 최대 2개만 선택 가능하게 하는 것이었습니다.
그래서 useEffect 훅을 사용하여 선택된 카드 배열의 길이가 2보다 커질 때, 처음으로 선택한 카드가
선택 취소되도록 했습니다.

그러자 데이터를 비교하는 과정에서 불필요한 사이드 이펙트가 발생하여 사용자 이벤트에 따른 UI의 즉각적인 변경이 이루어지지 않는 문제가 있는 것을 파악했습니다.

아래 이미지를 보면 선택된 카드가 2개일 때 추가로 다른 카드를 선택하게 되면, 선택된 카드가 3개가 되었다가 첫 번째로 선택된 카드가 선택 취소되면서 선택된 카드를 2개로 맞춰지는 것을 볼 수 있습니다.

아래 이미지에서는 동작이 빠르게 보여서 큰 문제가 없어 보이지만 실제로 사용할 때 약간의 불편함이 있어 UX를 해칠 수 있다고 생각하여서 코드 수정을 결심했습니다.

beforebefore

변경 전 코드

useEffect(() => {
  if (selectedCards.length > 2) {
    params.delete(QUERY_KEY, selectedCards[0]);
    router.push(pathname + "?" + params.toString(), { scroll: false });
  }
}, [selectedCards, pathname, router, params]);
 
const onSelect = (cardId: string) => {
  if (selectedCards.includes(cardId)) {
    params.delete(QUERY_KEY, cardId);
  } else {
    params.append(QUERY_KEY, cardId);
  }
 
  router.push(pathname + "?" + params.toString(), {
    scroll: false,
  });
};

변경 후 코드

const onSelect = (cardId: string) => {
  const isSelected = selectedCards.includes(cardId);
 
  if (isSelected) {
    params.delete(QUERY_KEY, cardId);
  } else {
    if (selectedCards.length >= 2) params.delete(QUERY_KEY, selectedCards[0]);
 
    params.append(QUERY_KEY, cardId);
  }
 
  router.push(pathname + "?" + params.toString(), {
    scroll: false,
  });
};

사이드 이펙트를 없애기 위해 useEffect훅을 사용하지 않았고, 선택된 카드의 개수가 2보다 커지지 않도록 선택된 카드의 개수가 2일 때 새로운 카드를 추가한다면, 먼저 선택된 카드 배열의 첫번째 요소를 삭제한 뒤에 선택한 카드를 추가할 수 있도록 변경하였습니다.

아래 이미지는 코드 변경 후 동작으로, 코드 변경 전보다 더 매끄럽게 동작하는 것을 볼 수 있습니다.
afterafter

해당 글은 목차가 없습니다.