React hooks (useRef)

React hooks (useRef)

const refContainer = useRef(initialValue);

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다.

---

useRef는 언제 사용할까?

1. DOM 조작

• useRef를 사용하여 DOM 요소를 참조하고 해당 요소를 직접 조작할 수 있다. 예를 들어, 입력 필드를 포커스하거나, 특정 요소의 스크롤 위치를 조정하거나, 또는 애니메이션을 제어하는 등의 작업을 수행할 수 있다.
• ex) 클릭 이벤트가 발생했을 때 특정 DOM 요소를 포커스

import { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);	// inputRef변수를 선언하고, input 요소를 참조

  function handleClick() {
    inputRef.current.focus();	// input 요소에 포커스를 주도록 설정
  }

  return (
    <div>
      <input type="text" ref={inputRef} />	// input 요소는 ref 속성을 사용하여 inputRef에 할당
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

 

2. 컴포넌트 인스턴스 저장

• useRef를 사용하여 컴포넌트 인스턴스를 저장할 수 있다. 이를 통해 컴포넌트에서의 상태 변경, 메소드 호출 등을 수행할 수 있다.
• ex) 컴포넌트에서 특정 작업을 수행하기 위해 컴포넌트 인스턴스에 직접 접근해야 하는 경우

import { useRef } from 'react';

function Example() {
  const componentRef = useRef(null);	// componentRef 변수를 선언

  function handleClick() {
    if (componentRef.current) {
      componentRef.current.doSomething();	// Component 컴포넌트의 doSomething() 메소드를 호출
    }
  }

  return (
    <div>
      <Component ref={componentRef} />	// ref 속성을 사용하여 componentRef에 할당
      <button onClick={handleClick}>Do Something</button>
    </div>
  );
}

 

3. 이전 상태값 저장

• useRef를 사용하여 이전 상태값을 저장할 수 있다. 이전 상태값을 저장하면, 이전 상태값과 현재 상태값을 비교하여 이전 상태값이 업데이트 되었는지 확인하거나, 이전 상태값을 사용하여 특정 작업을 수행할 수 있다.
• ex) 컴포넌트에서 이전 값과 현재 값을 비교하여 변경사항이 있는 경우에만 특정 작업을 수행해야 하는 경우

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

function Example() {
  const [value, setValue] = useState('');
  const prevValueRef = useRef('');	// prevValueRef 변수를 선언하고, 초기값을 빈 문자열로 설정

  useEffect(() => {
    if (prevValueRef.current !== value) {	// prevValueRef.current과 value를 비교하여 값이 변경되었는지 확인
      console.log('Value has changed!');	// 변경된 경우 console.log를 사용하여 메시지를 출력
      prevValueRef.current = value;		// prevValueRef.current에 value를 할당하여 다음 비교를 위해 이전 값으로 저장
    }
  }, [value]);	

  function handleChange(event) {	// setValue를 사용하여 value 상태값을 업데이트
    setValue(event.target.value);
  }

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
}

 

4. 순수 함수에서의 값 저장

• useRef를 사용하여 순수 함수에서 값의 상태를 유지할 수 있다. 이를 통해 리액트의 라이프 사이클 메소드와 같은 순수 함수에서도 이전 값을 유지하고 변경할 수 있다.
• 순수 함수는 함수 내에서 외부 상태에 접근할 수 없기 때문에, 상태를 변경하기 위해서는 함수의 인자로 상태값을 전달받아야 한다. 하지만 때로는 함수 내에서 계속해서 변경되어야 하는 값을 유지하고 싶은 경우가 있다. 이때 useRef를 사용하여 값을 저장하고, 함수 내에서 이 값을 변경하면 된다.

import { useRef } from 'react';

function pureFunction(initialValue) {
  const valueRef = useRef(initialValue);	
  // valueRef 변수를 useRef를 사용하여 선언하고, 초기값을 initialValue로 설정

  function increment() {
    valueRef.current++;		// valueRef.current 값을 증가시킴
  }

  return { value: valueRef.current, increment };
}

const result = pureFunction(0);		// pureFunction을 호출한 결과를 result 변수에 할당
console.log(result.value); // 0

result.increment();		// valueRef.current 값을 증가시킴
console.log(result.value); // 1	
// valueRef.current 값이 변경되기 때문

 

---

출처

https://ko.reactjs.org/docs/hooks-reference.html#useref

https://www.daleseo.com/react-hooks-use-ref/

https://yoonjong-park.tistory.com/entry/React-useRef-%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EA%B0%80