탭을 닫을 때 실행되는 function const useBeforeLeave = () => { const handle = () => { console.log("leaving"); }; useEffect(() => { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("mouseleave", handle); }, []); } export default function App() { return ( Hi ); } addEventListener로 이벤트를 실행시킨 이후에 component가 mount되지 않았다면 return으로 remove해준다. 인터넷 창에서 브라우저 영역 밖으로 마우스가 이동 ..

useConfirm const useConfirm = (message = "", onConfirm) => { if(!onConfirm || typeof onConfirm !== "function"){ return; } const consfirmAction = () => { if(window.confirm(message)){ onConfirm(); } }; return consfirmAction; }; message의 default값은 공백으로 설정 confirm function이 브라우저에 message를 가지고 있다면 callback() 호출 confirm() ==> window.confirm() 사용하여 해결 export default function App() { const deleteWorld =..

https://react.vlpt.us/basic/25-lifecycle.html 25. LifeCycle Method · GitBook 25. LifeCycle Method LifeCycle Method 는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. react.vlpt.us componentDidMount componentDidUpdate componentWillUnMount componentDidMount 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드입니다. 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태입니다. 여기선 주로 D3, masonry 처럼 DOM..

useTitle 문서 제목을 업데이트하는 functional hooks 방식 const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerText = title; } useEffect(updateTitle, [title]); return setTitle; } export default function App() { const titleUpdater = useTitle("Loading..."); return ( Hi ); } title의 값을 in..

useEffect는 componentWillUnmount, componentDidmount, componentWillUpdate 와 비슷하다. (동일한 function) export default function App() { const sayHello = () => console.log("hello"); useEffect(() => { sayHello(); }) const [number, setNumber] = useState(0); const [aNumber, setAnumber] = useState(0); return ( Hi setNumber(number + 1)}>{number} setAnumber(aNumber + 1)}>{aNumber} ); } button을 클릭시 onClick 이벤트가 ..

const content = [ { tab: "Section1", content: "Content of Section 1" }, { tab: "Section2", content: "Content of Section 2" } ]; export default function App() { return ( Hello {content.map((section) => ( {section.tab} ))} ); } content 에서 tab의 값을 section.tab으로 호출하여 출력해준다. tab의 갯수만큼 버튼이 return된다. const useTabs = (initialTab, allTabs) => { const [currentIndex, setCurrentIndex] = useState(initialTab)..