다비's IT

redux-persist redux toolkit만 적용했을 경우, 페이지를 이동하거나 새로고침 시 Store 값이 초기화된다. redux-persist 라이브러리를 활용하면 LocalStorage와 SessionStorage의 storage를 redux에서 사용할 수 있게 된다. Config.js LocalStorge 사용 시 "redux-persist/lib/storage" SessionStorage 사용 시 "redux-persist/lib/storage/session" 에서 import persisConfig = {} : 새로운 persist 선언 key : reducer의 어느 지점에서부터 데이터를 저장할 것 인지 storage : 웹의 localStorage 혹은 sessionStorage 지..

사용 전 준비 # yarn 사용 시 yarn add redux react-redux @reduxjs/toolkit # npm 사용 시 npm install redux react-redux @reduxjs/toolkit Redux이란? 먼저 Redux는 상태 관리 라이브러리 중 하나로 현재까지 가장 많이 쓰이고 있다. Redux를 사용하지 않으면 한 컴포넌트의 함수를 props 형태로 다른 컴포넌트로 전달하고, 또 그것을 props 형태로 다른 컴포넌트로 전달하는 과정을 반복해야한다. 이런 복잡한 구조는 불필요한 props 전달로 유지보수 또는 props 추적을 힘들게하는 Props drilling을 야기한다. 상태 관리 라이브러리는 이러한 문제들을 해결하기 위해 고안되었다. Redux는 Reducer와 ..

React Hook이란? React Hook이란, React 버전 16.8부터 React 요소로 새로 추가되었음. Hook이 나오기 전까지는 State 값 접근, lifecycle 구현을 사용하기 위해 Class 컴포넌트 선언을 해줘야했음. 또한 Function 컴포넌트는 한번 호출되고 메모리상에서 사라져 State 값 접근과 lifecycle 구현이 불가능. 기존의 class component를 사용하는 React 방식 import "./style"; import { Component, render } from "preact"; export default class App extends Component { state = { count: 0 }; modify = (n) => { this.setState..