Java Scripts (57) 썸네일형 리스트형 Hook in React - useFullScreen note)iFrame에서는 동작하지 않았고 새창에서 실행하는 경우에 동작하였다. note) 변수 뿐만이 아니라 api 도 return 하여 외부에서 이용이 가능하였다. note) Exit Fullscreen 과 Make Fullscreen button 이 있어서 동작이 가능하였다. import { useRef } from "react"; export const useFullscreen = callback => { const element = useRef(); const runCb = isFull => { if (callback && typeof callback === "function") { callback(isFull); } }; const triggerFull = () => { if (element... Hook in React - useFadeIn note) fade in 효과가 element 안에서 나타나게 하기 위하여 useEffect 를 사용하였다. note) spread operator Hello 을 이용하여 쉽게 setting 을 할 수 있었다. 이것을 사용하지 않으면 다음과 같이 복잡하게 사용해야 한다. Hello note) 맨처음 Hello 가 천천히 나타나고 5초 있다가 Test Test2 Test3 Test4 가 천천히 나타난다. import { useRef, useEffect } from "react"; export const useFadeIn = (duration = 1, delay = 0) => { if (typeof duration !== "number" || typeof delay !== "number") { return;.. Hook in React - useConfirm note) useEffect 나 useState 를 사용하지 않는 sample 임. note) onClick 이 실행되면 confirmDelete 이 실행되는데, confirmDelete은 useConfirm에서 return 된 confirmAction 이다 export const useConfirm = (message = "", onConfirm, onCancel) => { if (!onConfirm || typeof onConfirm !== "function") { return; } if (onCancel && typeof onCancel !== "function") { // onCancel is not mandatory argument return; } const confirmAction = () .. Hook in React - useHover note) useHover 함수를 정의하고 그 안에 useEffect(function(),[]) 함수를 호출하면 페이지가 열리는 시작지점에 내부의 function을 호출하는데, blank 배열 [] 이니까 페이지가 시작하는 최초에 한번 함수를 호출한다 (여기서는 onHover 함수가 등록 된다) 내부에 정의한 arrow function을 return 하게되면, 페이지가 종료되는 시점에 return 된 함수가 실행된다. (여기서는 앞에서 등록된 onHover 함수가 unregister 된다) note) useRef() 에서 return 된 element 가 onHover에서 return 되고 return된 element 가 Hi 와 같이 사용된다. note) Hi element 로 mouse move 하면.. Hook in React - useClick note) useClick 함수를 정의하고 그 안에 useEffect(function(),[]) 함수를 호출하면 페이지가 열리는 시작지점에 내부의 function을 호출하는데, blank 배열 [] 이니까 페이지가 시작하는 최초에 한번 함수를 호출한다 (여기서는 onClick 함수가 등록 된다) 여기서 알게된 새로운 사실이, 내부에 정의한 arrow function을 return 하게되면, 페이지가 종료되는 시점에 return 된 함수를 실행한다. (여기서는 앞에서 등록된 onClick 함수가 unregister 된다) note) useRef() 에서 return 된 element 가 useClick 에서 return 되고 return된 element 가 Hi 와 같이 사용된다. note) self로 e.. Hook in React - useTitle note) useTitle 이 호출되면, 안의 useState 안의 title 은 “Loading..” 으로 초기화되고, useTitle 안의 useEffect 가 mount 될때 updateTitle 이 호출되면서 htmlTitle.innerText 에 의하여 html title 이 Loading 으로 setting이 된다. 이후 timer 에서 useTitle이 호출되면서 useState 안의 title 은 "Home" 으로 초기화되고, useTitle 안의 useEffect 은 title 이 변경됨에 따라 useEffect 에 등록된 함수가 다시호출이 되어 html title 이 다시 변경이된다. 멋진 코드이다. note) 아래 code 를 copy & paste 하여 돌리면 custom hook .. Hook in React - useTabs note) useTabs hook function은 currentItem data 와 setCurrentIndex 라는 modified 를 실어서 내보내고, 이것이 button 의 click event 에 mapping 되는 함수에서 index 이용하여 setCurrentIndex 를 호출되면서 currentItem.content 이 re-render 가 되는 구조이다.. 멋진 code 임..... note) 아래 code 를 copy & paste 하여 실행하면 useTabs custom hook function 을 TEST 할 수 있다. import { useState } from "react"; import "./styles.css"; const content = [ { tab : "Section .. Hook in React - useInput 아래 code 는 useInput 이라는 custom hook function 을 사용하여 기존 useStat를 대치하고 있는 것으로 code 를 공부하면서 이해한 것을 정리한 것이다. 아래 code 를 copy & paste 하여 돌리면 custom hook function 을 TEST 할 수 있다. import { useState } from "react"; export const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = event => { const { target: { value } } = event; let willUpdate = true; i.. 이전 1 2 3 4 5 ··· 8 다음