[React] useRef

Javascript를 사용할 때, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector 같은

DOM Selector 함수를 사용해서 DOM을 선택해야 한다.

 

리액트를 사용하는 프로젝트에서도 마찬가지로 DOM을 직접 선택해야 하는 상황이 발생할 수 있다.

예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나, 설정하든지,

또는 포커스를 설정해줘야 한다던지 등, 생각보다 다양한 상황이 있다.

 

그리고 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 chart.js 같은 그래프 관련

라이브러리 등의 외부 라이브러리를 사용할 때도 특정 DOM에다가 적용해야 한다.

이럴 때, 리액트에서는 ref라는 것을 사용한다.

 

※ What is ref??

[React] ref란?

 

함수형 컴포넌트에서 ref 를 사용할 때에는 useRef라는 Hook 함수를 사용한다.

클래스형 컴포넌트에서는 콜백 함수를 사용하거나, React.createRef 라는 함수를 사용한다고 한다.

const UseRefExample = () => {
  const [string, setString] = useState('');
  const [stringList, setStringList] = useState([]);

  // Here's useRef!
  const inputText = useRef();

  const change = useCallback((e) => {
    setString(e.target.value);
  }, []);

  const insert = useCallback(() => {
    const newList = stringList.slice();
    newList.push(string);
    setStringList(newList);

    // Here's focusing!
    inputText.current.focus();
  }, [string, stringList]);

  const sum = useCallback((list) => {
    console.log('문자들을 합치는 중입니다...');
    let stringSum = '';
    for(let value of list) {
      stringSum += value + ' ';
    }
    return stringSum;
  }, []);

  const result = useMemo(() => sum(stringList), [stringList, sum]);

  return (
    <div>
      <input type='text' ref={inputText} onChange={change}/> // <- using Ref
      <button onClick={insert}>문자열 추가</button>
      {result}
    </div>
  )
}

위 코드는 버튼을 누를 경우 focus가 자동으로 input으로 이동하게 된다.

여기서 useRef 의 사용법은 간단하다!

• const inputText = useRef(); 변수를 선언하고
• <input type='text' ref={inputText} onChange={change}/> 태그에서 ref를 등록하고
• inputText.current.focus(); 사용하면 끝!

여기서. current 값은 우리가 원하는 DOM을 가리키게 된다.

useRef의 사용방법은 한 가지 더 있는데, 로컬 변수를 선언할 때 사용하는 것이다.

import React, {useRef} from 'react';

const LocalVar = () => {
  const localVar = useRef(1);

  const increaseLocalVar = () => {
    localVar.current = localVar.current + 1;
  }

  return (
    <div>
      {localVar}
    </div>
  )
}

export default LocalVar;

로컬 변수는 렌더링과 상관없이 바뀔 수 있는 값이다.

그리고 컴포넌트에서 어떤 변수를 선언하게 되면, 다음 렌더링을 할 때 해당 값이 유지되지 않고

모두 초기화가 된다.

 

만약 변수를 컴포넌트 밖에 선언했을 때, 컴포넌트 마운트/언마운트 시 값을 초기화시키고 싶을 때,

직접 초기화 하는 작업을 할 때 사용한다.