전체 글 (142) 썸네일형 리스트형 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.. tailwind 의 layout w/ Container note1) columns-2 은 vertical 로 우선 채우고 다음 column 으로 넘어간다. Well, let me tell you something, ... Sure, go ahead, laugh... Maybe we can live without... Look. If you think this is... Hear. If you think That is... note2) break-after-column" “ 이 element 를 처리하고 다음 column 으로 가라. Well,className let me tell you something, ... Sure, go ahead, laugh... Maybe we can live without... Look. If you think this is.... 이전 1 2 3 4 5 6 ··· 18 다음
