본문 바로가기

Library3

React-Cookie 1. Issue 클라이언트에서 로그인 요청이 들어오면 서버에서 토큰을 발급한다. 발급받은 토큰을 Redux로 관리한다. 페이지를 새로고침 하면 Redux state가 초기화된다. 2. About 웹 서버가 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보 웹페이지 방문 시 방문 기록 등 브라우저의 정보들이 저장된 텍스트 파일 3. Install Terminal $ npm install react-cookie CDN 4. Use // index.js import React from 'react'; import App from './App'; import { CookiesProvider } from 'react-cookie'; export default func.. 2023. 1. 8.
Redux Redux Redux는 JavaScript 상태 관리 라이브러리이다. Redux의 본질은 Node.js 모듈이다. Redux의 기본 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. State is read-only 리액트에서는 setState를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. 3. Changes are made with pure functions 변경은 순수함수로만 가능하다. 리듀서와 연관되는 개념이다. Store(스토어) – Action(액션) – Reducer(리듀서) Store Store에서 상태를 관리하고 오직 하나만 존재한.. 2022. 12. 20.
Zustand 1. Zustand란 Redux와 마찬가지로 상태 관리 라이브러리다. Redux가 유명하지만 문법적으로 난해한 경향이 있어 다른 라이브러리를 써보고자 한다. 2. Zustand 설치 $ npm install zustand 3-1. Store 설정 import create from 'zustand'; const useStore = create(() => ({ count: 0 })); Zustand에서 제공하는 create함수를 사용해 useStore 훅을 생성한다. 이렇게 만들어진 store를 사용하면 된다. 3-2. Store 사용 function App() { const { count } = useStore(); return ( {count} ); } store 내부의 count 값이 잘 가져오는 것을.. 2022. 8. 25.