React

[ Hook ] useScroll

🔴 Introduction ⚪ 현재 스크롤의 y 좌표 값을 구해서 리턴해주는 Hook 🟠 Hook import { useState, useEffect } from "react"; export const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0, }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); ..

[ Hook ] usePreventLeave

🔴 Introduction ⚪ 현재 페이지를 종료하려고 할 때, 경고 메시지를 띄울지 말지를 결정하는 함수를 리턴해주는 Hook 🟠 Hook export const usePreventLeave = () => { const listener = (event) => { event.preventDefault(); event.returnValue = ""; }; const enablePrevent = () => window.addEventListener("beforeunload", listener); const disablePrevent = () => window.removeEventListener("beforeunload", listener); return [enablePrevent, disablePrevent..

[ Hook ] useNotification

🔴 Introduction ⚪ Window Notification에 대한 옵션을 설정하면 권한 허용 여부 이후 Notification을 띄워주는 Hook 🟠 Hook export const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { if (Notification.permission !== "granted") { Notification.requestPermission().then((permission) => { if (permission === "granted") { new Notification(title, options); } else { retur..

[ Hook ] useHover

🔴 Introduction ⚪ 컴포넌트에 Hover 이벤트 발생시 전달한 함수를 실행시켜주는 Hook 🟠 Hook import { useEffect, useRef } from "react"; export const useHover = (onHover) => { const element = useRef(); useEffect(() => { if (typeof onHover !== "function") { return; } if (element.current) { element.current.addEventListener("mouseenter", onHover); } return () => { if (element.current) { element.current.removeEventListener("mous..

[ Hook ] useConfirm

🔴 Introduction ⚪ 메시지와 확인할 시 함수, 취소할 시 함수를 인자로 넣어 보내면 이에 해당하는 Confirm 모달 창을 띄워주는 hook 🟠 Hook export const useConfirm = (message = "", onConfirm, onCancel) => { if (!onConfirm || typeof onConfirm !== "function") { return; } if (onCancel && typeof onCancel !== "function") { return; } const confirmAction = () => { if (window.confirm(message)) { onConfirm(); } else { onCancel(); } }; return confirmAc..

[ Hook ] useBeforeLeave

🔴 Introduction ⚪ 마우스가 브라우저 창의 바깥으로 벗어났을 때, 파라미터로 받은 onLeave 함수를 실행시키는 hook 🟠 Hook import { useEffect } from "react"; export const useBeforeLeave = (onLeave) => { const handle = (event) => { const { clientY } = event; if (clientY { if (typeof onLeave !== "function") { return; } else { document.addEventListener("mouseleave", handle); } return () => document.removeEventListener("mouseleave", handle..

[ React ] framer-motion

🔴 Introduction ⚪ React에서 컴포넌트 animation을 도와주는 라이브러리 🟠 Official Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-ready React animation and gesture library. www.framer.com 🟡 Install npm i framer-motion 🔵 Reference GitHub - windragon0807/framer-motion-examples: 여러 가지 framer-motion 요소들을 컴포넌트별로 경험해 볼 수 있 여러 가지 framer-motion 요소들을 컴포넌트별로 경험해 볼 수 있는 Application ..

[ React ] react-beautiful-dnd

🔴 Introduction ⚪ Drag and Drop을 쉽게 해결해주는 오픈 소스 라이브러리 🟠 Official GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React Beautiful and accessible drag and drop for lists with React - GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React github.com 🟡 Install // react version >= 18.0.0 npm i react-beautiful-dn..

[ React ] react-hook-form

🔴 Introduction ⚪ form의 validation을 도와주는 라이브러리 🟠 Official 시작하기 Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com 🟡 Install npm i react-hook-form 🟢 Usage import "./styles.css"; import { useForm } from "react-hook-form"; export default function App() { const { register, // input에 react-hook-form 등록 handleSubmit, // register에 등록된 input 데이터를 form에서 처리할 함수 form..

[ React ] classnames

🔴 Introduction ⚪ html에서는 class를 사용하여 편하게 css를 쓸수 있지만 React에서는 class가 예약어로 사용중이기 때문에 이를 해결하기 위해 나온 라이브러리 🟠 Official classnames A simple utility for conditionally joining classNames together. Latest version: 2.3.1, last published: a year ago. Start using classnames in your project by running `npm i classnames`. There are 35414 other projects in the npm registry using classnames. www.npmjs.com 🟡 In..