useFadeIn 서서히 나타나는 이벤트를 hooks로 만들어보기 useFadeIn 예시 3초 뒤 Hello, 15초 뒤 lorem ipsum...이 화면에 뜸 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.style.o..

useBeforeLeave 탭을 닫을 때 실행되는 function 생성하기 구체적으로는 마우스의 위치를 확인해서 마우스가 탭쪽으로 갔을때 실행되는 함수임 useBeforeLeave 예시 마우스를 상단 탭 위로 가져가면 사진의 콘솔 메시지가 뜸 const useBeforeLeave = (onBefore) => { if (typeof onBefore !== "function") { return; } const handle = (event) => { const { clientY } = event; if (clientY { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("mouseleave", h..

Hooks React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리 hook은 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있도록 함 결론적으로 functional component에서 state를 가질 수 있게 해줌 class component state 예시 class App extends Component { state = { count: 0 }; modify = n => { this.setState({ count: n }); }; render() { const { count } = this.state; return ( {count} ..