언제나노마드

[React]useInterval

안녕하세요. 하늘은맑고 입니다. 오늘 소개드릴 커스텀훅은 javaScript의 setInterval을 커스텀 훅으로 만들었습니다. React는 컴포넌트별로 보여졌다가 사라졌다가 하는데요. 이 컴포넌트가 생성될때 기준으로 특정시간 후 함수를 실행하고 컴포넌트가 사라졌을때 interval을 clear해주는 함수입니다. 본 포스팅은 React의 기본(useEffect, useRef, 커스텀훅), javaScript의 setInterval 함수의 이해를 필요로합니다. import { useEffect, useRef } from 'react'; function useInterval(callback, delay) { // 변수로 콜백함수와, 시간을 받습니다. const savedCallback = useRef();..

[React] useAsync Hook

작성일 : 2023-12-15 안녕하세요. 하늘은맑고입니다. 개발하며 자주 사용하는 함수들을 모듈화 하고 있으며 소개드립니다. 이 커스텀 Hook은 React에서 사용되고 error처리와 pending처리를 해주기에 "저장", "삭제" 등 사용자가 빠르게 여러번 클릭해서 api호출이 중복되는걸 방지해줍니다. 원형은 코드잇 학습사이트를 통해 알게됬고 약간의 커스텀을 했습니다. import { useState } from "react"; import { cm_isEmpty, cm_swAlert } from "utils/common"; function useAsync(asyncFunction) { const [pending, setPending] = useState(false); const [error, se..