useRef

• 컴포넌트가 다시 렌더링되더라도 기존 상태값을 유지하는 변수를 생성
• 함수 내부에 정의하는 지역 변수는 컴포넌트가 다시 렌더링되면(함수 재호출) 값이 초기화 됨
• useState는 값이 변경되면 컴포넌트가 다시 렌더링되지만 useRef는 값이 변경되어도 컴포넌트가 다시 렌더링되지 않음
• JSX 태그에 ref 속성을 추가하면 브라우저 DOM 엘리먼트에 직접 접근 가능
  • 포커스, 미디어 재생, 애니메이션 실행 등과 같은 작업은 UseRef를 사용해 브라우저 DOM에 직접 접근하여 제어해야 함

<input ref={ stepElem } // 이런 식으로 속성에 직접 추가하여 DOM 엘리먼트에 접근
				defaultValue="1" // defaultValue 속성으로 초기값 지정
			onChange={ (e) => stepRef.current = Number(e.target.value) } /> // ref 객체의 current에 저장

const ref = useRef(initialValue);

매개변수

• initiailValue : 초기값

리턴값

• current라는 상태값 또는 DOM 요소가 있는 속성 하나가 정의된 객체

  // 1. 값이 변경 되면 변경된 값을 유지하면서 리렌더링이 발생하지 않음
  const stepRef = useRef(1); // { current: 1 } 객체를 반환

  // 2. DOM 객체에 대한 직접 참조를 사용할 때
  const stepElem = useRef<HTMLInputElement>(null); // { current: null } 객체를 반환
  
const handleReset = () => {
    setCount(initCount);
// step input 요소에 포커스 지정
// const stepElem = document.querySelector('#step') as HTMLInputElement;

    stepElem.current?.focus(); // stepElem가 반환하는 객체의 current 속성으로 접근
  };

→ 폼 제출 시에만 값이 필요한 경우와 같이 입력값으로 UI를 변경하지 않아도 될 때 useState대신 useRef를 쓰면 오버 헤드를 줄이고 성능 낭비를 줄일 수 있다.

UseState VS UseRef

• input 값이 변경되는 즉시 리렌더링 되어야 할 때 → UseState (리액트에서 직접 상태관리를 하는 제어 컴포넌트를 구현)
• input 값이 변경 되어도 리렌더링 될 필요가 없을 때 → UseRef (브라우저에서 입력값을 관리하는 비제어 컴포넌트를 구현)