React Starter Kit

핵심 기여

개요

맡은 범위

실제 서비스를 시작할 때 자주 필요한 화면 흐름을 샘플로 확장했습니다. 저장소에 있던 API와 공통 컴포넌트의 모든 최초 설계를 본인 역할로 옮기지 않고 직접 변경한 예제와 복원 코드에 집중했습니다.

문제와 해결

라이브러리 설치 목록에서 따라 볼 수 있는 화면 흐름으로 확장하기

문제. 라우터와 API 라이브러리를 설치한 틀만으로는 조회 조건, 응답 가공과 화면 상호작용을 어디에서 연결하는지 알기 어렵습니다.

판단. 이미지 검색과 가상 그리드, 상세 이동을 한 예제로 연결했습니다. 샘플에서 각 단계의 책임을 실제 코드로 볼 수 있게 했습니다.

flowchart LR
    Query["URL 조회 조건"] --> API["이미지 API"]
    API --> Convert["화면 데이터 변환"]
    Convert --> Grid["가상 그리드"]
    Grid --> Detail["이미지 상세"]
    Detail --> Grid

구현. 조회 조건을 API에 전달하고 converter가 만든 데이터를 그리드에 넘겼습니다. 이미지를 누르면 상세 주소로 이동하고 이미지가 로드되면 셀을 다시 측정하도록 연결했습니다.

결과. API 사용법과 목록, 상세 화면의 연결을 함께 읽을 수 있는 샘플을 추가했습니다. 외부 이미지 API의 사용량 제한 안내도 예제에 남겼습니다.

스크롤 위치와 행 높이를 함께 저장하기

문제. 이미지의 높이가 늦게 결정되는 가상 목록은 같은 scrollTop을 적용해도 측정 정보가 달라지면 다른 위치를 보여 줄 수 있습니다.

판단. 위치만 저장하지 않고 측정한 행 높이도 함께 보관했습니다. 목록으로 돌아올 때 측정 캐시와 위치가 같은 탐색 맥락을 사용하도록 연결했습니다.

const {
  cellCache, scrollTop, virtualListHandler, getRowsHeight, getScrollTop
} = useVirtualListPropsGetter({
  scrollTop: cache.data?.scrollTop,
  rowsHeight: cache.data?.rowsHeight,
  callback: {
    unMount: () => cache.save({
      scrollTop: getScrollTop(),
      rowsHeight: getRowsHeight(),
    }),
    loadMoreRows: () => fetchNextPage(),
  },
});

구현. 이미지의 onLoad에서 measure를 호출하고 목록을 떠날 때 위치와 높이 맵을 저장했습니다. 저장된 높이는 가상 목록의 측정 캐시에 채우도록 했습니다.

결과. 스크롤 복원에 위치와 콘텐츠의 측정 정보가 함께 필요하다는 점을 예제로 남겼습니다. 당시 코드에는 라이브러리 내부 캐시 필드와 interval을 사용하는 부분도 있어, 모든 비동기 목록의 복원을 보장하는 방법으로 일반화하지 않았습니다.

공통 기반과 샘플의 역할을 나누기

문제. 시작 도구는 여러 프로젝트가 참고하지만 샘플의 데이터와 동작이 공통 코드의 규칙이 되면 재사용 범위가 불분명해집니다.

판단. 페이지는 조회와 이벤트를 연결하고 가상 목록, 입력과 버튼 같은 공통 UI는 전달받은 값과 callback을 사용하도록 구분했습니다.

구현. 그리드는 rows와 측정 cache, 스크롤과 추가 조회 callback을 받았습니다. 샘플 페이지가 상세 주소와 이미지 데이터의 의미를 알고 이동을 결정했습니다.

결과. 공통 UI의 계약과 샘플의 업무 흐름을 구분해 읽을 수 있도록 보강했습니다. 실제 적용 프로젝트 수나 개발 시간 단축률은 근거가 없어 추가하지 않았습니다.

결과와 관련 글

신규 프로젝트에서 참고할 수 있는 실행 예제와 예외 흐름을 보강한 경험입니다. 복원 조건을 더 자세히 다룬 내용은 가상 스크롤 복원 글로 이어집니다.