useRef

함수형 컴포넌트에서 DOM 요소를 직접 제어하기 위해서 사용
ref 속성(attribute)와 useRef 훅을 사용해 HTML DOM 노드와 JavaScript 코드를 연결
useRef 훅은 current 프로퍼티를 가지는 객체를 반환

useRef 활용

• 숫자를 입력할 수 있는 입력창과 입력한 숫자를 등록하는 버튼
• 숫자를 입력하면 입력한 숫자가 표시되고, 등록 버튼을 클릭하면 등록된 숫자들을 리스트로 출력하고 입력창에 내용을 지우고 포커스를 이동

import { useState } from "react";

const Average = () => {
  const [number, setNumber] = useState("");
  const [list, setList] = useState([]);

  const changeNumber = (e) => setNumber(e.target.value);

  const addList = () => {
    const newList = list.concat(number);
    setNumber("");
    setList(newList);
  };
  return (
    <>
      <input type="number" value={number} onChange={changeNumber} />
      <button onClick={addList}>등록</button>
      <p>입력값:{number}</p>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </>
  );
};
export default Average;

useRef 이용해서 포커스 주기

  const refNumber = useRef();
  //const refNumber=React.createRef();

직접 접근할 DOM 요소에 추가

등록 버튼을 누르면 입력창에 포커스가 가도록

타이머 조작 예제

시작 버튼을 누르면 1초마다 카운트가 증가하고 중지 버튼을 누르면 멈추도록

상태변수 이용하는방법

const CounterWithState = () => {
  const [count, setCount] = useState(0);
  const [intervalID, setIntervalID] = useState(0);

  console.log(`렌더링 시작 count:${count}, intervalId:${intervalID}`);

  const startCounter = () => {
    const id = setInterval(() => { setCount((count) => count + 1);}, 1000); //1초 단위로 호출되어서 카운트 증가함
    setIntervalID(id);
    console.log(`카운터 시작 intervalId:${intervalID}`);
  };

  const stopCounter = () => {
    clearInterval(intervalID);
    console.log(`카운터 정지 intervalId:${intervalID}`);
  };
  return (
    <>
      <p>카운트:{count}</p>
      <button onClick={startCounter}>시작</button>
      <button onClick={stopCounter}>중지</button>
    </>
  );
};

setInterval(() => { setCount((count) => count + 1);}, 1000);
1000 ms 마다 {} 안의 함수를 호출함
clearInterval(intervalID); 로 종료

ref 이용하는 방법

const CounterWithRef = () => {
  const [count, setCount] = useState(0);
  const intervalID=useRef(0);

  console.log(`렌더링 시작 count:${count}, intervalId:${intervalID.current}`);

  const startCounter = () => {
    intervalID.current = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000); //1초 단위로 호출되어서 카운트 증가함
    console.log(`카운터 시작 intervalId:${intervalID.current}`);
    //intervalId가 렌더링되더라도 초기화 되지 않게 계속 유지해줘야함
  };

  const stopCounter = () => {
    clearInterval(intervalID.current);
    console.log(`카운터 정지 intervalId:${intervalID.current}`);
  };