728x90 코딩16 [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useClick 노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다. nomadcoders.co/ [예제 코드] import { StrictMode, useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; const App = () => { const potato = useRef(); setTimeout(() => console.log(potato.current), 5000) return ( Hi ); }; const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); [강의 설명] reference는 document.getElementbyI.. 2021. 4. 28. [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useTitle 노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다. nomadcoders.co/ 다음은 useEffect를 이용한 Hooks인 useTitle이다. [예제 코드] import { StrictMode, useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerText = title; }; useEf.. 2021. 4. 28. [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useEffect 노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다. nomadcoders.co/ 노마드 코더의 실전형 리액트 Hooks 10개 강의를 듣던중 useState는 상대적으로 쉬운 반면에 useEffect부분부터는 조금 복잡하고 어려운 것 같아 블로그에 강의를 정리해서 남기기로 했다. [예제 코드] import { StrictMode, useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; const App = () => { const sayHello = () => console.log("hello"); const [number, setNumber] = useState(0); const [aNumber, setAnum.. 2021. 4. 28. [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useConfirm 노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다. nomadcoders.co/ [예제 코드] import { StrictMode, useEffect } from "react"; import ReactDOM from "react-dom"; const useConfirm = (message = "", callback, rejection) => { if (typeof callback !== "function") { return; } const confirmAction = () => { if (confirm(message)) { callback(); } else { rejection(); } }; return confirmAction; }; const App = () => { const deleteW.. 2021. 4. 28. 이전 1 2 3 4 다음 728x90