본문 바로가기

React3

탭 컴포넌트 그리고 useTab 훅을 만들어보다 프로젝트의 요구사항에 따르면 브라우저 탭과 유사하게 동작하는 탭 컴포넌트가 필요했다. 요구되었던 내용 상단 nav 영역에서 메뉴를 선택 시 신규 탭으로 열려야 한다 탭은 최대 10 ~ 12개로 제한되어야 한다 -> 추가로 열려야 하는 경우 알림을 띄울 필요는 없다 탭 영역의 홈 아이콘은 하나의 탭으로써, 메인 화면을 보여주는 형태여야 한다 동일한 메뉴를 선택하더라도 서로 다른 탭으로 동작해야 한다 탭의 이동 시 탭에서 작성 중이던 form의 내용은 유지되어야 한다 최종 산출물 기준으로 새로고침과 뒤로가기 등의 액션은 일어나지 않는 것을 전제로 한다 기본적으로 요구되었던 내용은 위와 같았고 논의를 거듭하며 상세 동작을 정하기로 했다. 결과적으로 정해진 내용 기존에 사용하던 react-router-dom의 .. 2023. 9. 20.
리액트-쿼리 / TanStack Query(@tanstack/react-query) - 2 5. Mutations - Mutations는 무엇일까? Mutation은 개발자가 서버에서 데이터를 생성하거나 수정하거나 삭제하는 등의 데이터 변경/수정 작업을 처리할 수 있도록 해주는 React-Query의 핵심 개념이다. 리액트 애플리케이션에서 위의 작업들에 해당하는 Side-effect를 수행하고 로컬 캐시를 업데이트하여 클라이언트 측의 데이터가 서버와 동기화 상태를 유지하도록 하는 데 사용된다. Mutation을 이해하기에 앞서 Mutation은 Query와 어떻게 다른 지 알아보면 다음과 같다. - 데이터 연산: Query는 데이터를 가져오고 읽는 데 중점을 두고 있으나 Mutation은 생성, 업데이트, 삭제와 같은 작업을 통해 데이터를 수정하는 역할을 담당한다. - Idempotence(멱.. 2023. 3. 16.
리액트-쿼리 / TanStack Query(@tanstack/react-query) - 1 https://tanstack.com/query/v4 TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com 1. React-Query란? 리액트 쿼리는 리액트 애플리케이션의 데이터 fetching(이하 불러오기), 캐싱, 업데이트 및 동기화를 간소화하는 라이브러리이다. 리액트 쿼리의 직관적이며 유연한 API를 통해 pagination, 실시간 업데이트, 최적화 업데이트 등과 같이 복잡한 로직을 직접 작성.. 2023. 3. 14.

티스토리툴바