useRef란 무엇인가?

📖 useRef

💬 정의

useRef는 .current 프로퍼티로 전달된 인자 (initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애 주기를 통해 유지될 것이다
-React 공식문서

• 어떠한 특정 DOM을 선택할 수 있게 해주는 hook

💬 용도

• 주로 사이트 이펙트로 특정 DOM에 포커스를 주거나 크기나 색상이 변경할 때 사용

import React, { useState, useRef } from "react";
import "./styles.css";

const App = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  const onChangename = (e) => {
    setName(e.target.value);
  };
  const onChangenickname = (e) => {
    setNickname(e.target.value);
  };
  // useRef 객체 생성
  const ref = useRef();

  const onClickReset = () => {
    setName("");
    setNickname("");
    // 버튼 클릭시 지정한 위치에 focus 되도록
    ref.current.focus();
  };

  return (
    <div>
      {/* 원하는 위치에 ref 값 설정한다 */}
      <input value={name} onChange={onChangename} ref={ref} />

      <input value={nickname} onChange={onChangenickname} />
      <button onClick={onClickReset}>RESET</button>
      <div>
        <h3>결과</h3>
        <h4>
          {name} 의 별명은 {nickname} 입니다.
        </h4>
      </div>
    </div>
  );
};

export default App;

• 컴포넌트 내의 조회/수정이 가능하지만 리렌더링이 필요없는 변수를 관리할 때
  1. 주로 setTimeout, setInterval등 타이머 함수를 관리할때
  2. scroll의 위치 확인등
  3. let으로 선언하면 되지않냐고 생각할 수 있지만 let으로 선언 시
     리렌더링될 때마다 초기화한 값으로 다시 돌아감

import React, {useRef} from 'react';
import UserList from './UserList';

const App = () => {
  const users = [
    {
      id:1,
      name: '홍길동'
    },
    {
      id:2,
      name: '우영우'
    },
    {
      id:3,
      name: '꼬부기'
    }
  ];

  const nextId = useRef(4);
  const onCreate = () => {
    // 배열에 항목 추가하는 부분 생략
    nextId.current += 1; 
  };
  return <UserList users={users}/>;
}

export default App;

💡 답변

useRef에 대해 설명해보세요

특정한 DOM을 선택할 수 있게끔 해주는 hook입니다.
React에서 간혹 사이드이펙트로 element의 색상이나 크기를 변동하던가
포커스를 주는 등  DOM을 직접 접근해서 조작할 때 사용합니다.
또다른 사용방식으로는 컴포넌트 내의 조회/수정이 가능하지만
리렌더링이 필요없는 변수를 관리할 때 사용하기도 합니다.