커스텀 훅

React에서 setTimeout 같은 타이머 API를 사용할 때 컴포넌트의 생명주기를 고려하지 않으면 메모리 누수나 예기치 않은 예외가 발생할 수 있다. 예를 들어 타이머를 설정한 후 컴포넌트가 언마운트돼도 타이머는 여전히 실행되고, 이후 타이머 콜백에서 언마운트된 컴포넌트의 상태를 업데이트하려고 하면 에러가 발생할 수 있다. 위 같은 상황을 방지하기 위해 useEffect의 클린업 함수에 타이머 해제 로직을 추가한다. 하지만 한 컴포넌트에서 여러 타이머를 관리해야 한다면 메모리 누수 뿐만 아니라 타이머를 관리하기 위한 로직 때문에 컴포넌트의 복잡성이 높아질 수 있다. 만약 별도의 커스텀 훅에서 타이머를 관리하고, 커스텀 훅이 언마운트 될 때 모든 타이머를 자동으로 해제한다면 해당 훅을 사용하는 곳에선..

회원가입, 글쓰기 등 입력 Form 페이지에서 실수로 다른 링크를 클릭하거나, 저장하는 것을 깜빡하고 다른 페이지로 이동하면 유저 입장에서 무척 짜증나는 상황이 된다. 처음부터 폼을 다시 작성하거나 수정해야 하기 때문이다. 임시 저장 기능이 있다면 괜찮지만, 그렇지 않다면 페이지 이탈에 대한 Confirm 단계를 추가해서 사용성을 개선할 수 있다. 실제로 여러 웹 서비스에서 Form 페이지 이탈시 ‘저장하지 않은 내용은 삭제된다’는 안내 문구를 띄운다. 구현 방법NextJS 자체적으로 여러 라우트 이벤트를 제공하는데 routeChangeStart는 라우트 변경을 시작할 때 트리거되는 이벤트다. 페이지를 언로드(새로고침)할 땐 window 객체에서 발생하는 beforeunload 이벤트를 이용하면 된다. ..

React Query에서 제공하는 useQuery, useMutation을 그대로 사용하면 항상 쿼리키와 쿼리 함수를 지정해야 하는 번거로움이 있다. API 유형에 따라 Base Query|Mutation 커스텀 훅을 만들어 두고 사용하면 쿼리키와 쿼리 함수를 일일이 지정하지 않고 여러 곳에서 재사용하기 좋다. 하지만 커스텀 훅을 만들 때 쿼리 타입을 지정하지 않으면 데이터가 unknown, any인 경우가 많아서 어떤 데이터를 다루는지 알기 어렵다. 쿼리 타입은 대부분 제네릭으로 되어 있는데 이를 잘 사용하면 타입을 보장 받으면서 데이터를 편리하게 다룰 수 있다. useQuery제네릭 타입 톺아보기 ⚡️export declare function useQuery ❶ TQueryFnData : 쿼리 함수 ..

기본 로직타자기로 한 글자씩 입력하는 효과(Typewriter Effect)는 이미 수 많은 라이브러리가 있지만, setInterval 타이머 API를 이용해서 직접 구현할 수 있다. 원래 문장(텍스트)을 한 글자씩 자른 후 가장 앞에 글자부터 하나씩 이어 붙이는 방식이다. // JSconst $content = document.querySelector('.content');function typewriter(target, sentence, speed = 200) { const split = sentence.split(''); let text = ''; let i = 0; const timer = setInterval(() => { if (i  깜빡이는 커서 효과는 | 콘텐츠를 갖는 ..