useref2 리액트 useRef(2) 변수관리 useRef는 DOM을 선택하는 기능뿐만 아니라, 리랜더링되어도 초기화되지 않는 변수를 관리할 수 있습니다. 이러한 특징을 이용해 스톱워치를 만들어 보겠습니다. 1) 선언 function StopWatch(){ //ref 객체 const timeRef = useRef(null); //start 작동 여부 판별할 state const [isStartOperation,setIsStartOperation]=useState(false); //경과 시간 state const [count,setCount]=useState(0); 시간 증가와 관련있는 timeRef를 useRef를 이용해 선언합니다. start 버튼 클릭 여부를 판별할 isStartOperation을 false로 초기화하고, 경과된 시간을 표시하기 .. 2022. 5. 10. 리액트 useRef(1) DOM 선택 React에서 특정 DOM(Document Object Model)을 선택하고 싶을 때 useRef를 이용할 수 있습니다. 다음 예제에서는 리셋 버튼을 누르면 포커스가 이름 input으로 이동하도록 할 것입니다. 1) 객체 생성 import React from "react"; import { useState,useRef } from "react"; function Func(){ //선언 const [inputs, setInputs]=useState({ nickname : '', name : '' }); //값 추출 const {name,nickname} = inputs; //ref 선언 const nameInput = useRef(); nameInput이라는 ref 객체를 생성합니다. 2) 기능 부여 /.. 2022. 5. 7. 이전 1 다음 반응형
