React Hooks : useRef() 함수

 

자바스크립트에서 특정 DOM 을 선택해야할 때는 DOM Selector를 사용한다.

리액트 프로젝트에서도 특정 요소의 크기를 가져온다거나, 포커스를 설정해야한다거나

특정 DOM을 선택해야할 상황이 있다.

 

이런 경우, 리액트 함수형 컴포넌트에서는 React Hooks 중 하나인 useRef() 함수를 사용한다.

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

 

useRef() 함수 사용법

초기화 버튼 누르면 input 태그에 focus 잡히는 기능 구현하기

 

 

InputTest.js

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

function InputTest() {
  const [text, setText] = useState('');
  const nameInput = useRef();

  const onChange = e => {
    setText(e.target.value)
  };

  const onReset = () => {
    setText('');
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        onChange={onChange}
        value={text}
        ref={nameInput}
      />

      <button onClick={onReset}>초기화</button>
      <div>
        <b>내용: </b>
        {text}
      </div>
    </div>
  );
}

export default InputTest;

 

const nameInput = useRef();

 

: Ref 객체를 만들어준다.

 

 

<input

  name="name"

  onChange={onChange}

  value={text}

  ref={nameInput}

/>

 

: 선택하고 싶은 DOM에 속성으로 ref 값을 설정해준다.

 

 

nameInput.current.focus();

 

: Ref 객체의 current 값은 우리가 선택하고자 하는 DOM을 가리킨다.

  그리고 포커싱을 해주는 DOM API focus() 를 호출한다.

 

 

useRef로 컴포넌트 안의 변수 관리하기

 

useRef Hook은 DOM 선택 용도 외에도, 컴포넌트 안에서 조회 및 수정 가능한 변수를 관리하는 용도가 있다.

useRef로 변수를 관리하게 되면, 그 변수가 업데이트 된다고 해서 컴포넌트가 리렌더링 되지 않는다.

즉, 굳이 리렌더링 할 필요가 없는 변수라면 useRef로 관리해주는 것이 효율적이다.

 

useRef를 활용한 변수는 아래와 같은 곳에 쓰인다.

- setTimeout, setInterval을 통해 만들어진 id

- scroll 위치

- 배열에 새 항목을 추가할 때 필요한 고유값 key

 

 

App.js

import React, { useRef } from 'react';
import UserList from './UserList';

function App() {
  const users = [
    {
      id: 1,
      username: 'subin',
      email: 'subin@example.com'
    },
    {
      id: 2,
      username: 'user1',
      email: 'user1@example.com'
    },
    {
      id: 3,
      username: 'user2',
      email: 'user2@example.com'
    }
  ];

  const nextId = useRef(4);
  const onCreate = () => {
  
    // 배열에 새로운 항복 추가하는 로직 생략
    
    nextId.current += 1;
  };
  return <UserList users={users} />;
}

export default App;

 

import React, { useRef } from 'react';

 

: useRef 함수를 불러온다.

 

const nextId = useRef(4);

 

: 배열의 고유값 변수로 nextId를 설정해주고,

  useRef() 파라타미터로 다음 id가 될 숫자 4를 넣어준다.

  파라미터 값을 넣어주면 해당 값이 변수의 current 값이 된다.

  그리고 nextId 변수를 수정하거나 조회려면 .current 값을 수정하거나 조회한다.

 

nextId.current += 1;

 

: nㅍ변수에 1씩 더하여 업데이트를 한다.

 

 

useRef로 setInterval, setTimeout 함수 clear 하기

setInterval 이나 setTimeout과 같은 함수는 clear 시켜주지 않으면 메모리를 많이 소모한다.

따라서 함수를 구현하고 컴포넌트가 unmount 될 때나 특정 상황해서 clear 해줄 필요가 있다.

 

const RSPfunction = () => {
  const [result, setResult] = useState('');
  const [imgCoord, setImgCoord] = useState(rspCoords.바위);
  const [score, setScore] = useState(0);
  const interval = useRef();

  useEffect(() => { 
    interval.current = setInterval(changeHand, 100);
    return () => {
      clearInterval(interval.current);
    }
  }, [imgCoord]); 


//  코드 생략

 

const interval = useRef();

 

ref 객체를 만들어준다.

 

interval.current = setInterval(changeHand, 100);

 

ref 객체에 setInterval 함수를 넣어준다.

 

clearInterval(interval.current);

 

컴포넌트가 unmount 될 때 clearInterval을 활용해서 setInterval 함수가 들어있는 ref 객체를 초기화해준다.