Recoil5 [Recoil] 새로고침해도 유지되는 state_Recoil Persist 결제 기능을 구현하는 과정에서 결제창이 넘어가며 state가 초기화되어 결제 승인 페이지에 도착하기 전에 사용자가 입력한 예약 정보가 모두 날아가는 문제가 발생했다. 그래서 사용자가 입력한 예약 정보를 임시로 저장하기 위해 Recoil Persist 기능을 이용하여 구현했다. Recoil Persist란? Recoil과 함께 사용할 수 있는 별도의 라이브러리로, Recoil로 생성한 global state를 localStorage 혹은 sessionStorage에 저장하여 새로고침해도 state가 유지되도록 사용할 수 있다. 기존 Recoil 사용 방법과 동일하게 useRecoilState 등의 훅을 이용하여 쉽게 Storage에 상태를 저장할 수 있다. Recoil Persist 사용 방법 npm in.. 2023. 6. 6. [TIL] 2023.05.19 Next.js 13버전에 Recoil 적용하기 Root Layout에 바로 RecoilRoot를 넣으려고 했더니 에러가 발생했다. TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. RecoilRoot를 사용하려면 서버 컴포넌트를 클라이언트 컴포넌트로 변경해야 하는 거 같다. 하지만 Root Layout 파일을 클라이언트로 변경하면 모든 컴포넌트가 클라이언트 컴포넌트로 변경되는 결과가 생길 거 같아서 recoil 파일을 따로 빼서 적용하기로 했다. 'use client' import { ReactNode } from 'react' import { RecoilRoot } from 're.. 2023. 5. 19. [TIL] 내일배움캠프 React 과정 2023.02.21 Today I Learned 마이페이지 UI 구현 및 유저의 관심 카테고리 업데이트 기능 구현 recoil duplicate 에러 해결하기 Expectation Violation: Duplicate atom key "{아톰 키}". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement. 콘솔에 자꾸 Recoil 관련된 에러 메시지가 떠서 검색해 봤더니 Next.js와 관련하여 발생하는 문제인 거 같았다. RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false 블로그 링크를 참고하여 .env 파일에 상단의 코.. 2023. 2. 23. [TIL] 내일배움캠프 React 과정 2023.01.27 Today I Learned vercel로 프로젝트 배포하기 custom hook 공부하기 isOpen 데이터를 전역적으로 사용하기 // 현재 시간, 요일에 따라 영업 중, 영업 종료 구분 const handleIsOpen = () => { // 현재 시간, 현재 요일 const { currentTime, day } = getCurrentTime(); // 주말인 경우 if (day === 0 || day === 7) { return currentTime >= weekendOpenTime && currentTime = weekdayOpenTime && currentTime ({ ...item, isOpen: handleIsOpen(), })), }); 내 고민을 얘기했더니 다른 팀원분이 isOpen을 아.. 2023. 1. 28. [TIL] 내일배움캠프 React 과정 2023.01.25 Today I Learned Recoil 공부하기 리스트 클릭 시 지도에서 해당 위치로 이동하도록 구현하기 Recoil 공부하기 const todoListState = atom({ key: 'todoListState', // unique ID default: [], // initial value }); const [todoList, setTodoList] = useRecoilState(todoListState); 코드 몇 줄로 전역 상태 관리 끝... 공식 문서 https://recoiljs.org/ko/docs/introduction/getting-started/ https://recoiljs.org/ko/docs/basic-tutorial/atoms https://recoiljs.org/ko/docs.. 2023. 1. 26. 이전 1 다음
