에러 발생
react-table을 사용하던 중 TypeError가 발생했다.
처음엔 옵셔널 체이닝(프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근)을 시도해봤는데 그래도 동일한 에러가 발생했다.
그래서 뭔가 배열로 들어오지 않아서 length가 없다고 하는건가 싶어서 컬럼을 살펴보았는데 배열로 return 하고 있었다.
그럼 이제 data를 주는 클라이언트 측 코드를 살펴보았다. data를 잘 전달해주고 있는데 usememo(기존에 매 렌더링마다 실행되었던 복잡한 계산을 방지)를 사용해 한번 더 캐싱을 해줘야되나 싶어서 적용해주었다.
하지만 그래서 동일한 에러가 발생해서 data 값이 잘 나오고 있는지 console.log에 작성했고, 역시나 제일 큰 문제는 data가 undefined 때문에 발생한 문제였다..!
그래서 data가 undefined면 loading처리를 해주었더니 정상적으로 동작했다!
if (tableData === undefined) {
return <div>Loading ... </div>;
}
콘솔과 에러 메세지를 잘 확인하자..!