useRef란?

특정 DOM을 선택할때 사용되거나 컴포넌트가 리렌더링 될 때마다 계속 기억되야할 어떤 값을 관리할 때 사용됨

가져올 요소에 ref를 통하여 useRef와 연결하면 됨

const 변수 = useRef(기본값);

특정 DOM 선택

• 예제 (특정 DOM 선택)
  버튼 클릭시 input에 focus가 되도록 하는 코드

  // useRef 불러오기
  import React, { useState, useRef } from "react";
  
    // useRef 객체를 만들어줌
    const nameInput = useRef();
  
    const { name, nickname } = inputs;
  
    const onReset = () => {
      setInputs({
        name: "",
        nickname: "",
      });
      // current는 선택하는 DOM을 가르킴
      nameInput.current.focus();
    };
  
    return (
      <div>
        <input
          placeholder="이름"
          value={name}
          ref={nameInput} // 선택하고 싶은 DOM에 ref 값을 설정해줌
        />
        <button onClick={onReset}>초기화</button>
        <div>
          <b>값: </b>
          {name} ({nickname})
        </div>
      </div>
    );
  }
  
  export default InputSample;
  

컴포넌트 안의 변수 관리

컴포넌트가 리렌더링 될 때마다 계속 기억되야할 어떤 값을 관리하며,
useRef로 관리되는 변수는 값이 바뀐다해서 컴포넌트가 리렌더링 되지 않음(굳이 리렌더링 할 필요가 없다면 useRef로 변수를 관리해주는 것이 좋음)

• 주로 사용되는 곳

  • scroll 위치
  • 배열에 새 항목을 추가할 때 필요한 고유한 key 값
  • setTimeout, setInterval을 통해 만들어진 id

• 예제

  import React, { useRef } from "react";
  
  // 계속 변경사항을 유지하는 값
  // 변수 = useRef(기본값)
  const nextId = useRef(4); // 기본값으로 4를 넣어주면 해당 값이 변수의 current가 도미
  
  const users = [
    {
      id: 1,
      username: kaen,
      email: "kusdsuna@naver.com",
    },
    {
      id: 2,
      username: blabla,
      email: "muYatHo",
    },
    {
      id: 3,
      username: muhan,
      email: "gmankyumSinna",
    },
  ];
  
  const onCreate = () => {
    const user = {
      id: nextId.current, // 기본값은 4였어요! 기억하세요!!
      username,
      email,
    };
  
    setUsers([...users, user]); // 기존 항목을 복사해서 user라는 새항목에 넣어줌
  
    // nextId를 1씩 증가. 즉 기본값인 4에서 onCreate함수가 호출될때마다 1씩증가
    nextId.current += 1;
  };
  
  export default App;