---

useRef

• getElementById, querySelector 등과 같이 DOM Selector를 React에서 사용하고자 할 때 이용.
• 클래스형 컴포넌트에서는 콜백함수 또는 React.createRef 사용.
• 함수형 컴포넌트에서는 useRef() 로 Ref 객체를 만들고 선택하고 싶은 DOM에 ref 값으로 설정.
• Ref 객체의 .current 가 그 DOM을 의미함.

import React, { useEffect, useRef } from 'react';

function InputSample() {
  const nameInput = useRef();
  // 첫 로딩때 해당 돔 focus.
  useEffect(() => {
    nameInput.current.focus();
  }, []);
  return (
    <>
      <input ref={nameInput} />
    </>
  );
}

export default InputSample;

리렌더링이 없는 변수

• state 는 값이 변하면 컴포넌트가 리렌더링 됨. 즉, 리렌더링이 필요한 변수를 담을 때 사용.
• ref 는 리렌더링이 필요하지 않은 변수를 담을 때 사용.
• 예를 들면 setTimeout, setInterval 의 id 또는 외부라이브러리를 사용하여 생성된 인스턴스, Scroll 위치 등.

import { useRef } from 'react';

function App() {
  const users = [
    { id: 1, username: 'velopert', email: 'djfoi@nave.kc' },
    { id: 2, username: 'sdert', email: 'sdi@nave.kc' },
    { id: 3, username: 'aswrt', email: 'foi@nssse.kc' },
  ];
  const nextId = useRef(4);
  const onCreate = () => {
    // state와 다르게 바로 수정 접근 가능.
    nextId.current += 1;
  };

  return <UserList users={users}></UserList>;
}

export default App;

---