useRef로 특정 Dom 선택 및 컴포넌트 변수 생성

특정 DOM을 선택 하기 위해서는 getElementById, querySelector를 사용해왔다. 리액트에서는 useRef 훅을 사용해 컨트롤이 가능하다. 또한 useRef로 변수를 선언해 사용할 수 있는데, 이 변수는 값이 바뀌더라도 컴포넌트가 리렌더링 되지 않는다.

1. useRef() 사용법

// Ref 객체 생성하기
const nameInput = useRef(null);

//Ref 변수 선언
const nextId = useRef(0)

const addItem = () => {
  setItem{~~}
  nextid.current += 1
}

//특정 Dom에 바인딩 시키기
<input ref={nameInput} onChange={onChange} value={name}  />

2. 적용해보기

import './App.css';

function App() {
  const [name,setName] = useState('')
  // Ref 객체생성
  const nameInput = useRef(null);
  
  const onChange = e => {
    setName(e.target.value);
  };

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

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
		// Ref 객체 바인딩
        ref={nameInput}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default App;

초기화 버튼을 누르면 input 박스로 포커스가 이동한다.

[ 참고 사이트 ]

• https://react.vlpt.us/basic/10-useRef.html