기록하는 개발자

useFadeIn - useEffect를 사용한 hook으로 CSS에서의 transition, opacity 속성을 다룬다. import React, { useRef, useEffect, useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useFadeIn = (duration = 1, delay = 0) => { const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transitio..

import React, { useRef, useEffect, useState } from "react"; import ReactDOM from "react-dom"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ x: window.scrollX, y: window.scrollY }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEv..

- 마우스가 창 상단의 바깥쪽으로 나가면 console 창에 "will you leave?"를 표시한다. import React, { useRef, useEffect, useState } from "react"; import ReactDOM from "react-dom"; const useBeforeLeave = (onBefore) => { if (typeof onBefore !== "function") return; const handle = (event) => { const { clientY } = event; if (clientY { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("m..

* useConfirm과 usePreventLeave는 useState, useEffect를 사용하지 않기 때문에 hook은 아니지만 함수형 프로그래밍을 익히는데 도움이 된다. - 사용자가 무언가를 하기전에 확인하는 것으로 - 사용자가 버튼을 click하면 event 실행 전 msg를 보여준다. import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useConfirm = (message = "", onConfirm, onCancel) => { if (onConfirm && typeof onConfirm !== "function") return; const confirmAc..

useRef - reference : 기본적으로 우리의 component의 어떤 부분을 선택할 수 있는 방법으로 document.getElementByID()를 사용하는 것과 동일하다. export default function App() { const focusInput = useRef(); setTimeout(() => focusInput.current.focus(), 3000); return ( ); } - useRef 객체를 생성해 focusInput에 저장하고 이를 input 태그의 ref property로 지정한다. - Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다. - setTimeout 함수를 사용하여 3초 뒤에 useRef 객체의 current에 focus(입..

useEffect function useEffect(effect: EffectCallback, deps?: DependencyList): void - 2개의 인자를 받는다. 첫 번째는 function으로써의 effect이고 두 번째는 list로써 dependency이다. - deps가 있다면 effect는 deps list에 있는 값일 때만 값이 변하도록 활성화 된다. - useEffect는 componentWillUnmount, componentDidMount, componentWillUpdate의 역할을 하는 funciton이다. - dependency에 넣은 list의 상태가 변경되면 effect로 넣은 함수가 실행된다 - useEffect로부터 componentWillUnmount가 반환된다. <..

https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 랜더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서는 할 수 없었던 다양한 작업을 할 수 있게 해준다. → class를 사용하지 않고도 함수형 프로그래밍을 가능하게 해준다. - this 등과 같은 문장 규칙과 render 등을 고려해야한다. exp..