[React] React Hooks (6) - useBeforeLeave
2023. 2. 1. 20:48
프로그래밍/React
useBeforeLeave 탭을 닫을 때 실행되는 function 생성하기 구체적으로는 마우스의 위치를 확인해서 마우스가 탭쪽으로 갔을때 실행되는 함수임 useBeforeLeave 예시 마우스를 상단 탭 위로 가져가면 사진의 콘솔 메시지가 뜸 const useBeforeLeave = (onBefore) => { if (typeof onBefore !== "function") { return; } const handle = (event) => { const { clientY } = event; if (clientY { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("mouseleave", h..
[React] React Hooks (5) - useRef
2023. 1. 31. 20:09
프로그래밍/React
useRef reference는 기본적으로 component의 어떤 부분을 선택할 수 있는 방법 document.getElementByID()와 같은 역할 useRef 예시1 const App = () => { const input = useRef(); setTimeout(() => input.current.focus(), 5000); return ( Hello ); }; 5초 뒤 input이 선택되어 focus 됨 useRef 예시2 const useClick = (onClick) => { const element = useRef(); useEffect(() => { if(element.current){ element.current.addEventListener("click", onClick); } r..
[React] React Hooks (4.1) - useEffect 활용법
2023. 1. 30. 20:58
프로그래밍/React
useEffect를 활용하여 title을 변경해보자 웹 페이지 title을 업데이트 하는 hooks 만들어보기 const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerText = title; }; useEffect(updateTitle, [title]); return setTitle; }; const App = () => { const titleUpdater = useTitle("Welcome"); setTimeout(() => titleU..
[React] useEffect
2023. 1. 27. 20:38
프로그래밍/React
useEffect useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말해줌 componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps의 역할을 수행 useEffect 예시1 const App = () => { const sayHello = () => console.log("hello"); useEffect(() => { sayHello(); }); const [number, setNumber] = useState(0); const [anotherNumber, setAnotherNumber] = useState(0); return ( Hello set..
[React] React Hooks (3) - useTabs
2023. 1. 26. 20:55
프로그래밍/React
useTabs 버튼에 따라 노출되는 내용을 변화시킬 수 있는 custom hook useTabs 사용 예시 import React, { useState } from "react"; import ReactDOM from "react-dom"; const content = [ { tab: "Secton 1", content: "I'm the content of the Section 1" }, { tab: "Secton 2", content: "I'm the content of the Section 2" }, ]; const useTabs = (initialTab, allTabs) => { if(!allTabs || Array.isArray(allTabs)) { return; } const [currentIn..
[React] React Hooks (2) - useInput
2023. 1. 25. 20:21
프로그래밍/React
useInput useInput은 기본적으로 input을 업데이트함 useInput 사용 예시 import React, { useState } from "react"; import ReactDOM from "react-dom"; const useInput = initialValue => { const [value, setValue] = useState(initialValue); const onChange = event => { const { target: { value } } = event; setValue(value); }; return { value, onChange }; }; const App = () => { const name = useInput("Mr."); return ( Hello ); }..
[React] React Hooks (1) - useState
2023. 1. 20. 20:10
프로그래밍/React
Hooks를 사용하여 증가, 감소 버튼 만들기 hooks를 사용한 예시(함수형 컴포넌트) import React, { useState } from "react"; import ReactDOM from "react-dom"; const App = () => { const [item, setItem] = useState(1); const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item - 1); return ( Hooks test {item} Press the button Increment Decrement ); }; const rootElement = document.getElementById("root");..
[React] Hooks란?
2023. 1. 19. 20:57
프로그래밍/React
Hooks React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리 hook은 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있도록 함 결론적으로 functional component에서 state를 가질 수 있게 해줌 class component state 예시 class App extends Component { state = { count: 0 }; modify = n => { this.setState({ count: n }); }; render() { const { count } = this.state; return ( {count} ..