[TS] RefObject

Jane·2023년 8월 15일

TypeScript

목록 보기

9/17

🌟 RefObject

🦴 RefObject 구조 파악하기

interface RefObject<T> {
  readonly current: T | null;
}

generic T를 받아온다.
current라는 읽기 전용 속성을 가지는데, 이는 T 타입 또는 null 이 될 수 있음
useRef를 사용할 때, 변수명.current로 사용했던 것을 생각해보면 이해하기 쉽다.
만약 current가 null 이라면, 참조된 요소가 아직 생성되지 않았다고 추론 가능하다.

readonly

React에서 ref는 주로 컴포넌트 또는 DOM 요소에 대한 참조를 위해 사용된다.
이 참조는 컴포넌트 렌더링 및 생명 주기에 관련될 수 있으므로 한 번 생성된 후 다른 값이 할당되면 안 된다.
따라서 current 값을 readonly로 선언해줌으로써, 참조가 한 번 생성되면 이후 해당 참조를 변경하지 못하도록 막는다.
또한 컴포넌트 간에 참조를 공유하더라도 의도치 않은 변경을 막을 수 있다.
이를 통해 참조의 불변성과 안정성을 지킬 수 있다!

🗝️ RefObject 사용하기

🤖 TypeScript에서 useRef를 사용하는 방법

값을 저장하고 싶을 때

useState와 다르게 변화할 때마다 리렌더링을 발생시키지 않는 상태를 정의하기 위해 사용하는 경우 사용한다.
.current 프로퍼티를 수정하는 것은 리렌더링을 발생시키기 않기 때문에 로컬 변수 용도로 사용할 수 있다.

const CountWithoutRendering = useRef<number>(0)

const handleCount = () => {
  CountWithoutRendering.current += 1
}

...

return (<><button onClick=(() => handleCount())>ADD</button></>)

이떄의 ref 객체는 React.MutableRefObject 타입이다.

이때의 ref객체.current는 수정이 가능한 값이다.

DOM을 취득하고 싶을 때

const MyInput = useRef<HTMLInputElement>(null);

이때의 Ref 객체 타입이 바로 refObject 타입이다.
인자의 타입이 null을 허용할 경우 반환되는 값이라고 한다.
위의 상황에서 ref의 초기값이 null인 이유는, 아직 화면 렌더링 전이라 return 부분이 실행되지 않아 실제 DOM에 반영되기 전 참조하려 하기 때문이다.
실제로 컴포넌트 함수의 return 부분이 호출되어 DOM에 반영되면 해당 값이 변경된다.