일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- NextJS
- JavaScript
- 데이터모델링과마이닝
- 디자인 패턴
- React JS
- design pattern
- useState
- 자바
- 프로그래머스 자바
- 리액트
- vanillaJS
- 컴퓨터 네트워크
- 코딩테스트 고득점 Kit 완전탐색
- 백준
- 프로그래머스
- codesandbox
- 코틀린
- react firebase
- react
- 자바 공부
- 프로그래밍 언어론
- 장고
- Java
- websocket
- 프로그래머스 완전탐색
- 리액트 훅
- 코딩테스트 고득점 Kit
- 자바스크립트
- useEffect
- react hook
- Today
- Total
목록codesandbox (7)
기록하는 개발자
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(입..
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가 반환된다. <..
https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 랜더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서는 할 수 없었던 다양한 작업을 할 수 있게 해준다. → class를 사용하지 않고도 함수형 프로그래밍을 가능하게 해준다. - this 등과 같은 문장 규칙과 render 등을 고려해야한다. exp..