React useRef

오늘은 React에서 사용하는 useRef에 대해서 알아보자.

useRef란 리액트에서 참조(ref)를 생성하고 관리하기 위한 Hook이다.
useRef를 사용하면 컴포넌트 내부에서 생성한 변수나 DOM 요소에 대한 참조를 생성하고, 이를 다른 곳에서 사용할 수 있다.

useRef를 사용하는 상황으로는 다음이 있다.

1. DOM 요소에 직접 접근해야 하는 경우
   특정 DOM 요소의 크기나 위치를 측정하거나, 입력 폼의 값을 가져오거나, 스크롤 위치를 제어하는 등의 작업을 할 때 사용한다.

  const authorInput = useRef();

  const handleSubmit = () => {
        if (state.author.length < 1) {
            authorInput.current.focus();
            return;
        }
  }

  <input
      ref={authorInput}
      name="author"
      value={state.author}
      onChange={handleChageState}
  />

  <button onClick={handleSubmit}>일기 저장하기</button>

2. 컴포넌트 내부에서 생성한 변수나 객체를 관리해야 하는 경우
   특정 상태 값을 저장하고 유지하거나, 이전 값과 새로운 값을 비교해야 하는 경우에 사용한다.

  const [count, setCount] = useState(0);
  const prevCountRef = useRef();
  
  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  const prevCount = prevCountRef.current;
  
  <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
  </div>

3. 다른 Hook에서 사용하기 위해 참조를 전달해야 하는 경우
   useEffect Hook에서 생성한 함수에서 참조할 변수를 전달하기 위해 사용한다.

  const dataRef = useRef([]);
  
  dataRef.current.push('데이터 추가');
  console.log(dataRef.current);
  
  <div>
      <button onClick={handleAdd}>Add Data</button>
  </div>