기록하는 공부

강의출처 https://youtu.be/WIkZP_8gxm0 useNotification useNotification은 React Hooks의 하나로, 브라우저의 Notification API를 사용하여 웹 페이지에서 알림을 보낼 수 있게 해주는 기능이다. 이를 사용하면 사용자가 브라우저 창을 닫거나 다른 탭으로 이동해 있을 때도 알림을 보낼 수 있어서, 사용자가 페이지 외부에 있을 때에도 중요한 정보를 전달할 수 있다. useNotification은 useState와 useEffect와 같은 방식으로 사용된다. 컴포넌트 내부에서 호출하여, 브라우저에서 Notification 객체를 생성하고, 알림을 보낼 때 사용되는 함수를 반환한다. 예제코드 import React, { useState, useEffe..

강의 출처 https://youtu.be/_f6ZnnuE0A0 useScroll useScroll은 React Hook 중 하나로, 스크롤 위치를 추적하고 그에 따라 상태를 업데이트할 수 있게 해주는 Hook이다. 일반적으로 웹 페이지에서 스크롤이 발생하면 페이지의 콘텐츠가 이동하고, 이에 따라 특정한 액션을 취해야 할 때 useScroll Hook을 사용할 수 있다. 예를 들어, 스크롤이 일정 위치에 도달하면 UI 요소를 변경하거나, 페이지 상단에서 스크롤이 발생할 때 스크롤 상단 버튼을 표시하는 등의 작업을 수행할 수 있다. useScroll Hook은 useEffect를 사용하여 구현된다. useEffect는 스크롤 이벤트를 수신하고, 스크롤 위치를 업데이트하여 상태를 변경한다. 이때 useRef ..

강의출처 https://youtu.be/TxZBPBCKiHE useFadeIn useFadeIn은 React Hook 중 하나로, 페이지나 요소가 나타날 때 애니메이션과 함께 부드럽게 나타나게 만드는 데 사용된다. useFadeIn Hook은 useEffect Hook을 사용하여 컴포넌트가 마운트될 때, opacity 속성을 이용하여 fade-in 애니메이션을 적용한다. useFadeIn Hook은 사용자가 설정한 duration(지속 시간)과 delay(지연 시간)에 따라 애니메이션을 제어할 수 있다. 아래 예제 코드를 통해 살펴보자 ! 예제코드 import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-..

강의출처 https://youtu.be/sY1omh4to3s useBeforeLeave React Hook 중 하나로, 마우스 커서가 브라우저 창을 벗어날 때 실행되는 함수를 등록할 수 있게 해주는 Hook이다. 아래 예제 코드를 보면서 공부해 보자! 예제 코드 import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; const useBeforeLeave = (onBefore) => { const handle = (event) => { const {clientY} = event; if(clientY { document.addEventListener("mouseleave", handle); ret..