[React.js] React-Table getGroupedRowModel() 오류

const React-Table getGroupedRowModel() 오류 = ( Param ) => {

💻 return Result;

// useReactTable Hook 선언
const table = useReactTable({
    ...
    getGroupedRowModel: getGroupedRowModel(),

    // getGroupedRowModel가 마지막으로 setPagination을 호출하기 때문에 콘솔창에 오류가 발생함
    // 따라서 아래와 같이 setPagination을 호출하지 않도록 하면 오류가 사라짐
    onPaginationChange: () => undefined,
    ...
});

 

출처: https://github.com/TanStack/table/issues/5026#issuecomment-1704318269

Can't perform a React state update on a component that hasn't mounted yet · Issue #5026 · TanStack/table

 

📝 console.log( history )

React Table getGroupedRowModel() 사용시 오류

 최근 혼자 토이 프로젝트를 진행하면서 테이블 기능이 필요했다. 컴포넌트 라이브러리는 React를 시작할 때부터 꾸준히 써왔기 때문에 후보에서 제외했다. 사이드 프로젝트 진행하면서 Headless 라이브러리에 대한 정보를 들어 이번 토이 프로젝트를 진행하면서 써보기로 했다.

 

 생각보다 많은 Headless 라이브러리들이 존재했고 그중에서 React-Query로 익숙한 TanStack의 React-Table을 사용하기로 했다. Headless 기능을 처음 써보다 보니 많이 헤매긴 했지만 공식 문서의 힘을 빌려 필요한 기능까지 구현했다.

 

 테이블에서 Type을 기준으로 Grouping을 하여 표현하고 싶어 getGroupedRowModel()를 통해서 그룹 데이터를 받아와 테이블을 구성했는데 콘솔창에 오류가 발생했다. 단순히 React-Table의 함수를 받아 제공한 것 밖에 없어서 당황스러운 오류였다.

 

 작성한 코드 중에는 문제가 없다고 판단했고 구글에 열심히 검색한 결과 나와 같은 오류를 겪은 개발자가 Issue를 올렸고 해당 Issue 게시글 답변에 해결방안이 있었다.

 

 getGroupedRowModel 함수가 setPagination을 마지막으로 호출하여 발생하는 것이었다. Paging 기능은 사용하지 않은데 발생하는 것에 의아하지만 함수가 setPagination을 호출하기 때문에 onPaginationChange 이벤트 함수를 지정하여 해결이 가능했다.

/ /  Improvements

해당 Issue 게시글을 보았을 때 getGroupedRowModel 뿐만 아니라 getFacetedUniqueValues와 같은 다른 함수에서도 발생한다.

 

빌드하여  테스트했을 때 해당 오류는 발생하지 않는다. dev 모드일 때 React Strict Mode에 의해서 발생하는 오류로 보인다.

}