스터디/[노마드코더] 실전형 React Hooks (8) 썸네일형 리스트형 #7. useFadeIn & useNetwork useFadeIn Element 하나를 자동으로 서서히 나타나도록 하는 기능 animation 기능을 hook에 넣어 사용한다. import React, { useEffect, useState, useRef } from "react"; const useFadeIn = (duration = 1, delay = 0) => { if (typeof duration !== "number" || typeof delay !== "number") { return; } const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transition = `opacity ${duration.. #6. useBeforeLeave hook useBeforeLeave 기본적으로 탭을 닫을 때 실행되는 function ex) 마우스가 페이지를 벗어날 때 function을 실행한다. import React, { useEffect, useState, useRef } from "react"; const useBeforeLeave = (onBefore) => { if (typeof onBefore !== "function") { return; } const handle = (event) => { const { clientY } = event; if (clientY { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("mouseleave".. #5. useConfirm & usePreventLeave hook useConfirm 사용자가 무언가를 하기 전에 확인시켜 주는 기능 ex) 사용자가 버튼 클릭 작업을 하면 이벤트를 실행하기 전에 확인하는 메시지를 보여주는 기능 const useConfirm = (message, callback) => {} import React, { useEffect, useState, useRef } from "react"; const useConfirm = (message = '', onConfirm, onCancel) => { if (!onConfirm || typeof onConfirm !== 'function') { return; } if (onCancel && typeof onCancel !== 'function') { return; } const confirmAction.. #4. useClick hook useClick useRef를 통해 특정 element를 클릭하면 특정 동작을 수행하도록 하는 기능 import React, { useEffect, useState, useRef } from "react"; const useClick = (onClick) => { if (typeof onClick !== "function") { return; } const element = useRef(); useEffect(() => { if (element.current) { element.current.addEventListener("click", onClick); } return () => { if (element.current) { element.current.removeEventListener("click",.. #3. useTitle hook useTitle 문서의 제목을 업데이트 시켜주는 걸 담당하는 hook import { useEffect, useState } from "react"; const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerText = title; }; useEffect(updateTitle, [title]); return setTitle; }; const App = () => { const titleUpdater = useTitle("Loading...").. #2. useTabs hook useTabs 특정 element를 탭 하면 원하는 특정 내용만 보여줄 수 있는 기능 import { useState } from "react"; const content = [ { tab: "Section 1", content: "I'm the content of the Section 1" }, { tab: "Section 2", content: "I'm the content of the Section 2" }, ]; const useTabs = (initialTab, allTabs) => { if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentIndex] = useState(initialTab); ret.. #1. useInput hook useInput 기본적으로 input을 업데이트 하는 Hook const useInput = () => {}; import "./styles.css"; import { useState } from "react"; const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { console.log(event.target); }; return { value, onChange }; }; export const App = () => { const name = useInput("youngseo"); return ( Hello CodeSandbox ); }; export.. #0. Introduction # 목표 : 우리의 hooks library를 build 하기 - useTitle : react document의 title을 몇 개의 hooks와 함께 바꿈 - useInput : input의 역할 - usePageLeave : user가 page를 벗어나는 시점을 발견하고 함수 실행 - useClick : element를 클릭하는 시점을 발견하고 함수 실행 - useFadeIn : 어떤 Element든 상관없이 FadeIn 애니메이션을 적용함 - useHover : 어떤 Element 위에 마우스를 올렸을 때를 감지함 - useFullscreen : 어떤 Element든 fullscreen으로 만들거나 일반 화면으로 돌아가게 함 - useNetwork : online인지 offline 상태인지 감지함.. 이전 1 다음
