본문 바로가기

상태관리6

[NextJS] SWR - 프로젝트에 네트워크 상태관리 적용해보기 개요 요즘 콘서트 일정 플랫폼 서비스를 NextJS로 개발하면서 SWR을 적용해보고있다. NextJS랑 SWR 모두 Versel에서 개발을 하였고, 호환성이 좋다고 들어서 네트워크 상태관리를 리액트쿼리가 아닌 SWR을 적용해서 개발을 진행하고 있지만 실제로 SWR이 어떤값을 반환하고 어떤식으로 동작하는지는 잘 모른채로 개발하고 있었다. 오늘은 SWR이 무엇이고 어떻게 사용하는지 구체적인 사용법을 알아보자. Optimistic UI란? Optimistic UI란 특정 요청이 성공 할 것이란 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다. 이번에 진행하고 있는 프로젝트에서 예를 들어보자. 예시 - 북마크 1. 사용자가 북마크 아이콘(빈하트)을 누른다. 2. 서버에 북마크 등록 요청을 보낸다. .. front/NextJS 2023. 7. 4.
[React] React-Query 사용법 예제코드 리액트 쿼리 리액트 쿼리는 비동기 네트워크 상태관리 라이브러리이다. 리액트 쿼리는 React 컴포넌트에서 데이터를 가져오고 관리하기 위한 간단하고 직관적인 방법을 제공한다. 이를 통해 컴포넌트가 더욱 유연하고 재사용 가능하며, 다양한 데이터 소스에서 데이터를 쉽게 가져올 수 있다. 리액트 쿼리는 대표적으로 useQuery와 useMutation과 같은 React Hooks를 사용하여 작성된다. 이를 통해 데이터 로딩과 변경을 처리할 수 있다. useQuery는 GraphQL, 또는 REST API와 같은 데이터 소스에서 데이터를 가져오는데 사용되며 useMutation은 데이터를 업데이트하거나 삭제하는 데 사용된다. 리액트 쿼리는 캐싱을 사용하여 데이터를 저장하고, 새로운 데이터를 로드하기 전에 캐시에서.. front/React 2023. 4. 27.
[React] 전역 상태관리 라이브러리 장단점 비교 정리 React로 개발을 진행하다보면 Component의 상태관리를 하게된다. 그런데 해당과정에서 컴포넌트의 Depth가 깊어질수록 반복적인 코드작성이 많아지고 그 횟수가 1000번이라고 생각하면 시간도 어마어마하게 걸릴것이다. 이와 같은 경우 전역적으로 상태를 관리해주는 라이브러리를 사용해서 해결할 수 있으며 종류마다 장단점이 있다. Redux 상태관리를 위해 사용하는 자바스크립트 라이브러리이다. 리액트에서만 사용할 수 있는 라이브러리가 아닌 독립적으로 분류되어있는 라이브러리이기 때문에 리액트 뿐 아닌 Vue나 앵귤러 등에서도 사용이 가능하다. Redux는 가장 많이 사용되는 전역 상태 관리 라이브러리 중 하나이며, 컴포넌트 간의 상태를 트리 구조로 관리하며, 액션(Action)과 리듀서(Reducer)를 .. front/React 2023. 4. 26.
[React] useEffect란 무엇이고 언제 사용해야 할까? useEffect란? useEffect는 간단하게 설명해서 React Component에서 Side Effect를 수행하는 Hook입니다. Side Effect란 상태 변화 이외에 작업을 말합니다. 예를 들면, API 호출, 이벤트 등록, 타이머 설정 등이 있습니다. useEffect 사용법 useEffect는 컴포넌트가 렌더링 된 이후에 실행되며, 컴포넌트가 Unmount 될 때 정리(claen-up)작업을 수행합니다. useEffect는 기본적으로 렌더링 이후에 매번 실행되며, 두 번째 인자로 의존성 배열(Defendency Array)을 전달하여 해당 의존성이 변경될 때만 실행되도록 설정할 수 있습니다. import React, { useEffect, useState } from 'react'; f.. front/React 2023. 4. 17.
[React] Context-API로 전역 상태관리하기 Context API란? 리액트에서는 컴포넌트 간 데이터를 전달할 때, props를 사용합니다. 하지만 데이터가 깊은 구조로 중첩되어 있거나 여러 컴포넌트를 거쳐야 할 경우, 상위 컴포넌트에서 하위 컴포넌트로 매번 props를 전달해주는 것은 비효율적입니다. 이를 해결하기 위해 리액트에서는 Context API를 제공합니다. Context API를 사용하면 전역적으로 데이터를 관리할 수 있으며, 컴포넌트 간의 데이터 전달을 간편하게 할 수 있습니다. 사용 예제 다음은 todo-app에서 Todo CRUD 네트워크 통신하는 코드를 class로 묶어서 분리하고 해당 클래스의 메서드를 전역적으로 사용하기 위한 코드입니다. 다음과 같은 Todo 클래스의 메서드를 전역적으로 사용하기 위해 Context API를 .. 카테고리 없음 2023. 4. 10.
반응형

티스토리툴바