기록하는 개발자

프로젝트를 하면서 modal창을 직접 만들어 쓰곤 했는데 기록한 적은 없었던 것 같아 글을 써본다. React hooks usestate를 사용해 modal창을 만들었다. 클릭 전 화면 클릭 후 화면 폴더 구조 //App.js import React, { useEffect } from "react"; import AppRouter from "./AppRouter"; function App() { return ; } export default App; //AppRouter.tsx import React, { useState } from "react"; import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; import Home ..

- 앞으로 우리가 render 시킬 routes 는 우리의 로그인 여부에 따라 달라진다. 1. routes 폴더 생성 2. terminal 창에서 react router dom 설치 > npm i react-router-dom import React from 'react'; const Home=()=>Home; export default Home; import React from 'react'; const Auth=()=>Auth; export default Auth; import React from 'react'; import AppRouter from "./Router"; function App() { return ( ); } export..

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

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

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

import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const content = [ { tab: "Romnace and Musical", content: "I think you like SingStreet, LaLaLand, The Greatest Show!" }, { tab: "Fantasy", content: "Avengers, Harry Potter, The Lord of the Rings!" } ]; const useTabs = (initialTab, tabArray) => { if (!tabArray || !Array.isArr..

useInput - input 내용과 그에 따른 이벤트를 useState hooks를 통해 관리할 수 있다. import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { const { target: { value } } = event; // 위와 동일 : const { value } = event.target; let ..