react-virtuoso

 

개발을 하면서 기존 pagination으로 관리되던 리스트 목록을 페이지 넘기지 않고 한 스크롤에서 보기 편하게 됐으면 좋겠다는 요청이 들어왔다.

리스트 목록이 적으면 상관이 없으나, 몇백 개의 리스트를 한 스크롤에 한 번에 불러오면 렌더링 시의 속도 면이나 자원 면에서도 좋지 않다고 판단됐다. 그래서 무한 스크롤로 구현하되, 현재 보고 있는 페이지만 점차 렌더링되도록 하기로 했다.

 

chatGPT에 물어본 결과 현재 사용중인 react 에서는 react-virtualized와 react-window를 많이 사용하고 있는 듯 했다.

그 중 react-window가 용량이 작아 비교적 간단한 구현에서는 유리하다고 생각되어 사용하려고 했다. 하지만 고정 높이를 사용해야 하는 단점이 있었다. 높이의 경우 유동적인 부분이 있어 동적으로 구현이 되야 했다. 그래서 다른 절충할 수 있는 방안이 없을까 찾던 도중 react-virtuoso를 발견했다.

 

react-window보다 용량은 크지만 react-virtualized보다 용량은 절반 정도로 작으면서, 최근 1달 전에도 업데이트가 올라와 비교적 관리가 되고 있다고 느꼈고, 기본적인 기능은 있는 것 같아 쓰게 됐다.

 

table fixed

const [users, setUsers] = useState([]);

 

return (

    <TableVirtuoso

      style={{ width: "100%", height: "calc(100vh - 104px)" }}

      data={users}

      fixedHeaderContent={() => <TableHead />}

      endReached={() => loadMore(prevPage)}

      itemContent={(idx, item) => {

        return (

          <TableContent

            item={item}

          />

        );

      }}

      components={{

        Footer,

      }}

    />

  );

 

const Footer = () => {

  return (

    <div

      style={{

        padding: "2rem",

        display: "flex",

        justifyContent: "center",

      }}

    >

      Loading...

    </div>

  );

};

 

const TableHead = () => {

  return (

    <>

      <tr className="bg-table text-[#000] uppercase leading-normal">

        <th className="py-3 px-3 text-center font-normal ">

          head

        </th>

      </tr>

    </>

  );

};

 

const TableContent = ({ item }) => {

  return (

    <>

      {item ? (

        <Fragment>

          <td className="py-3 px-3 text-center">

            <div className="min-w-max">{item.item1}</div>

          </td>

          <td className="py-3 px-3 text-center border-x border-gray-300 whitespace-nowrap">

            {item.item2}

          </td>

       </Fragment>

      )}

    </>

  );

};

 

data에 array로 리스트를 넣어주고, fixedHeaderContent 에 table head를, itemContent에 table body를 넣어주면 된다.

이 때 itemContent 내부에서 map을 실행해줄 필요 없이 data 값을 바탕으로 내부에서 그려줌. 고로 itemContent에는 tr 내부 내용부터 입력하면 된다.

Footer 는 스크롤 맨 아랫부분을 그려주면 됨.

endReached 에는 스크롤이 맨 아랫부분 도달할 때마다 실행되는 함수를 넣어주면 된다.

주의점은 column 갯수가 많을 때는 스크롤을 내려야 발생되므로 상관이 없지만, column 갯수가 적을 경우

스크롤을 내리지 않아도 맨 아랫부분에 도달하는 것이므로 한번에 두번 세번 호출되서 그부분에 대한 처리를 따로 해줘야 한다.

 

테이블은 어찌저찌 그렸는데 row 중에 버튼이 하나 있고, 해당 버튼을 누르면 해당 row 바로 다음에 tr이 생성되면서 아코디언이 펼쳐지는 기능이 있었다.

그런데 TableVirtuoso 내부에서 TableContent 로 tr을 자동으로 그리기 때문에 동적으로 tr 을 추가해주기가 쉽지 않았다.

 

❌❌아래는 실패코드❌❌

  const handleSiblings = (branchId) => {

    const parents = siblingRef.current.parentElement;

    const newSibling = document.createElement("tr");

    newSibling.innerHTML = `<td colSpan={100}>내용</td>`;

    parents.insertBefore(newSibling, siblingRef.current.nextSibling);

  };

 

그래서 react랑은 별로 맞지 않지만 DOM을 조작해서 아코디언 tr을 끼워넣을 생각도 했는데,

그럴 필요 없이 방법을 찾았다.

return (

    <TableVirtuoso

      data={users}

      fixedHeaderContent={() => <TableHead />}

      endReached={() => loadMore(prevPage)}

      components={{

        Footer,

        TableRow: (props) => {

          return (

            <>

              <tr {...props}>

                <TableContent

                  item={props.item}

                  accStates={accStates}

                />

              </tr>

              {accStates.idx === props &&

                accStates.idx !== null && (

                  <tr>

                    <td colSpan={100}>

                      아코디언

                    </td>

                  </tr>

                )}

            </>

          );

        },

      }}

    />

  );

 

itemContent 이 아닌 components 에 TableRow 로 테이블을 그리는 것.

이렇게 하면 tr에 props 를 넘겨서 itemContent 로 그리는 것처럼 똑같이 그리면서 tr를 원하는 때에 추가해줄 수 있다.

 

react-virtuoso 사용하면서 만족은 했지만 사용자가 많지 않은지 검색해도 정보가 많지 않아서 공식 페이지를 많이 봤던 것 같다.

 

https://virtuoso.dev/

Getting Started with React Virtuoso | React Virtuoso

 

reference

https://velog.io/@hannah3406/react-window-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-1

https://hini7.tistory.com/260