최종 프로젝트 20일 차 @메인페이지 모달 창, 메인페이지 리팩토링

오늘은 메인페이지 모달 창을 만들고, 메인페이지 리팩토링을 진행했다. 또 계속 css 작업을 진행하기도 했다. 

 

메인페이지 모달 창

먼저 메인페이지 모달 창에 대해서 언급하자면, 이번에 신경 쓴 것은 모달 창의 위치였다. shadcn 모달 창은 state를 통해 open-close를 컨트롤 할 수 있지만 children을 props로 가져가서 사용할 수 있는데, 겪어본 바로는 전자가 더 좋은 방법이었다. 

 

이전에 button 태그가 겹쳐진 것으로 인한 html 렌더링 오류가 children props를 사용하지 않은 가장 큰 이유였는데, 이번에 state를 통해 open-close를 조절하는 이유는 카드마다 모달 창을 달아주는 것이 비효율적이기 때문이다. 

 

필요로 하는 모달 창은 하나밖에 없는데 이것을 띄우기 위해서 모달 창 컴포넌트를 map 안에 넣어서 일일이 렌더링 시키는 것은  불필요한 과정이다. 때문에 나는 map 밖에 open state를 선언하고 map 밖에 모달 창 컴포넌트를 배치해서 하나의 모달 창을 여러 곳에서 재사용할 수 있도록 하였다. 

 

 

메인페이지 리팩토링

또 오늘은 반응형에 대비하여 메인페이지 리팩토링을 진행하였다. 일단 검색 포함한 필터 결과와 검색을 포함하지 않는 필터 결과를 따로 렌더링 하도록 하였다. 모바일에서는 검색이 지금보다 더 분리된 형태로 작동하게 되므로 명확한 구분이 필요하게 된 것이다. 이렇게 분리해두었으니 나중에 아예 따로 페이지를 나누어야 하는 일이 생겨도 구현이 어렵지 않을 것이다. 

    <div className="mt-8 w-[1060px]">
      {searchWord !== null ? (
        <SearchList partySituation={partySituation} />
      ) : (
        <NormalList partySituation={partySituation} />
      )}
    </div>

또 하나의 이유는 페이지네이션 리셋을 위해서 불필요한 렌더링이 발생한다는 것이다. 

 

나는 데이터의 양이 바뀔 때마다 페이지를 리셋하도록 로직을 구성하였다. 데이터의 양이 바뀌면 현재 위치한 페이지의 데이터가 없어질 수 있고, 그런 식으로 데이터가 없는 화면을 보이는 것은 좋지않은 ux라고 판단했기 때문이다. 하지만 이렇게 로직을 구성하니 아래와 같이 두 개의 useEffect를 사용해야 했다. useEffect를 한 번만 사용하여 불필요한 렌더링, 가장 중요하게는 불필요한 요청횟수를 줄이고 싶었고, 위와 같이 다른 컴포넌트에서 각각 state를 선언해주었기 때문에 useEffect가 두 번 실행되는 케이스를 하나 줄일 수 있었다. 

  // 필터 누르면 데이터가 바로 바뀌도록
  useEffect(() => {
    queryClient.invalidateQueries({ queryKey: ['recruitList'] });
    queryClient.invalidateQueries({ queryKey: ['recruitListPages'] });
  }, [order, filter, pageNumber, partySituation, queryClient]);

  // 페이지 리셋
  useEffect(() => {
    setPageNumber(1);
  }, [filter, partySituation, queryClient]);

 

이제 남은 의존성 배열을 보자면 filter는 언제든지 onClick으로 옮겨가는 것이 가능하기 때문에 남은 것은 partySituation의 값에 따라 페이지를 나누는 것인데 이러면 구조가 비슷한 컴포넌트들이 너무 많이 늘어나는 것이 아닌가 하는 걱정이 든다. 컴포넌트의 구조만 재사용하고 state를 각자 다르게 관리할 수 있는 방법이 뭐 없을까? 

 

이 문제를 해결하려다가 요청이 두 번씩 간다는 내 인식이 잘못되었을까봐 네트워크 창을 열어서 세심하게 살펴보았는데, 네트워크 창을 보는 기준을 잘 알 수 없어서 요청 횟수를 파악할 수 없었다. 데이터를 잘 관리하는 것도 개발자의 중요한 역량 중 하나이니 잘 알아보아야겠다.