WEB44 [React Hooks] useFadeln, useNetwork, useScroll useFadeIn import "./styles.css"; import React, { useState, useEffect, 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}s ease-in-out ${delay}s`; current.styl.. 2021. 12. 19. [React Hooks] useConfirm, preventLeave, useBeforeLeave useConfirm - 사용자가 무언가를 하기전에 확인하는 건데 예를 들면 사용자가 버튼을 클릭하는 작업을 하면 이벤트를 실행하기 전에 메세지를 보여주고 싶을 때 사용한다. useConfirm만 구현한 코드 - 확인을 누르면 delete, 취소를 누르면 abort가 콘솔에 출력된다. import "./styles.css"; import React, { useState, useEffect, useRef } from "react"; const useConfirm = (message = "", callback, rejection) => { if (typeof callback !== "function") { return; } const confirmAction = () => { if (confirm(messag.. 2021. 12. 19. [React Hooks] useEffect, useTitle, useClick useEffect import "./styles.css"; import React, { useState, useEffect } from "react"; export default function App() { const sayHello = () => console.log("hello"); const [number, setNumber] = useState(0); const [aNumber, setAnumber] = useState(0); // component가 mount 되었을 때 실행 // number가 바뀔 때만 실행 // [number]을 dependency라고 한다.(매우중요) useEffect(sayHello, [number]); return ( Hi setNumber(number + 1)}>{.. 2021. 12. 18. [React Hooks] useInput, useTabs 사람들은 자신의 hooks를 NPM에 공유할 수 있다. https://www.npmjs.com/search?q=user&ranking=popularity user - npm search www.npmjs.com 작업은 Code Sandbox에서 할 것이다. https://codesandbox.io/ CodeSandbox: Online Code Editor and IDE for Rapid Web Development Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more. codesandbox.io Hooks는 react의 state machine에 연결하는 기본적인 방법이다. .. 2021. 12. 13. 이전 1 2 3 4 5 6 7 8 ··· 11 다음
