useRef 를 사용한 직접 DOM 제어

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 )

 

•  useRef
  • 리액트를 사용하면서 가끔씩 직접 DOM을 선택해줘야하는 상황이 발생할 수 있다. 예를 들어 Element의 크기를 가져온다는지, 스크롤을 제어 한다는지 등 다양한 상황에 대해 대응하기 위하여 react에서는 ref를 사용하고 Functional Component에서 ref를 사용하기 위해선 useRef라는 React Hook 함수를 사용한다.

    import React, { useState, useRef } from 'react';
  
    function InputSample() {
      const [inputs, setInputs] = useState({
        name: '',
        nickname: ''
      });
      const nameInput = useRef();
  
      const { name, nickname } = inputs; 
  
      const onChange = e => {
        const { value, name } = e.target; 
        setInputs({
          ...inputs,
          [name]: value 
        });
      };
  
      const onReset = () => {
        setInputs({
          name: '',
          nickname: ''
        });
        nameInput.current.focus();
      };
  
      return (
        <div>
          <input
            name="name"
            placeholder="이름"
            onChange={onChange}
            value={name}
            ref={nameInput}
          />
          <input
            name="nickname"
            placeholder="닉네임"
            onChange={onChange}
            value={nickname}
          />
          <button onClick={onReset}>초기화</button>
          <div>
            <b>값: </b>
            {name} ({nickname})
          </div>
        </div>
      );
    }
  
    export default InputSample;
  

  위의 코드와 같이 useRef 함수를 통해 Ref객체를 만들고 내가 선택하고 싶은 DOM에 ref값으로 설정해준다. (위와 같이 focus를 저렇게 활용하는 이유는 React에서는 focus를 따로 설정하기가 힘드므로 이렇게 사용한다.)