728x90 redux-toolkit3 [React] Redux-persist 사용법(Redux toolkit ver.) (+ Next.js, TypeScript) 이번에 회사 이벤트 페이지들을 Vue에서 React로 바꾸게 되었는데, Redux toolkit을 사용하여 필요한 정보를 가져와 화면에 표시하였다. 그러나 store는 새로고침하면 값이 날아가기 때문에 새로고침 시 해당 화면이 그려지지 않는 문제가 발생했다. 이 문제를 해결하기 위해 Redux-persist를 사용하면 좋을 것 같았다. 📌 Redux-persist ? Redux-persist는 store 값을 localStorage나 sessionStorage에 저장하여 새로고침해도 데이터를 유지된다. 새로고침 시 저장공간에 있는 데이터를 Redux에 불러오는 형식으로 이루어진다. 📌 Redux-persist 적용하기 (Redux toolkit ver.) ( Redux toolkit 사용 방법 ) [st.. 2023. 5. 30. [React] Redux Toolkit 사용법 (+ TypeScript 세팅) Redux Toolkit (+TypeScript) 세팅 방법에 대해 정리해보겠습니다 회사에서 프로젝트를 진행하던 중 Redux를 통해 state를 관리하기 위해 세팅해보기로 했다.개인 프로젝트를 진행할 때 Redux Toolkit에 편리함을 느꼈어서 해당 툴을 사용하고자 했다. 📌 Redux Toolkit ?Redux Toolkit은 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷이다.Redux보다 코드가 간결하고 더 개선되어 유지 관리가 쉽기 때문에 사용을 강력히 권장하고 있다. 📌 Redux Toolkit이 제공하는 것| store.jsimport { configureStore, createSlice } from '@reduxjs/toolkit';// news.. 2023. 2. 12. [Next.js] _app.js와 _document.js에 대해서 Next.js의 _app과 _document에 대해서 알아보겠습니다 📌 _app 가장 먼저 실행되는 컴포넌트 → 모든 페이지는 _app을 통해 실행됨 → 모든 페이지에서 필요한 처리를 할 수 있음 각각의 페이지가 초기화될 때 로딩되는 파일 → 자신이 원하는 로직으로 페이지를 초기화할 수 있음 위와 같은 특징들로 인해 _app의 대표적인 사용 예는 다음과 같다. 각 페이지의 공통된 레이아웃 페이지 작성 전체 앱에 Global CSS 적용 Redux Provider 설정 import "../styles/globals.css"; import type { AppProps } from "next/app"; import Layout from "../components/layout"; function MyApp({ .. 2022. 12. 26. 이전 1 다음 728x90
