Hook #3

useRef

컴포넌트를 작성하다 DOM을 직접 다루어야 하는 경우나 렌더링 이후 업데이트 된 상태를 바로 조회해야할 경우 useRef를 사용한다.
이 변수를 사용하여 다음과 같은 값을 관리한다.

• setTimeout, setInterval을 통해서 만들어진 id
• 외부 라이브러리를 사용하여 생성된 인스턴스
• scroll 위치

const Example = () => {
  const [input, setInput] = useState({
    name: '',
    nickname: ''
  });
  
  const nameInput = useRef();
  const { name, nickname } = input;
  
  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>
  );  
}