프론트엔드 개발/상태관리 라이브러리

redux persist : 새로 고침 시에도 상태 유지

요약 redux-persist 패키지 사용 자동로그인을 원하면 localStorage를 사용 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용 사용 목적 리덕스는 웹 브라우저 창을 닫으면 모든 state가 리셋된다. 유저 로그인 정보 같은 경우 브라우저를 닫아도 유지되어야 한다. 이런 경우 사용될 수 있음 원리 App 이 불러와졌을 때 로컬스토리지에 있던 유저 정보 사용 서버에 현재 로그인 상태 재검증 서버가 응답한 로그인 정보로 업데이트 만약에 토큰이 만료되었을 시에는, 재로그인 요청 웹 스토리지 객체(web storage object) 개념 이해 종류 localStorage sessionStorage localStorage와 sessionStorage는 브라우저 내에 키..

React RTK Query 캐시

캐시 태그 시스템 여러 컴포넌트에서 Query Endpoint를 구독하여 Request하는 경우 동일한 요청이 여러 번 있을 때 한 번만 서버에 Request한 뒤 캐시 데이터를 돌려씀 컴포넌트1 : fetchData() → 서버로 데이터 Request 컴포넌트2 : fetchData() → 캐시 데이터 사용 컴포넌트3 : fetchData() → 캐시 데이터 사용 다른 Query여도 캐시 Tag값이 같다면 같은 데이터를 사용하는 것임 postData1(), providesTags=["Tag1"] postData2(), providesTags=["Tag1"] 무효화를 통해 캐시 데이터를 자동 refetch 받아오거나 제거할 수 있음 // 이 부분은 좀더 공부가 필요함!! postData1(), inval..

React Redux Tookit 사용 방법

본 게시물에서는 Redux Toolkit 을 사용한 버전으로 예시를 들어보겠다. 리덕스를 훨씬 편한 방법으로 사용할 수 있는 확장팩이라고 생각하면 된다. Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org 리덕스에 관해서는 아래 게시물을 보고 이해하고 오면 된다. React Redux (리액트 리덕스) 리덕스란? 리액트 뿐만 아니라 다양한 프레임워크에서 사용되는 상태관리 라이브러리이다. 리액트는 MVC (Model View Controller) 중에 View만 담당하게 되는데 나머지 Model, Controller..

React Redux (리액트 리덕스)

리덕스란? 리액트 뿐만 아니라 다양한 프레임워크에서 사용되는 상태관리 라이브러리이다. 리액트는 MVC (Model View Controller) 중에 View만 담당하게 되는데 나머지 Model, Controller에 해당하는 역할을 해주는 것이 Redux이다. 사실 이 MVC 페턴은 어플리케이션이 매우 복잡해져서 동시에 여러 Model을 업데이트하면 예상치 못한 일이 일어날 수 있는 문제가 있다. 왜냐면 너무 규모가 커지면 Model 이 다른 Model을 업데이트하거나 View가 Model을 업데이트 하거나 하는 식으로 거미줄 처럼 서로가 엮이게 되기 때문이다. 그래서 Flux 패턴이라는 것이 등장하였으며, Redux는 이 Flux 페턴을 구현한 것이다. 이 Flux 패턴은 어플리케이션을 단방향으로 일..