기존 프로젝트에서는 무한스크롤을 구현하면서 특정 타깃이 감지되면 query param에 page값을 증가시켜서 api 요청하고, issue list를 상태로 관리하여 새로 패칭되는 issue list를 상태에 계속 붙여주었다. 이번에는 react-query의 useInfiniteQuery 함수를 사용하여 구현해보자. react-query 공식문서 - useInfiniteQuery useInfiniteQuery | TanStack Query Docs const { fetchNextPage, tanstack.com useInfiniteQuery ...result와 ...options 부분의 값은 useQuery 와 같다. react-query 공식문서 - useQuery useQuery | TanStack ..

진행했던 프로젝트 중에 github api를 사용하요 이슈 목록을 가져오는 프로젝트가 있었다. 프로젝트의 목적은 api를 사용하여 이슈 목록을 가져오고 무한스크롤을 직접 만드는 프로젝트였다. 이 프로젝트의 목적을 좀 더 분명히 하기 위해서 리팩토링을 해보자. facebook/react 리포지토리의 이슈만 가져오는 프로젝트였는데, 직접 검색한 리포지토리의 이슈를 가져오는 기능을 만들어보자. 검색바 만들기 내가 원하는 검색바의 기능은 다음과 같다. 리포지토리를 검색할 수 있는 검색바 검색바가 포커싱 되었을 때, 확인할 수 있는 검색 결과 영역 검색어 입력중일 때, 검색중 표시 검색 버튼을 누르지 않아도, 검색 결과를 확인할 수 있음 검색 결과에 원하는 리포지토리를 누르거나, 검색 결과 영역 밖을 눌렀을 때,..

useQuery export function useQuery TQueryFnData TQueryFnData는 useQuery로 실행하는 query function의 반환값을 정하는 제네릭 타입이다. TError TError는 query function의 error 형식을 정하는 제네릭 타입이다. TData TData는 data에 담기는 실질적 type을 뜻한다. useQuery의 select option으로 query function의 데이터를 2차 가공하는 경우에만 사용하는 type이다. 데이터 속성이 query fu..

useMutation query와 달리 mutation은 일반적으로 데이터를 CREATE/UPDATE/DELETE 하거나 서버 부작용을 수행하는데 사용된다. 서버 데이터를 가져오는 것은 reactive하게 동작하는 useQuery를 사용하면 되지만, 서버 데이터를 업데이트하고 생성하고 삭제하는 것은 적절하지 않다. useQuery처럼 onSuccess, onError, onSettled 콜백을 전달할 수 있으며 mutate를 호출했을 때 실행할 onMutate 콜백도 사용할 수 있다. useQuery와 마찬가지로 많은 옵션을 제공하지만 너무 많다. 자세한 내용은 공식문서를 참조하자 const { data, isLoading, mutate, mutateAsync } = useMutation(mutation..

React Query란? React Query는 데이터 Fetching, 캐싱, 동기화 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리 이다. Redux, Recoil, Mobx 등의 상태관리 라이브러리들로도 충분히 가능하지만, 클라이언트 쪽의 데이터들을 관리하는데에 있어서 적합할 수는 있어도 서버 쪽의 데이터들을 관리하기에는 여러가지 처리등이 필요한 점들이 있어서 등장하게 되었다. 예를 들어서, 같은 페이지를 바라보고 있는 관리자가 있을 때, 한 관리자가 유저의 데이터를 변경하면, 다른 관리자도 그 유저의 변경된 데이터를 확인할 수 있어야 한다. 설치 최근 v4로 업그레이드 되면서 yarn add react-query or npm i react-query 이었던 설치 command가..

MUI의 모든 컴포넌트들은 기본적으로 style이 지정되어있다. 스타일을 변경하기 위해서 여러가지 방법이 존재한다. class명을 지정해서 css파일을 통한 지정 // test.css .test { backgroundColor:'white'; } // test.jsx const Test = () => { return hi } 컴포넌트 인라인 스타일 조정 // MUI 컴포넌트들에도 inline style을 먹일 수 있다. // ex) // sx와 style의 차이는 이전 글에 https://wonillism.tistory.com/287 [MUI] VS / sx VS style vs mui에 대해 자료를 조사하다보면 성능에 대한 이슈를 종종 찾아볼 수 있다. 그래서 과거의 글들을 찾아보면 Box보다는 div..

vs mui에 대해 자료를 조사하다보면 성능에 대한 이슈를 종종 찾아볼 수 있다. 그래서 과거의 글들을 찾아보면 Box보다는 div를 써라는 말도 자주 찾아볼 수 있다. mui - React Box - Material UI The Box component serves as a wrapper component for most of the CSS utility needs. mui.com The Box component serves as a wrapper component for most of the CSS utility needs. “Box 컴포넌트는 css 유틸을 필요로 하는 wrapper 컴포넌트 역할을 한다”고 되어 있다. 기본적으로 컴포넌트를 감싸는 wrapper 역할로써 사용된다. 설정을 통해 다른..

React를 좀 더 자세히 알아보고자한다. 앞선 포스팅에서 React의 기본에 대해서 꽤나 많이 다루었지만, 뭐랄까... 개발하면 할수록 뭔가 비어있다는 느낌이 강하게 든다. 프로젝트를하면서 알게 된것들, 배웠던것들 글로 남겨야지 하면서 바쁘다는 핑계로 간략하게 회사 회고록에 남기거나 나중에 자세하게 해야지 하면서 미뤄뒀었다. 그리고 최근 프로젝트중에 Next.js를 쓸 기회가 생겨서 더욱 React에서 뭔가가 비어있다가 느껴졌다. DOM React보다 더 이전의 Javascript의 개념부터 시작해야한다. 이 글에서는 자세히 다루지 않겠다. DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고, 각각의 요소에 ..