Hook

React Query(Tanstack Query) React Query란? React 애플리케이션에서 서버 상태를 가져오고 캐싱하며 동기화하고 업데이트하는 작업을 도와주는 라이브러리이다. 내가 React Query를 선택한 이유 Client 데이터와 Server 데이터 간의 분리가 된다. api 요청에 대한 로딩, 에러, 데이터(response) 관리가 쉽다. 네트워크 요청 관련 다양한 기능, 옵션들이 있다. (refetchOnWindowFocus, 브라우저에 포커스가 들어온 경우) 장점 중 하나로 캐싱도 있지만 나는 변경되는 데이터를 바로 받아야 했기 때문에 캐싱은 사용하지 않았다. 지저분한걸?! 그렇게 유용하게 잘 사용했으나.. 컴포넌트, 페이지 안에 api 관련 로직들이 같이 있다 보니 코드가 길어..

useStateconst [state, setState] = useState(initialState)useState는 배열을 반환하고 비구조화 할당을 통해 state, setState를 추출하여 사용한다. 그렇다면 useState는 어디서 오는 것일까? 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 호출된다. 그렇다면 어떻게 함수가 다시 호출되었을 때 이전의 상태값을 가져올 수 있는 것인가?바로! useState는 closure로 구현되어 있기 때문에 이전의 상태값을 유지할 수 있다!그렇다면 closure란 무엇인가? 이에 대해 먼저 확인해 보자! closure란?mdn에 따르면 함수와 그 주변 상태(lexical environment, 함수가 정의될 때 주변의 스코프와 변수에 대한 정보를 포함하..

입점사 프로젝트를 진행하며 페이지네이션과 함께 많이 쓰인 것은 필터일 것이다! 각 페이지에서 데이터를 조회하기 위해 필터와 페이지네이션이 사용되었다. 각각의 페이지마다 필터 컴포넌트로 만들면서 그에 대한 로직이 반복되어 이를 개선하고 뒤로가기 또는 새로고침 시 필터값을 유지하는 방법을 알아보겠다! 필터 컴포넌트와 필터 관련 hook 구현하기 필터 컴포넌트 초기 필터값들과 검색, 초기화 시 동작되는 함수를 전달 받는다. 사용자가 입력한 필터값을 내부적으로 관리한다. src/components/filter/deliveryTemplateFilter.tsx interface DeliveryTemplateFilterProps { initialFilterValues: FormState onSubmit: (filte..