useRef

useRef

const ref = useRef(value)

함수형 컴포넌트에서 useRef를 사용하면 ref Obejct를 반환해준다.

//ref Object
{current: value}

// 예시
const ref = useRef("hi")
{current: "hi"}

const ref = useRef("hello")
{current: "hello"}

const ref = useRef("nice")
{current: "nice"}

우리가 저장하는 값은 current로 저장이 된다.
ref Object는 수정이 가능하다.
반환된 ref는 컴포넌트의 전 생애 주기 동안 유지가 된다. → 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 unmount 되기 전까지 값을 그대로 유지한다.
useRef는 값이 변화해도 컴포넌트를 랜더링 시키지 않는다.
- 렌더링을 유발하지 않는다.
  - React의 여러 리렌더링 원인에 useRef().current의 변경은 포함되지 않는다. 즉, useRef 값이 변경될 때 ref는 React에게 해당 값의 변경을 알려주지 않는다.
  - 만약 useRef 값의 변경에 따라 특정 로직을 수행하고 싶다면, ref 대신 상태 값을 사용하거나, useEffect의 dependency array 내부에서 해당 ref를 참조할 수 있게 해야 한다.
각 렌더링에서 참조하는 값을 동일한 값으로 유지한다.

useRef - 사용, 용도

state와 비슷하게 값을 저장하는 공간이다.

state의 변화 → 컴포넌트 랜더링 → 컴포넌트 내부 변수들 초기화(리랜더링 될 때마다, 함수형 컴포넌트가 다시 호출됨.), Ref의 값은 유지됨.
ref의 변화 → No 랜더링 → 변수들의 값이 유지됨.
state의 변화 → 랜더링 → 그래도 ref의 값은 유지 된다.

DOM 요소에 접근

DOM을 조작할 때 사용할 수 있다.
React에서 vanilla js, jquery와 같이 명시적으로 DOM을 조작하는 경우는 많지 않다.
React는 명령형(imperative) 프로그래밍이 아닌 선언형(declarative) 프로그래밍을 지향하기 때문이다.
따라서 상태 값의 변경에 따라 UI를 변경하게 하는 것이 일반적이다.
예시
- input 요소에 focus()를 줄 수 있다. → Document.querySelector()
- component 렌더링 시 자동으로 input 창에 포커싱이 가게 하는 경우
```
const ref = useRef(value)

<input ref={ref} />
```
```
function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}
```
- 포커스, 텍스트 선택 영역, 혹은 미디어의 재생을 관리할 때.
- 애니메이션을 직접적으로 실행시킬 때.
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.