useRef

useRef는 더욱 이해가 잘 가지않는다. 재생목록을 다 듣고 시작해보자.

유투브 별코딩 useRef

---

useRef 란?

useRef는 React Hooks API 중 하나로, 함수형 컴포넌트에서 DOM 요소에 직접 접근하거나, 컴포넌트 내에서 전역적으로 사용되는 변수를 만들 때 사용하는 함수다.  useRef는 객체 형태의 current 프로퍼티를 가지고 있는데, 이 프로퍼티를 사용하면 컴포넌트가 다시 렌더링 되더라도 변수의 값이 유지된다. 

즉, useRef를 사용하면 컴포넌트 내에서 일어나는 변화를 저장하고, 이를 다음 렌더링에서도 유지할 수 있다. 이를 통해, 함수형 컴포넌트에서도 클래스형 컴포넌트와 같은 기능을 수행할 수 있다.

---

useRef 의 필요성

useRef는 주로 다음과 같은 상황에서 필요로 한다.

1. DOM 요소에 직접 접근해야 할 때.

예를 들어, 특정 이벤트 발생 시 input 요소에 포커스를 주거나, 스크롤 위치를 조작해야 하는 경우 useRef를 사용하여 DOM 요소에 접근할 수 있다.

import { useRef } from 'react';
// 코드에서는 useRef를 사용하여 input 요소에 대한 ref를 생성하고, 
// 버튼을 클릭하면 해당 input 요소에 포커스를 주는 handleClick 함수에서 ref를 사용한다.
function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

---

2.  컴포넌트 내에서 전역적으로 사용되는 변수를 만들 때

함수형 컴포넌트는 렌더링이 일어날 때마다 함수 전체가 다시 실행되기 때문에, 컴포넌트 내에서 선언된 변수는 렌더링이 일어날 때마다 새로 생성됩니다. 하지만 useRef를 사용하면 컴포넌트가 다시 렌더링되더라도 변수의 값을 유지할 수 있다.

import { useRef } from 'react';
// useRef를 사용하여 count 변수를 생성하고, 
// 버튼을 클릭하면 해당 변수의 값을 1씩 증가시키는 handleClick 함수에서 ref를 사용한다.
function MyComponent() {
  const countRef = useRef(0);

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

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

---

3. 이전 상태 값을 유지해야 할 때.

이전 상태와 비교하여 특정 로직을 수행해야 하는 경우, useRef를 사용하여 이전 상태 값을 저장하고, 다음 렌더링에서 비교할 수 있다.

import { useState, useEffect, useRef } from 'react';
// 이전 상태 값을 저장하는 prevCountRef 변수를 생성하고, 
// 이전 상태 값을 저장하는 useEffect 훅에서 ref를 사용하고 있습니다. 
// 이를 통해 현재 상태와 이전 상태를 비교하여 로직을 수행할 수 있습니다.
function MyComponent() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(null);

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCountRef.current}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

---

4. 외부 라이브러리와 함께 사용해야 할 때.

D3.js와 같은 라이브러리는 DOM 요소에 직접 접근해야 하므로, useRef를 사용하여 함수형 컴포넌트와 연동할 수 있다.

import { useRef, useEffect } from 'react';
import * as d3 from 'd3';

function MyComponent() {
  const chartRef = useRef(null);

  useEffect(() => {
    const data = [5, 10, 15, 20, 25];
    const svg = d3.select(chartRef.current);

    svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', (d, i) => i * 30)
      .attr('y', (d, i) => 100 - d)
      .attr('width', 25)
      .attr('height', (d, i) => d)
      .attr('fill', 'steelblue');
  }, []);

  return (
    <svg width="150" height="100"

즉, useRef는 DOM 요소에 접근하거나, 전역적으로 사용되는 변수를 만들거나, 이전 상태 값을 유지하거나, 외부 라이브러리와 함께 사용할 때 유용하다.

---

useRef 의 사용법

useRef는 React 훅(Hook)이므로, 함수형 컴포넌트에서만 사용할 수 있다. useRef를 사용하는 방법과 문법은 아래처럼 사용하면 된다.

예를 들어, input 요소에 대한 ref를 생성하고, 버튼을 클릭하면 해당 input 요소에 포커스를 주는 handleClick 함수를 구현하는 코드 아래처럼 작성해볼 수 있다.

import { useRef } from 'react';

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

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

1. useRef 를 import 하기 (리액트 내장된 훅이라 별도의 설치 필요없이 사용가능)

import { useRef } from 'react';

2. useRef 함수를 사용하여 ref 변수를 생성한다. 이때 초기값을 전달할 수 있다.

const refVariable = useRef(initialValue);

3. 생성된 ref 변수는 컴포넌트 내에서 어디에서든 사용할 수 있다. 예를 들어, input 요소에 대한 ref를 생성하는 경우:

const inputRef = useRef(null);

4. 생성된 ref 변수는 ref 속성을 사용하여 DOM 요소와 연결할 수 있다.

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

 

5. ref 변수는 current 속성을 통해 해당 ref 변수가 참조하는 값을 가져올 수 있다.

console.log(inputRef.current.value);

---

useRef와 useState 의 차이점과 장단점

두 hook의 차이점

useRef는 DOM 요소에 대한 참조를 저장할 때 사용된다. DOM 요소에 직접 접근할 수 있게 해주므로, 일반적으로 폼(form) 관리나 애니메이션 처리 등에 활용된다. 반면, useState는 컴포넌트 내부 상태를 관리할 때 사용됩니다.

useRef는 state의 변경으로 불필요한 렌더링을 방지하고, 컴포넌트에서 리렌더링이 필요 없는 값이 변경되어도 상태를 업데이트하지 않는다. 반면, useState는 state가 변경되면 해당 컴포넌트가 다시 렌더링된다.

useRef는 state를 변경하지 않는 업데이트를 수행할 때 사용된다. 예를 들어, useLayoutEffect나 useEffect 훅에서 이전 state와 현재 state를 비교해 업데이트를 수행하는 경우 useRef를 사용한다.

useRef 장단점

useRef의 장점은 state를 변경하지 않으면서도 컴포넌트 내부 상태를 저장하고 업데이트할 수 있다는 점이다. 또한, DOM 요소에 직접 접근할 수 있어서 DOM 조작이 필요한 작업을 수행할 때 효과적이다.

하지만, useRef는 컴포넌트 내부 상태를 변경하지 않으므로, 컴포넌트의 렌더링 과정에서 사용되는 데이터가 아니라면 적합하지 않다. 또한, useRef를 사용하는 경우 상태 업데이트에 대한 이해도와 조작에 대한 경험이 필요하다.

useState 장단점

useState의 장점은 컴포넌트의 상태를 변경하고, 렌더링에 영향을 줄 수 있다는 점. 또한, useState를 사용하면 컴포넌트의 상태 관리가 용이하고, 컴포넌트 구조가 단순화 할 수 있다.

하지만, 상태를 변경할 때마다 컴포넌트가 다시 렌더링되므로, 성능에 영향을 미칠 수 있다. 또한, 상태를 올바르게 관리하지 않으면 예상치 못한 결과를 초래할 수 있다.