React Hooks
-
useEffect 2부React Hooks 2019. 12. 12. 09:14
useScrool 유저가 스크롤해서 뭔가를 지나쳤을때 색상을 바꾸거나 무엇이든지 할 필요가있을때 사용 import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = event => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); window.removeEventListe..
-
useEffectReact Hooks 2019. 12. 12. 08:38
useEffect useEffect는 componentDidmount, componentWillUnMount, componentDidUpdate 이다. 2개의 인자를 받는데, 첫번째는 function으로써의 effect고, 두번째에 넣은 인자 상태가 바뀌면 첫번째 인자가 다시 실행된다. useEffect(sayHello, []); // 2번째인자값을 이런식으로 비우면 한번만 실행됨 useTitle // 5초후 브라우저의 제목이 Home로 바뀜 import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; const useTitle = initialTitle => { const [title, setTitle] = u..
-
useStateReact Hooks 2019. 12. 10. 23:43
더는 클래스형 컴포넌트를 안만들어도됨! state를 함수형 컴포넌트에서 사용가능!! useState import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const App = () => { const [item, setItem] = useState(1); // 항상 두개의 value를 갖고 array로 리턴함 useState()안의 값이 item이 됨 // item 하나만 갖고싶을경우 => const item = useState(1)[0] const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem..