221220 항해99 44일차 useRef

• useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회 & 수정한다.
• React에서 useRef를 사용하는 경우는 다음과 같다.

1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우

• 예를 들어, 값을 여러개 입력하고 첫번째 칸으로 이동해야 하는 경우 필요하다.

//InputTest.js
import React, { useState, useRef } from 'react';

function InputTest() {
  const [text, setText] = useState('');
  // Ref 객체를 만들어준다.
  const nameInput = useRef();

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

  const onReset = () => {
    setText('');
    // Ref 객체의 current 값은 우리가 선택하고자 하는 DOM을 가리킨다.
  그리고 포커싱을 해주는 DOM API focus() 를 호출한다.
    nameInput.current.focus();
  };

  return (
    <div>
    // 선택하고 싶은 DOM에 속성으로 ref 값을 설정해준다.
      <input
        name="name"
        onChange={onChange}
        value={text}
        ref={nameInput}
      />

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

export default InputTest;

2. 속성 값을 초기화(clear)할 필요가 있는 경우

• 예를 들어, 카운터의 값을 0으로 초기화 할 필요가 있을 때. (타이머 0으로 만들기 같은...)
• setInterval 이나 setTimeout과 같은 함수는 clear 시켜주지 않으면 메모리를 많이 소모하기 때문에 useRef를 사용해준다.

// App.js
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]); 


//  코드 생략

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

• 컴포넌트의 속성 정보를 조회 & 수정할 때 (+리렌더링을 하지 않으면서..)
• useRef를 활용한 변수는 아래와 같은 곳에 쓰인다.

  • setTimeout, setInterval을 통해 만들어진 id
  • scroll 위치
  • 배열에 새 항목을 추가할 때 필요한 고유값 key

// App.js
// useRef 함수를 불러온다.
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'
    }
  ];
  
  // 배열의 고유값 변수로 nextId를 설정해주고,
  // useRef() 파라타미터로 다음 id가 될 숫자 4를 넣어준다.
  // 파라미터 값을 넣어주면 해당 값이 변수의 current 값이 된다.
  // 그리고 nextId 변수를 수정하거나 조회려면 .current 값을 수정하거나 조회한다.
  const nextId = useRef(4);
  const onCreate = () => {
  
    // 배열에 새로운 항목 추가하는 로직 생략
    
    // 변수에 1씩 더하여 업데이트를 한다.
    nextId.current += 1;
  };
  
  return <UserList users={users} />;
}

export default App;

공식문서
Ref의 바람직한 사용 사례는 다음과 같습니다.

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때
  선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하세요.
  예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen이라는 prop을 넘겨주세요.

참조:
[React] useRef() 는 언제 사용하는가?