2. React Hook, useRef

1. 변수 관리

const ref = useRef(value)
// {current: value}

ref.current = 'hello';
// {current: 'hello'}

• state 변화 → 렌더링 O → 함수 내부 변수 초기화

• state 변화 → 렌더링 O → ref 값은 유지됨

• ref 변화 → 렌더링 X → 변수들의 값 유지됨

예제

const useRefExample = () => {
  const [renderer, setRenderer] = useState(0);
  const [countState, setCountState] = useState(0);
  const countRef = useRef(0);
  let countVar = 0;
	console.log('렌더링...');
  const IncreaseCountVar = () => {
    countVar += 1;
    console.log(countVar);
  };

  const IncreaseCountState = () => {
    setCountState(countState + 1);
    console.log(countState);
  };

  const IncreaseCountRef = () => {
    countRef.current += 1;
    console.log(countRef.current);
  };

  const doRendering = () => {
    setRenderer(renderer + 1);
  };

  const printResults = () => {
    console.log(`ref: ${countRef.current}, var: ${countVar}`);
  };
  return (
    <div>
      <p>Ref: {countRef.current}</p>
      <p>Var: {countVar}</p>
      <p>State: {countState}</p>
      <button onClick={doRendering}>렌더!</button>
      <button onClick={IncreaseCountState}>State 올려</button>
      <button onClick={IncreaseCountRef}>Ref 올려</button>
      <button onClick={IncreaseCountVar}>Var 올려</button>
      <button onClick={printResults}> Ref Var 값 출력</button>
    </div>
  );
};

export default useRefExample;

2. DOM 접근

const ref = useRef(value)
<input ref={ref}>

// {current: input } -> input의 모든 속성에 접근 가능

예제

const useRefExample = () => {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  const login = () => {
    alert(`환영합니다 ${inputRef.current.value}`);
    inputRef.current.focus();
  };
  return (
    <div>
      <input type="text" placeholder="username" ref={inputRef} />
      <button onClick={login}>로그인</button>
    </div>
  );
};

export default useRefExample;

const inputRef = useRef();

<input type="text" placeholder="username" ref={inputRef} />

useEffect(() => {
  inputRef.current.focus();
}, []);

 const login = () => {
    alert(`환영합니다 ${inputRef.current.value}`);
  };

공식문서 - useRef

문법

useRef(initialValue)

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
  // ...

파라미터

• initialValue: ref 객체의 current속성의 초기값입니다. 모든 유형의 값이 될 수 있습니다. 이 인수는 초기 렌더링 후에 무시됩니다.

반환값

• current: 처음에는 전달한 initialValue로 설정됩니다. 나중엔 다른 것으로 설정할 수 있습니다. React에게 ref 객체를 JSX 노드에 대한 ref 속성으로 전달하면, current 속성을 설정합니다.

주의사항

• ref.current 속성을 변경할 수 있습니다. state와 달리 변경 가능합니다. 그러나 렌더링에 사용되는 객체(예: state의 일부)를 보유하는 경우 해당 객체를 변경하면 안 됩니다.

• ref.current 속성을 변경하면 React는 컴포넌트를 다시 렌더링하지 않습니다. ref는 일반 JavaScript 객체이기 때문에 React는 변경 시점을 인식하지 못합니다.

• 초기화를 제외하고 렌더링 중에 ref.current를 쓰거나 읽지 마세요. 이로 인해 컴포넌트의 동작을 예측할 수 없게 됩니다.

• Strict 모드에서 React는 우발적인 불순물을 찾는 데 도움을 주기 위해 컴포넌트 함수를 두 번 호출합니다. 이는 개발 전용 동작이며 프로덕션에는 영향을 주지 않습니다. 각 ref 개체는 두 번 생성되지만 두 개중 하나는 삭제됩니다. 구성 요소 함수가 순수한 경우(순수해야 함) 동작에 영향을 주지 않아야 합니다.

사용법

ref로 값 참조하기

import { useRef } from 'react';

function Stopwatch() {
  const intervalRef = useRef(0);
  // ...

function handleStartClick() {
  const intervalId = setInterval(() => {
    // ...
  }, 1000);
  intervalRef.current = intervalId;
}

function handleStopClick() {
  const intervalId = intervalRef.current;
  clearInterval(intervalId);
}

• 리렌더링 사이에 정보를 저장할 수 있습니다(렌더링할 때마다 리셋되는 일반 변수와 달리).

• ref를 변경해도 다시 렌더링을 트리거하지 않습니다(다시 렌더링을 트리거하는 state 변수와 달리).

• 정보는 구성 요소의 각 복사본에 로컬로 저장됩니다(외부 변수와 달리 공유됨).

function MyComponent() {
  // ...
  // 🚩 Don't write a ref during rendering
  myRef.current = 123;
  // ...
  // 🚩 Don't read a ref during rendering
  return <h1>{myOtherRef.current}</h1>;
}

function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ You can read or write refs in effects
    myRef.current = 123;
  });
  // ...
  function handleClick() {
    // ✅ You can read or write refs in event handlers
    doSomething(myOtherRef.current);
  }
  // ...
}

ref로 DOM 조작

import { useRef } from 'react';

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

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

function handleClick() {
    inputRef.current.focus();
}

ref 콘텐츠 재생성 방지

function Video() {
  const playerRef = useRef(new VideoPlayer());
  // ...

function Video() {
  const playerRef = useRef(null);
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
  }
  // ...

문제 해결

커스텀 컴포넌트에 대한 ref를 가져올 수 없습니다.

const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

// before
export default function MyInput({ value, onChange }) {
  return (
    <input
      value={value}
      onChange={onChange}
    />
  );
}

// after
import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    <input
      value={value}
      onChange={onChange}
      ref={ref}
    />
  );
});

export default MyInput;

References

useRef – React

The library for web and native user interfaces

https://react.dev/reference/react/useRef