반응형

[React + Zustand] persist, localstorage에 업데이트 된 새로운 값 가져오기

외주 프로젝트를 하는 중에 다음과 같은 문제가 발생했다. 사용자의 행동에 따라, ZuStand의 persist를 사용하여 localstorage에 저장된 값이 변화한다. 이 변화한 값을 페이지 이동 시 즉시 화면에 보여줘야 한다. 그러나 persist를 이용한 ZuStand는 예상과는 다르게 동작했다.  애플리케이션이 처음 실행될 때, persist 미들웨어는 지정된 스토리지에서 데이터를 읽어와 Zustand 스토어를 "rehydrate"합니다. 즉, 저장된 상태를 다시 불러와 초기 상태로 설정합니다.  persist를 이용해 만들어진 최초의 상태, 즉 아무 값이 저장되지 않은 상태가 zuStand에 저장된 상태라 localStorage에서 변화한 값이 useState를 쓸 때 처럼, 화면의 리렌더링이 ..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2024. 12. 10.
  • textsms

[React] Zustand의 persist

프론트 페이지에서 새로고침이 되어도 값이 변경되지 않아야 하는 전역 정보를 다룰 때에는 어떻게 하면 좋을까?예를 들어, 로그인의 경우 accessToken의 수명이 다할 때까지 어딘가에 반드시 저장이 되어 있어야 한다. 이를 위해, Zustand의 persist를 사용해 보았다.     Zustand 의 Persist란?persist 미들웨어는 Zustand를 사용하여 스토어의 상태를 로컬 스토리지(localStorage) 또는 다른 저장소에 유지(persist)하기 위해 사용된다. 이 미들웨어는 Zustand 상태를 지정된 저장소에 저장하고, 애플리케이션 초기화 시 저장된 상태를 복원한다. persist의 사용 방식 persist는 두 가지 주요 매개변수를 받는다:config: Zustand 상태와 상..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2024. 11. 27.
  • textsms

[React] 값이 없는 상태를 어떻게 관리해야 할까? undefined와 null

개발을 하다 보면, 필연적으로 '값이 없는 상태' 를 관리해야 하는 경우가 생긴다. 이 때, undefined를 쓰는 게 좋을까, null을 쓰는 게 좋을까?   먼저, undefined와 null에 대해 알아보자. undefined와 null의 차이undefined변수가 선언되었지만 초기화되지 않은 상태.값이 아예 없음을 나타냄.타입스크립트에서 Optional 속성(?)의 기본 상태.null의도적으로 "값이 없음"을 명시.값이 존재하지 않음을 프로그래머가 명시적으로 설정한 상태.  아하, 그러니까 undefined는 '변수가 선언되기만 한 상태' 이고, null은 '값이 없다는 것을 넣어준 상태' 이다. 즉 undefined는 '데이터의 상태를 초기화하지 않은 상태(어떠한 값도 넣지 않은 채)로 남겨두..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2024. 11. 27.
  • textsms
[React] Zustand를 이용하여 useModal 훅 만들기

[React] Zustand를 이용하여 useModal 훅 만들기

외주 프로젝트 중 여러 알림을 쌓으면서 관리해야 하는 Alert, 한 번에 하나만 띄워져야 하는 Modal을 useModal이라는 하나의 훅을 이용해 관리하기 위해 작성해 보았다. 코드의 흐름 설명 모달 상태 관리(useModalStore)useModalStore는 Zustand를 사용해 모달의 상태를 관리하며, stack 옵션에 따라 모달의 관리 방식을 조정합니다.modals: 현재 열려 있는 모달의 배열입니다.open: 특정 컴포넌트를 모달로 열고, 관련 데이터를 상태에 추가합니다.stack: true: modals 배열에 새로운 모달을 추가합니다.stack: false: 기존 모달이 없을 때만 추가. 기존 모달이 있다면 **"모달을 추가할 수 없습니다"**라는 메시지를 console에 출력합니다.c..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2024. 11. 27.
  • textsms
[React] 보일러 프로젝트 - 프론트 완성 , + (01.20 회원가입 백엔드까지 완성)

[React] 보일러 프로젝트 - 프론트 완성 , + (01.20 회원가입 백엔드까지 완성)

My Boiler Project 프론트엔드 완성 : 소요기간 : 1.5일 기획 및 디자인 : https://make-somthing.tistory.com/83 Demo : https://web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app/ CHALIE BOILER web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app 사용 언어와 기술, 라이브러리 및 DB Frontend - React, Figma (useNavigator, useState, React-Router-Dom@6, useRef, SCSS(node-sass 라이브러리)) 배포 - Cloudtype 프로젝트 제작 계기 passport, react-que..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2023. 1. 19.
  • textsms
[React] My Portfolio React 프로젝트

[React] My Portfolio React 프로젝트

My Portfolio React 프로젝트 소요 기간 : 3일 Figma 기획 : https://make-somthing.tistory.com/77 Github: https://github.com/chalinuna/myweb Demo: https://main--bright-mochi-309946.netlify.app/ 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useNavigator, useState, React-Router-Dom@6, styled-components, SCSS(node-sass 라이브러리)) Unsplash Open api 배포 - Netlify 프로젝트 제작 계기 내 프로젝트와 간단한 이력서, 자기소개를 한꺼번에 보여줄 수 있는 포트폴리오 정리 페이지가 ..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2023. 1. 14.
  • textsms
반응형