기록하는 공부

강의출처 https://youtu.be/IxydSMI4Qjg useAxios useAxios는 React Hooks 중 하나로, Axios 라이브러리를 사용하여 HTTP 요청을 보내고, 그 결과를 처리할 수 있게 해주는 기능이다. Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 비동기적으로 데이터를 가져올 수 있다. useAxios를 사용하면 Axios를 통해 비동기적으로 데이터를 가져오고, 그 결과를 상태로 저장하여 컴포넌트에서 사용할 수 있다. useAxios는 useState와 useEffect와 같은 방식으로 사용된다. 컴포넌트 내부에서 호출하여, 두 개의 매개변수를 받는다. 첫 번째 매개변수는 Axios에서 사용하는 설정 객체(config)이며, 두 번째 매개변수는 옵션 객체..

강의출처 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-..