Frontend

[React-Hooks] React Hooks - useBeforeLeave

* useBeforeLeave 페이지를 벗어날 때 사용자에게 팝업이나 알림을 띄워 줄 수 있는 hook이다 * useBeforeLeave 예시코드 import { useEffect } from "react"; const useBeforeLeave = (onBefore) => { const handle = () => { onBefore(); }; useEffect(() => { if (typeof onBefore === "function") { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("mouseleave", handle); } }, []); }; const App = () => { c..

[React-Hooks] React Hooks - usePreventLeave

* usePreventLeave 어떤 문서작업이나 작업을 할시 sava되지 않았을때 브라우저를 닫으려 할때 되물어 주는 confirm(선택창)을 띄우는 hook입니다. * usePreventLeave 예시 코드 const usePreventLeave = () => { const listener = (event) => { event.preventDefault(); event.returnValue = ""; }; const enablePrevent = () => { window.addEventListener("beforeunload", listener); }; const disablePrevent = () => { window.removeEventListener("beforeunload", listener)..

[React-Hooks] React Hooks - useClick & useHover

* useClick 누군가 element를 클릭하였을 때 함수를 실행시켜준다. * useClick 예시코드 const useClick = (onClick) => { if (typeof onClick !== "function") { return; } const element = useRef(); useEffect(() => { if (element.current) { element.current.addEventListener("click", onClick); } return () => { if (element.current) { element.current.removeEventListener("click", onClick); } } }, []) return typeof onClick !== "functio..

[React-Hooks] React Hooks - useRef

* useRef 특정 DOM 선택하기 JavaScript 를 사용 할 때 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있다. ex) 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정 그럴 때 리액트에서 ref 라는 것을 사용한다. * useRef 예시 코드 import { useRef } from "react"; const App = () => { const input = useRef(); setTimeout(() => input.current...

[React-Hooks] React Hooks - useTitle

* useTitle 보통 Title을 수정하기 위해서 Helmet라이브러리를 이용하는데 hook을 이용하여 functional hooks방식으로 만들어 볼 예정 titleUpdater는 useTitle의 함수를 사용하며 매개변수로 "Loading..."를 받고있다. updateTitle에 의해서 title의 값이 할당되며 useEffect를 이용해서 title이 변경될때마다 updateTitle을 실행시켜준다. const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); ..

[React-Hooks] React Hooks - useTab

* useTab button을 클릭하였을때 보여지는 내용을 다르게 보여주는 기능 const content = [ { tab: "first button", content: "click first button" }, { tab: "second button", content: "click second button" } ]; * map함수를 이용하여서 button을 만들어준다. const App = () => { return ( { content.map((section) => { return ( {section.tab} ) }) } ); }; * useTab hook (전체코드 및 사용 되는 흐름) const content = [ { tab: "first button", content: "click first ..