IwannabeRealnerD

Develog

useRef vs useState

IwannabeRealnerD

useRef vs useState

글 분류

sub

키워드

react

생성일

2023/03/15 03:49

최근 수정일

2023/11/01 23:50

작성중

ref로 DOM 참조했는데 null이…

TL;DR

리액트에서 렌더링 되어야할, 렌더링 시 사용되지 않는 값들을 사용하는 escape hatch

기본

const ref = useRef(0);
console.log(ref) // { current:0 }
TypeScript
복사

•

렌더링을 유발 시키고 싶지는 않고 근데 렌더링간 정보는 잃고 싶지 않을 때 사용하는 것.

•

mutable, 맘대로 수정하고 불러오기가 가능하다. → 리액트에서는 ref의 변화를 감지하지 않으므로 immutable일 필요가 없다.

•

반대로 화면에 보여야할, 렌더해야할 정보인 경우에는 state로 보존한다.

렌더링 도중에는 건들지 마라

•

렌더링 과정중에 필요한 정보일 경우 state에 보존키는게 맞음 → ref.current가 언제 바뀌는지 리액트는 모르므로 렌더링 도중에 변경하는 로직을 생성할 경우 예상치 않은 행동을 유발한다.

•

리액트는 ref에 대해 신경 쓰지 않는다. 일반 자바스크립트 객체라고 생각해야한다.

DOM

•

리액트는 기본적으로 렌더 결과물을 DOM에 업데이트한다. → 결과적으로 개발자가 실제로 DOM을 조작하는 경우는 매우 드물지만 꼭 필요한 케이스가 존재할 경우 ref를 사용한다.

◦

포커스, 스크롤, 위치 계산

•

당연하게도 다른 컴포넌트의 DOM 노드에 접근할 때 도 사용할 수 있다. → forwardRef 함수

ref로 DOM 참조했는데 null이…

•

리액트는 ref.current를 commit때 설정한다.

•

DOM 업데이트 이전에는 ref.current는 null로 존재한다.

•

DOM 업데이트 이후 리액트는 ref.current는 해당되는 DOM 노드를 참조하고 있다.

•

주로 이벤트 핸들어에서 ref에 접근한다. 근데 ref로 줬는데 접근할만한 이벤트 핸들러가 없다? → useEffect를 사용하자.

ref로는 DOM을 조작하면 안된다?

•

리액트가 DOM에 주는 변화와의 conflict를 만들 수 있다.

•

물론 필요한 경우가 있다. 그럴 때에는 리액트가 state로 관리하지않는 DOM 노드들을 ref로 조작해야 오류를 최소화 할 수 있다.

batching과의 싸움

•

위에 말했듯이 DOM 노드를 ref로 참조 시 현재 스냅샷에서는 ref.current가 null을 가지고 있을 수 있다.

•

거기에 리액트는 state 처리를 batching 한다…. 아? 어찌할까.

function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    setText('');
    setTodos([ ...todos, newTodo]);
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }
TypeScript
복사

•

우리 모두 알다시피 flush를 이용하여 해결 → 일단 state 업데에트 하고 다음 함수 실행시켜!

function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    flushSync(() => {
      setText('');
      setTodos([ ...todos, newTodo]);      
    });
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }
TypeScript
복사

타이머 예시

import { useState, useRef } from 'react';

export default function Stopwatch() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);
  const intervalRef = useRef(null);

  function handleStart() {
    setStartTime(Date.now());
    setNow(Date.now());

    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }

  function handleStop() {
    clearInterval(intervalRef.current);
  }

  let secondsPassed = 0;
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000;
  }

  return (
    <>
      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
      <button onClick={handleStart}>
        Start
      </button>
      <button onClick={handleStop}>
        Stop
      </button>
    </>
  );
}
TypeScript
복사

•

타이머 구현 시 interval ID는 렌더링간에 사라지면 안된다. 렌더링간에 사라진다면 clearInterval을 할 방법이 사라진다. → 이때 Ref가 등장하면 해결할 수 있다.