front-end/React(3)
-
React (3) - TypeScript 오늘 하루 안보기 팝업 만들기
React 로 '오늘 하루 안보기' 팝업을 만들었다. 시간을 세션이나, 로컬스토로지에 저장할 수 있는데, 로컬스토로지에 저장하였다. 우선 localStorage.setItem("PopUpNotShow", 시간); 으로 시간을 저장 한다. 그 다음 사용자가 접속 하였을 때, localStorage 에 저장된 PopUpNotShow을 가져온다. localStorage.getItem("PopUpNotShow"); { const PopUpNotShow: string | null = localStorage.getItem("PopUpNotShow"); //localStorage에 PopUpNotShow 값을 가져온다. const currentTime = Math.floor(new Date().getTime()); ..
2022.04.10 -
React (2) - TypeScript 에서 setState props로 넘길 때 Type 지정하는 법
상위 컴포넌트에서 useState 함수를 넘길 때 아래 처럼 기존에 해왔던 것처럼 void로 넘겼는데, react 에서 더 적절한 타입을 제공하고 있었다 interface ITestProps{ setTest: () => void } SetStateAction 과 Dispatch 이다. import React, { SetStateAction, Dispatch } from 'react' interface Props { setTest: Dispatch } 위에 코드처럼 타입을 작성하게 되면 어떤 타입의 값을 넣어야하는지 훨씬 쉽게 알 수 있다. https://newbedev.com/passing-usestate-as-props-in-typescript Passing useState as props in typ..
2022.04.04 -
React (1) - redux-saga
redux-thunk 대신 redux-saga 를 사용하는 이유 thunk 는 dispatch 를 여러번 불러오는 기능만 가지고 있다. npm i redux-saga npm i next-redux-saga redux-saga 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용합니다. 여기서 특정 작업이란, 특장 자바스크립트를 실행하는 것 일수도 있고, 다른 액션을 디스패치 하는 것 일수도 있고, 현재 상태를 불러오는 것 일수도 있습니다. redux-saga는 redux-thunk로 못하는 다양한 작업들을 처리 할 수 있습니다. 예를 들자면.. 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있습니다. 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게..
2022.04.03