// useConfirm.js const useConfirm = (message = "", onConfirm, onCancel) => { if (!onConfirm || typeof onConfirm !== "function") { return; } if (onCancel && typeof onCancel !== "function") { return; } const confirmAction = () => { if (window.confirm(message)) { onConfirm(); } else { onCancel(); } }; return confirmAction; }; export default useConfirm; // index.js import React from "react"; import ..

// useClick.js import { useEffect, useRef } from "react"; const useClick = (onClick) => { const ref = useRef(); console.log(ref); useEffect(() => { const element = ref.current; if (element) { element.addEventListener("click", onClick); } return () => { if (element) { element.removeEventListener("click", onClick); } }; }, [onClick]); return ref; }; export default useClick; // index.js import Reac..

useRef는 자바스크립에서 getElementById()를 하는것과 같은 기능입니다. 아래 예제에서는 input에 2초후에 focus가 가도록 하는 코드입니다. 사용할 태그내에서 ref={ }를 사용해서 useRef()를 통해 받은 값을 넣습니다. 그리고 그 값을 이용해서 해당 태그에 접근할 수 있습니다. import React, {useRef} from "react"; const App = () => { const input = useRef(); setTimeout(() => input.current.focus(), 2000); return ( ) const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

// useTitle.js import { useState, useEffect } from "react"; const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle);// 입력받은 파라미터로 초기값 설정 const updateTitle = () => {// title 변경 함수 const htmlTitle = document.querySelector("title"); // 태그 찾기 htmlTitle.innerText = title;// 태그에 변수 title값을 넣음 }; useEffect(updateTitle, [title]);// title 값이 바뀔 때마다 title 변경 함수 실행 return setT..

// useTabs import { useState } from "react"; const useTabs = (initialTab, allTabs) => { const [currentIndex, setCurrentIndex] = useState(initialTab); if (!allTabs || !Array.isArray(allTabs)) {// 값이 없거나 배열이 아닌 경우 리턴 return; } return { currentItem: allTabs[currentIndex],// 두번째 파라미터의 배열 n번 인덱스 값 반환 changeItem: setCurrentIndex, // 해당 함수를 통해 n번 인덱스 수정 }; }; export default useTabs; // index.js import ..

// useInput.js import { useState } from "react"; const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue);// 첫번째 파라미터로 받은 값을 value에 입력 const onChange = (event) => {// 값이 변경된 경우 const {// 이벤트 객체에 담겨있는 현재의 텍스트 값을 value에 저장 target: { value }, } = event; let willUpdate = true; if (typeof validator === "function") {// 두번째 파라미터로 받은 값이 함수인 경우 willUpdate = validat..

useState란? 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hooks의 기능 import React, { useState } from "react"; const [item, setItem] = useState("Hi"); console.log(item); setItem("Hello"); console.log(item); // Hi // Hello 다음과 같은 형식으로 useState를 사용합니다. const [ a, b ] = useState(c); a - 해당 변수 b - 해당 변수를 수정할 때 사용 c - default값

code : github.com/J3SUNG/react_game J3SUNG/react_game Contribute to J3SUNG/react_game development by creating an account on GitHub. github.com site : j3sung.github.io/react_game/#/ Game Center j3sung.github.io React를 사용해서 다양한 웹게임을 제작한 사이트입니다. [구구단, 끝말잇기, 숫자야구, 반응속도 테스트, 가위바위보, 로또 생성기, 틱택토]