[React] useRef

• 이번 글에서는 useRef에 대해서 이야기해보겠습니다.

 

useRef

1) 역할

• useRef hook은 Component의 생명주기 동안 지속되는 가변값을 저장하는 데 사용됩니다.
• 주로 JSX 요소에 ref 속성으로 연결하여 해당 DOM 요소에 직접 접근할 수 있게 하거나, 이전 상태를 기억하는 등의 용도로 사용됩니다.

2) 동작 방식

1. 초기화
   • useRef(initialValue)를 호출하여 ref 객체를 생성합니다.
   • 반환된 객체는 { current: initialValue } 형태를 가집니다.
2. 값 접근 및 수정
   • ref.current를 통해 현재 값에 접근하거나 수정할 수 있습니다.
   • current 속성은 변경 가능(mutable)합니다.
3. Rendering의 독립성
   • useState hook와 달리 ref.current의 값이 변경되어도 component는 re-rendering되지 않습니다.
4. 지속성
   • ref 객체는 component의 전체 생명주기 동안 동일한 객체 참조를 유지합니다.
   • component가 re-rendering되어도 ref 객체는 새로 생성되지 않습니다.
5. DOM 연결
   • JSX 요소의 ref 속성에 ref 객체를 할당하면, 해당 요소가 DOM에 마운트될 때 ref.current에 DOM 요소가 할당됩니다.
   • component가 unmount될 때 ref.current는 다시 null 값이 됩니다.
6. 비동기 안정성
   • useRef는 setState와 달리 항상 동일한 객체를 참조하므로, 비동기 컨텍스트에서도 안정적으로 최신 값을 참조할 수 있습니다.
7. 성능 최적화
   • 자주 변경되지만 rendering에 영향을 주지 않아야 하는 값을 저장할 때 useRef를 사용하면 불필요한 re-rendering을 방지할 수 있습니다.
8. clean-up
   • useEffect의 clean-up function에서 ref.current에 저장된 값(예: 타이머 ID)을 사용하여 리소스를 정리할 수 있습니다.

3) 간단한 예시 몇 가지!

• input DOM 요소에 직접 접근하기

import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    // component가 마운트된 후 input에 포커스
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

 

• 이전 상태 값 기억하기

const Useref: React.FC = () => {
  // useState를 사용하여 현재 카운트 상태를 관리
  // 첫 번째 요소 count는 현재 상태 값, 두 번째 요소 setCount는 상태 갱신 함수
  const [count, setCount] = useState(0);

  // useRef를 사용하여 이전 카운트 값을 저장할 변수 생성
  // useRef는 변경 가능한 .current 속성을 가진 객체를 반환
  // 이 객체는 component의 전체 생명주기 동안 유지됨
  const prevCountRef = useRef<number | undefined>(undefined);

  // useEffect를 사용하여 count가 변경될 때마다 실행될 side effect를 정의
  useEffect(() => {
    // 현재 count 값을 prevCountRef.current에 저장
    // 이 작업은 rendering 이후에 수행되므로, 항상 "이전" 값을 저장하게 됨
    prevCountRef.current = count;
  }, [count]); // count가 변경될 때마다 이 효과를 실행

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  // prevCountRef.current 값을 별도의 변수에 저장
  // 이는 JSX에서 직접 .current를 참조하는 것을 피하기 위함
  const prevCount = prevCountRef.current;

  return (
    <Container>
      <Title>useRef로 이전 상태 기억하기</Title>
      <Content>
        <Text>현재 카운트: {count}</Text>
        <Text>
          이전 카운트:{" "}
          {prevCount !== undefined
            ? prevCount
            : "증가 버튼을 누르면 갱신됩니다!"}
        </Text>
        <Button onClick={increment}>증가</Button>
      </Content>
    </Container>
  );
};

export default Useref;

• React의 선언적 패러다임을 해치지 않으면서도, 필요한 경우 명령형 코드를 안전하게 사용할 수 있게 해주는 useRef는 복잡한 상호작용이나 최적화가 필요한 상황에서 큰 도움이 됩니다.
• 다음 글에서는 useCallback에 대해서 알아보겠습니다.