기록하는 개발자

1. npx create-react-app [appName] 2. firebase project 만들기 3. terminal 창에 firebase install > npm install --save firebase 4. src 폴더 내 firebase.js 파일 생성 5. firebase SDK의 firebaseConfig 복사하여 아래와 같이 구성 import { initializeApp } from "firebase/app"; const firebaseConfig = { apiKey: "a", authDomain: "b", projectId: "c", storageBucket: "d", messagingSenderId: "e", appId: "f" }; export default initializeA..

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(입..

import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; 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..

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가 반환된다. <..