[상훈] 포토카드 필터링 로직

[bbearcookie]

기능 설명

리액트를 공부하면서 처음으로 완성했던 프로젝트의 코드를 가져왔어요. 😊 개선 포인트가 많이 보이네요

우선 기능을 설명 드리자면, 서비스 내에 존재하는 포토카드 목록을 조회하는 기능이에요.
그룹과 멤버 드롭 다운을 클릭하여 필터링하거나 인풋에 이름을 입력하여 원하는 정보만 구할 수 있고, 무한 스크롤로 한 페이지 당 20개의 포토카드를 조회해요.

usePhotosQuery.ts

• useInfiniteQuery 를 래핑한 훅이에요. 필터링 관련 정보를 API에 담아서 보내줘요.

import { useInfiniteQuery, UseInfiniteQueryOptions, UseInfiniteQueryResult } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import { ResponseError } from '@type/response';
import { fetchPhotos } from '@api/api/photo';
import { Photo } from '@type/photo';
import * as queryKey from '@api/queryKey';

export interface FilterType {
  groupIds: number[];
  memberIds: number[];
  photoNames: string[];
}

export interface ResType {
  message: string;
  paging: {
    pageParam: number;
    hasNextPage: boolean;
  };
  photos: Photo[];
}

export default function usePhotosQuery(
  filter: FilterType,
  options?: UseInfiniteQueryOptions<ResType, AxiosError<ResponseError>>
): UseInfiniteQueryResult<ResType, AxiosError<ResponseError>> {

  return useInfiniteQuery<ResType, AxiosError<ResponseError>>({
    queryKey: queryKey.photoKeys.list(filter),
    queryFn: ({ pageParam = 0 }) => fetchPhotos({ pageParam, filter }),
    getNextPageParam: (lastPage, pages) => {
      return lastPage.paging.hasNextPage && lastPage.paging.pageParam + 1;
    },
    refetchOnWindowFocus: false,
    ...options
  });
}

useSearcher.ts

• 포토카드 목록 조회 API 에 필요한 쿼리 파라미터를 상태로 관리하는 훅이에요.

import React, { useReducer, useState } from 'react';
import useInitGroup from './content/useInitGroup';
import useInitMember from './content/useInitMember';
import { VoucherStateKey, ShippingStateKey, PaymentStateKey } from '@component/label/stateLabel/_types';
import produce from 'immer';

import {
  State as FilterState,
  Action as FilterAction,
  reducer as FilterReducer,
  initialState as FilterInitialState,
} from '@component/search/content/filter/reducer';

import {
  KeywordType,
  State as KeywordState,
  Action as KeywordAction,
  reducer as KeywordReducer,
  initialState as KeywordInitialState,
} from '@component/search/content/keyword/reducer';

export interface SearcherHook {
  initialized: boolean;
  filter: FilterState;
  keyword: KeywordState;
  filterDispatch: React.Dispatch<FilterAction>;
  keywordDispatch: React.Dispatch<KeywordAction>;
}

interface Props {
  defaultFilter?: Partial<{
    groupIds: number[];
    memberIds: number[];
    voucherState: VoucherStateKey;
    shippingState: ShippingStateKey;
    paymentState: PaymentStateKey;
  }>;
  defaultKeyword?: KeywordType[];
}

function useSearcher({ defaultFilter, defaultKeyword }: Props = {}): SearcherHook {
  const [filter, filterDispatch] = useReducer(
    FilterReducer,
    produce(FilterInitialState, draft => {
      if (defaultFilter?.voucherState) draft.voucherState = defaultFilter.voucherState;
      if (defaultFilter?.shippingState) draft.shippingState = defaultFilter.shippingState;
      if (defaultFilter?.paymentState) draft.paymentState = defaultFilter.paymentState;
    })
  );

  const [keyword, keywordDispatch] = useReducer(
    KeywordReducer,
    produce(KeywordInitialState, draft => {
      let insertId = 0;

      if (defaultKeyword) {
        draft.keywords = defaultKeyword.map(k => ({
          id: insertId++,
          ...k,
        }));

        draft.insertId = insertId;
      }
    })
  );

  // 그룹, 멤버 초기 정보 설정 완료 여부
  const [initialized, setInitialized] = useState(false);

  // 그룹 초기 필터 설정
  const { status: groupStatus } = useInitGroup({ dispatch: filterDispatch, defaultGroupIds: defaultFilter?.groupIds });

  // 멤버 초기 필터 설정
  useInitMember({
    enabled: groupStatus === 'success',
    state: filter,
    defaultMemberIds: defaultFilter?.memberIds,
    dispatch: filterDispatch,
    handleInitialize: () => setInitialized(true),
  });

  return { filter, keyword, filterDispatch, keywordDispatch, initialized };
}

export default useSearcher;

PhotoListWithFilter.tsx

• 필터링 관련 상태를 선언하고, 상단의 검색 바와 필터링을 위한 드롭 다운(Searcher)을 렌더링하고, 포토카드 목록 컴포넌트(PhotoList)에게 필터링 관련 상태를 prop으로 전달해요.

import { IconType } from '@type/icon';
import useSearcher from '@component/search/hook/useSearcher';
import Searcher from '@component/search/Searcher';
import PhotoList from './PhotoList';

interface Props {
  icon?: IconType;
  defaultGroupIds?: number[];
  defaultMemberIds?: number[];
  handleSelect?: (photocardId: number) => void;
}

function PhotoListWithFilter({ icon, defaultGroupIds = [], defaultMemberIds = [], handleSelect }: Props) {
  const searcher = useSearcher({
    defaultFilter: {
      groupIds: defaultGroupIds,
      memberIds: defaultMemberIds,
    },
  });

  return (
    <>
      <Searcher
        hook={searcher}
        category={{
          photoName: '포토카드 이름',
        }}
        options={{
          group: true,
          member: true,
        }}
      />

      {searcher.initialized && <PhotoList hook={searcher} icon={icon} handleSelect={handleSelect} />}
    </>
  );
}

export default PhotoListWithFilter;

PhotocardList.tsx

• prop으로 주입 받았던 필터링 관련 정보를 활용하여 서버로부터 데이터를 가져오고 화면에 렌더링하는 컴포넌트에요.

import { useState, Fragment, useCallback } from 'react';
import { useUpdateEffect } from 'react-use';
import usePhotosQuery, { FilterType } from '@api/query/photo/usePhotosQuery';
import NextPageFetcher from '@component/list/content/NextPageFetcher';
import PhotocardItem from '@component/photocard/item/PhotocardItem';
import SkeletonPhotoCardItem from '@component/photocard/item/SkeletonPhotocardItem';
import { IconType } from '@type/icon';
import { ItemSection } from '@component/list/content/_styles';
import { SearcherHook } from '@component/search/hook/useSearcher';

interface Props {
  hook: SearcherHook;
  icon?: IconType;
  handleSelect?: (photocardId: number) => void;
}

function PhotoList({ hook, icon, handleSelect = () => {} }: Props) {
  const { filter, keyword, initialized } = hook;

  const makeRefindFilter = useCallback(
    (): FilterType => ({
      groupIds: filter.groups.filter(g => g.checked).map(g => g.id),
      memberIds: filter.members.filter(m => m.checked).map(m => m.id),
      photoNames: keyword.keywords.filter(k => k.category === 'photoName').map(k => k.value),
    }),
    [filter, keyword]
  );

  const [refine, setRefine] = useState<FilterType>(makeRefindFilter());

  const { data: photos, isFetching, hasNextPage, fetchNextPage } = usePhotosQuery(refine, { enabled: initialized });

  // 검색 조건 변경시 새로운 필터 적용
  useUpdateEffect(() => {
    if (!initialized) return;
    setRefine(makeRefindFilter());
  }, [filter, keyword]);

  return (
    <ItemSection templateColumnsSize="minmax(11.25em, 1fr)">
      {photos?.pages.map((page, i) => (
        <Fragment key={i}>
          {page.photos.map(p => (
            <PhotocardItem {...p} key={p.photocardId} icon={icon} handleClick={() => handleSelect(p.photocardId)} />
          ))}
        </Fragment>
      ))} 

      {isFetching && Array.from({ length: 20 }).map((_, i) => <SkeletonPhotoCardItem key={i} />)}
      <NextPageFetcher hasNextPage={hasNextPage} fetchNextPage={fetchNextPage} />
    </ItemSection>
  );
}

export default PhotoList;

PhotocardItem.tsx

• 각 포토카드를 렌더링하는 컴포넌트에요.

import React, { useCallback } from 'react';
import { photoImage } from '@api/resource';
import IconButton from '@component/form/iconButton/IconButton';
import { Photo } from '@type/photo';
import { IconType } from '@type/icon';
import { StylesPhotocardItem, StylesPhotocardItemProps, PhotoName, PhotoImg } from './_styles';

interface Props extends Photo {
  icon?: IconType;
  handleClick?: () => void;
  styles?: StylesPhotocardItemProps;
  children?: React.ReactNode;
}

function PhotocardItem({
  photocardId,
  name,
  imageName,
  groupData,
  memberData,
  icon,
  handleClick = () => {},
  styles,
  children,
}: Props) {
  return (
    <StylesPhotocardItem {...styles}>
      <main className="main">
        <PhotoImg className="img" src={photoImage(imageName)} alt="이미지" />

        <PhotoName>
          <p className="name">{name}</p>
        </PhotoName>

        <section className="info-section">
          <section className="member-section">
            <span className="member-name">
              <b>{memberData.name}</b>
            </span>
            <span className="group-name">{groupData.name}</span>
          </section>

          <section className="icon-section">
            {icon && (
              <IconButton
                iconProps={{ icon: icon.svg, size: 'lg' }}
                tooltip={icon.tooltip}
                onClick={handleClick}
              />
            )}
          </section>
        </section>
      </main>

      {children && <footer className="footer">{children}</footer>}
    </StylesPhotocardItem>
  );
}

export default PhotocardItem;

아쉬운 점

굉장히 오랜만에 꺼내 본 코드인데, 개선 포인트가 많이 보이는 것 같아요 😅

• API 호출에 사용되는 Request, Response 타입을 Hook 레벨에 함께 존재하는 점이 아쉽다고 느꼈어요. 해당 타입은 fetchPhotos 함수를 호출하거나 반환한 값에 적용되는 내용일텐데, Hook에서 정의되고 있는 점이 어색해요.
  • 개선 방향: API 클라이언트나 API 패칭 함수와 같은 레이어에 작성할 것 같아요.
• 또한, useInfiniteQuery 의 옵션을 외부에서 주입할 수 있도록 옵셔널 인자를 열어 놓고 사용하고 있는데, 이 과정에서 작성하는 타입 관련 보일러 플레이트 코드가 신경 쓰여요.
  • 개선 방향: Hook 대신 queryOption 관련 API로 공통화 레이어를 구성할 것 같아요.
• 쿼리 파라미터 정보를 useSearcher 훅에서 리액트 상태로 관리하고 있는데, 이 때문에 컴포넌트 간의 상태 공유를 위해 props drilling이 많이 발생하고 있어요. 상태를 반드시 리액트 내부에서 처리해야 했을지가 의문이 들어요.
  • 개선 방향: 필터링 관련 로직을 Framework-Agnostic 한 방식으로 작성할 것 같아요. 당장 생각나는 것은 브라우저 자체적으로 사용할 수 있는 URLSearchParams 를 활용할 것 같아요.
• 네모난 카드 형태의 아이템인데, 꼭 도메인 맥락이 들어가야 했을 지가 고민이 되어요.
  • 개선 방향: 도메인 맥락을 덜어 낸 순수한 형태의 카드 컴포넌트를 표현하는 View와, 필터링 관련 내용 및 포토카드의 도메인 맥락을 주입하는 부분을 분리해볼 수 있지 않을까 싶어요. Jbee 님의 변경에 유연한 컴포넌트

[regularPark]

교수님 진도가 너무 빨라요

쿼리 파라미터 정보를 useSearcher 훅에서 리액트 상태로 관리하고 있는데, 이 때문에 컴포넌트 간의 상태 공유를 위해 props drilling이 많이 발생하고 있어요. 상태를 반드시 리액트 내부에서 처리해야 했을지가 의문이 들어요.

props의 개수나 성질을 봤을 때 저도 상태관리 라이브러리를 사용해서 관리하면 더 좋았을 것 같다는 생각이 들어요! 또 훅의 반환값을 hook이라는 이름으로 props로 주고받는 모습도 저는 왠지 모르게 어색하게 느껴지네요.

[Wisesaturn]

빠라바바밤 리뷰어 송재한입니다 😊
정말 방대한 양이라 몇 시간 동안 읽고 싶은 느낌.. 역시 교수님... 클라스가 다르시군요 😂
interface도 잘 짜시고, 구조도 읽기 쉽게 분리해둔 게 정말 야무집니다

교수님 논문이기에 고친다기 보단 저의 궁금한 점을 몇 개 적어보겠습니다!

props

• 함수 마다 고유한 빈 값을 많이 던져주고 있어요.
• {}, [], () => {} 등의 truthy한 값으로 우선 던져주는 이유가 있을까요?
  • undefined나 혹은 null값으로 내려오면 안 되는 로직일까유?

map 내부의 key

  {photos?.pages.map((page, i) => (
        <Fragment key={i}>
          {page.photos.map(p => (
            <PhotocardItem {...p} key={p.photocardId} icon={icon} handleClick={() => handleSelect(p.photocardId)} />
          ))}
        </Fragment>
      ))} 

• 이 부분에서 Fragment와 map에서 생성하는 index를 key값으로 사용하는 이유가 있을까요?
• key값이 달라지면 리액트에서는 리렌더링을 발생시킨다고 알고 있습니다! 그래서 map으로 컴포넌트를 생성했을 때, 같은 배열의 i값이 리렌더링 이후 중복이 된다면, 리렌더링이 되지 않는 가능성도 생겨서 pages의 고유한 id 값이 있다면 그 값을 사용하면 어떨까요?

&& 렌더링

{children && <footer className="footer">{children}</footer>}

• 항상 편하게 쓰지만 리스크가 있는 문법인 &&... children이 falsy한 값이 내려온다면 (0이나 false) footer가 그려지지 않는데 이 부분은 예외사항에 안 들어가는 부분일까용? (아마 children이라 안 들어갈 것 같지만 혹시나!)

---

무엇보다 useReducer 야무지게 쓰시는 교수님 논문을 읽고, 오늘도 제 코드 고치러 갑니다... ㅋㅋㅋㅋㅋ

[qhahd78]

찢었다...

역시 교수님 Discussions 를 찢어놓으셨군요? 저도 리뷰보다는 한 수 배워가는 느낌으로 궁금한 점을 코멘트 달겠습니다.

1. makeRefindFilter 에서 useCallback 을 사용하신 이유

• 저는 useCallback 을 많이 사용하지 않는 편이라서 사용하신 이유가 궁금합니다 !
  • 고냥 보기에는.... 의존생 배열에 있는 filter 랑 keyword 바뀔 때마다 함수 실행시키기 위함..? 으로 생각했는데 뭔가 뜻깊은 이유가 있을 것 같네요..

2. useReducer 가 무엇인가여?? !!!

• 사용하는 예와 저 코드에서는 왜 사용하셨는지가 궁금합니다..
• 사실 저런 훅이 있다는것만 알지 실사용한 코드는 많이 못 봐서 궁금합니다

교수님께 오늘도 한 수 배워갑니다......

[h1un]

저도 useInfiniteQuery를 사용해서 무한스크롤을 구현해보았는데
확실히 상훈님 코드가 제 코드와 다르네요 참고해야할게 많은것 같습니다.

상훈님이 질문하신거에 제가 답을 드릴수 있는건 없는것같고 😭

제가 구현했을때 react-intersection-observer라이브러리를 함께 사용했는데 이런 라이브러리가 있다는걸.. 추천해줄수 있다 정도밖에 못하겠네요 ..ㅎㅎ

react-intersection-observer를 사용하면 요소의 가시성을 감지하여 데이터를 페칭하는 기능을 만들수 있는데
두개 같이 사용하면 요소의 가시성을 감지하여 react-query를 통해 데이터를 자동으로 페칭 할수 있어 좀 더 유연한 스크롤을 구현할 수 있다고 합니다.

저도 도움받았던 링크 남기고 갑니당 https://oliveyoung.tech/blog/2023-10-04/useInfiniteQuery-scroll/