2. [프로젝트 : 같겜(GOATGAME)]

오늘은 정말 오랜만에 써보는 포스팅이다..
현생이바빠.. 이건 핑계고 그동안 귀찮아서 안했다.

현재 프로젝트 같겜은 거의 마무리된 상태

프로젝트의 전체코드는 GITHUB에 있다.

오늘은 신경써서 만들어본 페이지를 리뷰할예정

useEffect(() => {
    const filteredData = filterData(getData, searchInputValue, selectedTab);
    setSearchData(filteredData);
  }, [getData, searchInputValue, selectedTab]);

  useEffect(() => {
    const totalData = searchInputValue !== ''
      ? searchData
      : selectedTab !== 'ALL'
      ? filterData(getData, '', selectedTab)
      : getData;
    const totalItems = totalData.length; // 전체 아이템 수
    setTotalPages(Math.ceil(totalItems / itemsPerPage));
  }, [searchInputValue, selectedTab, getData, searchData]);

  useEffect(() => {
    const pageNumbers = [];
    for (let i = 1; i <= totalPages; i++) {
      pageNumbers.push(i);
    }

    const blockSize = pagesPerDisplay;
    const blockIndex = Math.ceil(currentPage / blockSize);
    const startPage = (blockIndex - 1) * blockSize + 1;
    let endPage = startPage + blockSize - 1;

    if (endPage > totalPages) {
      endPage = totalPages;
    }

    const displayedPages = pageNumbers.slice(startPage - 1, endPage);
    setDisplayedPages(displayedPages);
  }, [currentPage, totalPages, pagesPerDisplay]);

  //----------------------------- 탭 및 검색 -----------------------------

  const tabClickHandler = (option : string) => {
    dispatch(setCurrentPage(1));
    dispatch(setTab(option));
  }

  const searchOnChange = (e : React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { value } = e.target;
    dispatch(setSearchInputValue(value)); //value값 저장
  }

  //----------------------------- 페이징 이벤트 처리 -----------------------------
  const goToPreviousPage = () => {
    if (currentPage > 1) {
      dispatch(setCurrentPage(currentPage - 1));
    }
  };

  const userSelectedCurrentPage = (pageNumber: number) => {
    dispatch(setCurrentPage(pageNumber));
  };

  const goToNextPage = () => {
    if (currentPage < totalPages) {
      dispatch(setCurrentPage(currentPage + 1));
    }
  };

  //----------------------------- renderCards -----------------------------

처음 시작을 했을때 filterData부분이 중복되는 코드가 되게 많았다.
중복되고 비슷한 함수가 많아지니 개발을 하면서 주석을 넣는다 해도 햇갈리게 되기마련..

그래서 중복되는 코드를 최소화 하고자 리펙토링을 진행해볼까 했지만
구체적인 방안이 나오지 않았다.

호출되는 부분을 useEffect로 어떻게 하면 되지 않을까?
결국 기존 filter State, searchData state에 들어가는건
결국 액션이 있어야 작동하기 때문이다..

chat gpt가 없던 시절이였으면 결국 나 자신과 타협하면서 포기했겠지만

chat gpt가 추상적으로 보이던 길을 길잡이 해주기 시작했다

filter State는 함수로 변경하고

searchData만 state로 남겼다.

그 뒤,
useEffect에서 검색어 입력 탭클릭 혹은 둘, 다 하게 됐을때
filterData함수를 실행시켜 매개변수 data에 배열로 들어온 부분을
if문으로 처리하여 return시켜 줬다.

그랬더니 여러개로 쪼갰었던 데이터 처리 함수들이 filterData함수로 모이고

return값들만 쓰면 됐던거였다..

ChatGPT를 완전히 의존을 하면 안되지만

추상적으로 보이던 길을 윤곽을 잡아주니 성큼성큼 갈 수 있게 되었다.