# TanStack

ljo094822

드래그로 테이블 넓이를 조절 하기 위해 라이브러리를 선택하게 되었다. next js 를 사용하기 때문에 chatgpt 에게 추천을 받았는데 가장 추천했던게 tankstackreact-table이라서 선택하고 사용하게 되었다. 공식 홈페이지가 나와 있긴 하지만 영어보다는 한국말이 편해서 벨로그 등을 찾아보려고 했지만 벨로그 정리된 파일들이 없어서 공식 문서를 보고 코드를 보면서 이해하기 위해 노력했다. 일단 원하는 기능이 드래그로 넓이 조절 이었기 때문에 column-sizeing 부분에 들어가서 code pen 으로 어떻게 구동 되는지 확인해보았다. next js에 그대로 적용하기 위해서 코드를 바로 옮겨 적었다. 처음에는 쭉 훑어보며 필요한 부분만 사용하려고 했는데 테이블은 완성이 되었는데 리사이징이 안되는 것이었다. 그래서 코드펜이 있는 코드를 다 붙여서 확인해봤다. 내가 못한 것인지 코드 문제인지 파악하기 위해서 진행한 결과 마찬가지로

typingok09

React-Query React-Query는 기존 Zustand나 Recoil 혹은 Redux와 같은 상태 관리 라이브러리에서 어려운 점들을 해소할 수 있도록 도와주는 라이브러리다. 기존의 상태 관리 라이브러리들은 충분히 훌륭하지만 서버측 상태관리를 하기엔 그다지 적합하지 않은 부분들이 있기 때문에 React-Query를 사용하게 된다. 예를 들어서 서버의 데이터를 변조한다던가 새로 데이터를 가져와야 할때 등 그런 상태들을 관리하게 해야 한다면 기존의 상태 관리 라이브러리들은 불편한 점들이 존재한다. 따라서 클라이언트측 상태 관리보다 데이터베이스에 저장되어 있는 데이터와 같은 서버 상태를 관리해야한다면 React-Query를 사용하는게 좋다. Tanstack에서 주장하는 React-Query의 장점 캐싱 (Tanstack의 말로는 프로그래밍에서 아마 가장 어려운 일이라고 한다.) 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거 백그라운드에서

sumnii

문제 상황 @tanstack query v4 리액트 코드 예시 현재 횟수와 목표 횟수, 그리고 달성도를 서버에서 불러온 데이터를 연산해서 사용을 해야 하는 상황이다. 서버에서 받아온 arrayQuery의 데이터를 그대로 사용할 수 없고, 이 결과로 얻은 array를 map()이나 filter() 혹은 length를 이용하여 원하는 값을 얻어야 한다. 하지만 이 상태에서는 결과가 현재:0 목표:0 달성도:0, 즉 초기 할당값 0-0-0만 나오는 상태 해결 과정(학습 내용) What? (뭐야?) 앞에 isLoading, isError 거쳤으니까 그 다음 return은 쿼리 성공 시 아니야? 왜 초깃값인 0-0-0만 나오는 걸까? onSuccess에서 쿼리 데이터 조작 후 total을 로그에 찍어봐도 정상 결과(0이 아닌 계산된 값)인데, 렌더링은 0-0-0만 나오잖아! Why Not? (왜 안되냐면) 일반적

yena1025

🍮 참고 링크 - 강동희 님 글 개요 React를 사용하면서 마주치는 이슈 중 하나는 state(상태) 관리이다. 원래 React에서 상태 관리를 하려면 Redux를 활용하며 서버 데이터를 활용할 때는 반드시 Redux-saga, Redux-Thunk, RTK-Query 같은 또 다른 미들웨어를 사용해야 했다. 1. 캐싱(Caching) react-query의 장점 중 하나는 데이터를 캐싱한다는 것이다. 캐싱된 데이터로 API 콜을 줄여주며, 이는 서버에 대한 부하 감소로 이어진다. 기본적으로 데이터를 fetching 해오면 react-query는 캐싱한다. 해당 데이터가 stale이라고 판단되면 refetching 해온다. stale한 상태란 것은 쉽게 말해서 유통기한이 지난 것이다. 캐싱은 유용하

kemezz

컬럼 필터 (Column Filter) <iframe src="https://codesandbox.io/embed/react-table-example-filtering-zhetr8?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="react-table-example-filtering" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presenta

kemezz

정렬 (Sorting) <iframe src="https://codesandbox.io/embed/react-table-example-sorting-8hsjq7?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="react-table-example-sorting" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-sa

kemezz

!codesandbox[gallant-orla-6l7htp?fontsize=14&hidenavigation=1&theme=dark] 개요 Headless UI란? TanStack Table(이하 react-table)은 스스로를 Headless UI 라이브러리라고 소개합니다. Headless UI란, UI 엘리먼트와의 상호작용을 위한 로직, 상태, 처리 API 만을 제공하며, 그 이외에 어떠한 마크업이나 스타일, 선탑재 기능 등을 제공하지 않는 라이브러리를 의미합니다. material-ui나 bootstrap 같은 컴포넌트 기반의 라이브러리와 상반되는 개념이라고 봐도 될 것 같네요. [TanStack Table v8 Documents | What is "headless" UI?](https://tanstack.com/table/v8/docs/guide/introduction#what-is-headles