본문 바로가기

React4

Optimistic Updates 2024. 5. 24.
stretch alignItems: stretch 를 써서 모든 자식 컴포넌트들이 동일한 높이를 갖게함. mui helperText 쓸 때, 요소 2개가 한 줄에 있게 배치했을 때 2024. 2. 26.
Recoil이란? Recoil이란 무엇일까? Recoil을 사용하기 위해서는 몇 가지 중요한 개념을 알아야합니다. 1) Atoms 2) Selectors 3) Hooks 먼저 이 세 가지 개념에 대해 간단히 알아봅시다! Atoms Recoil의 기본 단위로, 상태의 일부를 나타냅니다. 각 Atoms는 고유한 키를 가지며, 어떤 컴포넌트에서든 사용할 수 있는 전역 상태를 관리합니다. Selectors Selectors는 파생된 상태(derived state)를 나타냅니다. 기본 상태(Atom)를 입력으로 받아, 이를 변환시켜 새로운 값을 생성합니다. Hooks Recoil은 React의 hook API를 사용하여 상태를 컴포넌트에 연결합니다. `useRecoilState`, `useRecoilValue`등의 훅을 통해 At.. 2023. 12. 4.
React Query란? React Query는 React 애플리케이션에서 서버 상태 관리를 돕는 라이브러리입니다. 서버 상태 관리: 서버로부터 받은 데이터를 효율적으로 관리하는 것 🔍 React Query가 제공하는 기능을 살펴봅시다. 1. 데이터 가져오기 (Fetching Data): 서버에서 데이터를 가져오고, 그 데이터를 React 컴포넌트에서 사용할 수 있도록 해줍니다. 2. 캐싱 (Caching): 한 번 서버로부터 받아온 데이터를 임시 저장소에 저장해두고, 같은 요청이 다시 발생했을 때 재사용합니다. 이를 통해 불필요한 서버 요청을 줄이고, 애플리케이션의 성능을 향상시킵니다. 3. 자동 업데이트와 재요청 (Automatic Updates and Refetching): 데이터가 변경되었을 때 자동으로 새로고침하거나, .. 2023. 12. 4.