[React] uesRef 사용법

useRef 란 리액트 Hooks 중의 하나로 useState나 useEffect 만큼 자주 사용되는 훅은 아니지만, 보다 심도 있는 react 코딩을 위해서는 알아두는 것이 좋은 hooks 입니다. useRef의 주 기능은 기존 바닐라 자바스크립트에서 특정 DOM을 사용하던 것처럼 특정 엘리먼트의 속성을 활용하는 것입니다.

 

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

//출처: react 공식문서

 

위의 코드는 useRef를 통해서 input태그에 focus를 주는 코드입니다. useRef를 쓰면 .current 라는 객체에 ref로 지정한 엘리먼트의 DOM값을 확인할 수 있고 조종할 수 있습니다. 

 

또한 useRef의 두 번째 사용법은 특정 변수를 담는 그릇으로 활용하는 것입니다. useRef로 변수를 관리하게 되면 그 변수가 업데이트 된다고 해서 컴포넌트가 리렌더링 되지 않는다는 특징이 있습니다. 이것을 활용해서 굳이 리렌더링ㅎ ㅏㄹ 필요가 없는 변수의 경우는 useRef로 관리해주는 것이 효율적이라고 할 수 있습니다. 

 

ㅗ보통 useRef를 변수로 활용하는 경우는 다음과 같습니다.

 

- setTimeout, setInterval을 통해 만들어진 id

- scroll 위치

- 배열에 새 항목을 추가할 때 필요한 고유값 key

 

const test = () => {
	const [result, setResult] = useState('');
    const [imgCoord, setImgCoord] = useState(rspCoords.바위);
    const [score, setScore] = useState(0);
    const inverval = useRef();
    
    useEffect(()=> {
    	interval.current = setInterval(changeHand, 100);
        return () => {
        	clearInterval(interval.current);
        }
     }, [imgCoord]);
     
     //	코드 생략
     
     //출처: https://xiubindev.tistory.com/98

위의 코드는 컴포넌트가 마운트 될 때 interval이라는 useRef에 변수를 담아서 setInterval 함수를 실행시킨 후에, 언마운트 될 때, 해당 함수를 clearInterval하는 코드입니다. 위의 예시 외에도 다양한 방식을 통해 변수를 저장하는 저장소로서의 역할을 할 수 있는 useRef Hook을 잘 활용한다면, 보다 좋은 코드를 짤 수 있게 될 것입니다.