(React) useRef

초기값을 지정할 수도 없을 수도 있음.

useRef() 를 호출하면 ref 오브젝트를 반환, 오브젝트는 유일한 프로퍼티 current 를 가지며 값을 참조 변경 할 수 있다.

import { useRef } from 'react'; function MyComponent() {   const intervalRef = useRef(0);   const inputRef = useRef(null);   // ...

  

 

용도

1. state와 달리 재렌더링은 유발하지 않고 단순히 변화된 값만 저장하고 싶을 경우

return () 내에서의 사용은 자제해고 단순히 이벤트 함수내에서 값을 변경.

import { useRef } from 'react'; export default function Counter() {      let ref = useRef(0);      function handleClick() {           ref.current = ref.current + 1;           alert('You clicked ' + ref.current + ' times!');      }      return (            <button onClick={handleClick}> Click me! </button>      ); }

 

단순히 타이머의 START STOP 시에 타이머를 저장.

const intervalRef = useRef(null);   function handleStart() {        setStartTime(Date.now());        setNow(Date.now());        clearInterval(intervalRef.current);        intervalRef.current = setInterval(() => {              setNow(Date.now());        }, 10);   }   function handleStop() {         clearInterval(intervalRef.current);   }   let secondsPassed = 0;   if (startTime != null && now != null) {         secondsPassed = (now - startTime) / 1000;   }

 

2. DOM 참조

반드시 null 초기

const inputRef = useRef(null);

 

DOM node 의 JSX 의 ref attribute 에 inputRef 를 지정

return <input ref={inputRef} />;

 

어느곳에서 handleClick() 함수를 호줄시에 input 에 포컷스를 둠

function handleClick() {        inputRef.current.focus();   }

 

3. 주의점

커스텀 컴포넌트에는 사용하지 않을것

return <MyInput ref={inputRef} />;