ref - DOM 직접 접근 장치

ref를 사용해야될때

• 특정 요소에 포커스 주기
• 스크롤 위치 조작
• canvas, video 같은 DOM API 사용
• 외부 라이브러리(Swiper, Chart.js 등) 사용시

 

1. DOM 요소 참조용 ref

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>포커스</button>
    </>
  );
}

inputRef.current 는 랜더링이 발생되도 유지가되며

컴포넌트가 처음 랜더링된 이후에 DOM이 생성되고 난뒤에 참조된다.

current 안에 실제 DOM노드가 들어있다.

 

2. 값을 저장하는 ref

• state 와 달리 ref에 저장된 값은 변경되어도 리랜더링을 유발시키지 않는다.
• 랜더 사이에도 값이 유지된다.

const countRef = useRef(0);

function increment() {
  countRef.current += 1;
  console.log(countRef.current);
}

 

 

ref가 동작되는 방식

// Inside of React
function useRef(initialValue) {
  const [ref, unused] = useState({ current: initialValue });
  return ref;
}

 

useRef 도 useState를 사용하지만 setter 부분이 unsed로 되어있다. 즉 setter 가 없는 일반적인 state 변수로 볼수있다.

데이터가 저장되는 형태는 { current: 저장값 }

 

Ref vs State 

Ref	State
useRef(initialValue) 는 { current: initialValue }를 반환합니다.	useState(initialValue)는 State 변수의 현재 값과 Setter 함수 [value, setValue]를 반환합니다.
current 값을 바꿔도 리렌더링 하지 않습니다.	State를 바꾸면 리렌더링 합니다.
Mutable: 렌더링 프로세스 외부에서 current 값을 수정 및 업데이트할 수 있습니다.	Immutable: State를 수정하기 위해서는 State 설정 함수를 반드시 사용하여 리렌더링 대기열에 넣어야 합니다.
렌더링 중에는 current 값을 읽거나 쓰면 안 됩니다.	언제든지 State를 읽을 수 있습니다. 그러나 각 렌더링마다 변경되지 않는 자체적인 State의 Snapshot이 있습니다.

 

Mutable

• 유동적
• 참조타입
• 데이터 주소를 찾아 값을 변경
• 데이터 추적 불가

const obj = { a: 1 };
obj.a = 2; // 같은 객체의 내부 값을 변경 (Mutable)
//원본도 같고 새로 할당받는 값도 같아서 변경 감지가 어려움

 

Immutable

• 불변성
• 원시타입
• 해당 데이터 주소와 별개로 새로운 메모리 주소에 할당
• 데이터 흐름 예측 가능

const obj = { a: 1 };
const newObj = { ...obj, a: 2 }; // 새로운 객체 생성 (Immutable)
// 주소(참조) 가 달라져서 변경을 감지 -> 리 랜더링