useRef

useRef: 공식문서

React 에서 useRef 를 사용하는 경우 : useRef는 리렌더링 하지 않는다, 컴포넌트의 속성만 조회& 수정
즉, DOM혹은 React elements에 접근해야할때, 리렌더링 일어나지 않는 변수를 원할때!

class형 컴포넌트 createRef()

class형 컴포넌트에는 createRef() 메서드를 이용해 특정 태그에 접근가능!

//메서드 임폴트
import {createRef} from 'react'

// Ref코드 생성
inputRef = createRef()

// Ref를 적용하고싶은 input태그(=접근하고싶은 태그)
<input type="text" ref={this.inputRef}/>

//태그에 접근해서 실행시킬 함수
componentDidMout(){
		console.log("마운트 됨")
		this.inputRef.current?.focus()
	}

함수형 컴포넌트 useRef()

함수형 컴포넌트에서는 useRef 훅을 이용해 특정태그에 접근가능!

// 훅 임폴트
import {useRef} from 'react'

//Ref코드 생성
const inputRef = useRef()

// Ref를 적용하고 싶은 input태그(=접근하고 싶은 태그)
<input type="text" ref={inputRef}/>

//태그에 접근해서 실행시킬 함수 _ useEffect참고는 바로 아래에서!
useEffect(()=>{
		console.log("마운트 됨")
		inputRef.current?.focus()
	})

---

속성값을 초기화할 필요가 있는 경우

카운터의 값을 0으로 초기화 할 필요가 있을 때(타이머 0으로 초기화)
setInerval 이나 setTimeout 과 같은 함수는 clear 시켜주지 않으면 계속 돌아가서 메모리를 많이 소모한다.

const RSPfunction = () => {
  const [result, setResult] = useState('');
  const [imgCoord, setImgCoord] = useState(rspCoords.bye);
  const [score, setScore] = useState(0);
  const interval = useRef();

  useEffect(() => { 
    interval.current = setInterval(changeHand, 100);
    return () => {
      clearInterval(interval.current);
    }
  }, [imgCoord]); 

useRef로 컴포넌트 안의 변수 관리

컴포넌트의 속성정보를 조회 수정할때 (리렌더링을 하기 싫을때..)
useRef를 활용한 변수

import React, { useState, useRef } from "react";

function ManualCounter() {
  const [count, setCount] = useState(0);
  const intervalId = useRef(null);

  const startCounter = () => {
    intervalId.current = setInterval(
      () => setCount((count) => count + 1),
      1000
    );
  };

  const stopCounter = () => {
    clearInterval(intervalId.current);
  };

  return (
    <>
      <p>자동 카운트: {count}</p>
      <button onClick={startCounter}>시작</button>
      <button onClick={stopCounter}>정지</button>
    </>
  );
}

useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당함.
current 속성은 값을 변경해도 상태를 변경할 때처럼 React 컴포넌트가 다시 렌더링 되지 않는다.
React 컴포넌트가 다시 렌더링될 때도 마찬가지로 이 current 속성에 값이 없어 지지 않는다!

만약 interval 함수를 담을 변수를 ref의 current로 지정해주지 않으면 state가 별할때마다 리렌더링 되면서 새로운 interval들이 실행되게 될 것!
그래서 useRef를 사용한 것