📃 useRef

Javascript에서 특정DOM을 선택할때는 DOM Selector를 사용한다. 리액트 프로젝트 에서도 마찬가지다. 이럴때는 useRef 함수를 사용한다. 클래스 컴포넌트에서는 콜백함수나 React.createRef를 사용한다.

⌨ useRef는 언제 사용할까?

• 컴포넌트에 focus를 위치시켜야 하는 경우

import React, { useState, useRef } from 'react';
export default frunction 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>
  );
}

• 속성 값을 초기화 하는 경우
  카운터의 값을 0으로 초기화 시켜주거나 setInterval 같은 반복작업 clear

const Resetfunc = () => {
  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);
    }
  }, []);
}

• 컴포넌트 안의 변수 관리
  리렌더링을 하지 않고 컴포넌트의 속성 정보를 조회, 수정한다.

import React, { useRef } from 'react';
import UserList from './UserList';
export default function App () {
  const users = [
    {
      id: 1,
      username: 'Anne',
      email: 'Anne@example.com'
    },
    {
      id: 2,
      username: 'Diana',
      email: 'Diana@example.com'
    }
  ];
  const nextId = useRef(3);
  const onCreate = () => {
    nextId.current += 1;
  };
  return <UserList users={users}>;
}