useRef

useRef는 특정 DOM 객체를 선택해야 되는 상황(getElementById, querySelector ... 등)
DOM을 직접 선택해야하는 상황(특정 엘리먼트 크기나 위치를 불러오거나 스크롤바 위치를 가져오거나 설정, 포커스 설정 하는 등, 비디오js 등 차트 js 등 다양한 라이브러리를 사용할 때도 특정 돔에 사용하기 때문에 필요로 하다)에 사용!
추가! 특정 DOM을 선택, 가리키는 것 외에도 렌더링과 관계 없는 변수를 관리할 때도 사용

inport React, { useRef } from 'react';

exprot default App() {
	const nameInput = useRef();
    
    const onReset = (e) => {
    	setInputs({
        	name : '',
            nickname : '',
        });
        
        nameInput.current.focus();
    };
    
    return (
    	<input
        	name="name"
                placeholder = "이름"
                onChange = { onChange }
                value = { name }
                ref = { nameInput }
		/>
        <button onClick = {onReset } >초기화</button>
    )
}

먼저 useRef를 사용하기 위해서는 useState와 마찬가지로 import를 해주시면 되구요!
useRef 선언은 const 변수명 = useRef();로 선언해주시면 돼요!
그럼 선언한 nameInput에 input을 할당 하도록 해볼까요!
input 태그안에 보시면 ref가 보이시죠!
ref에 선언한 useRef를 입력해주시면 끝!
그럼 onReset을 보면 reset이 되었을 때 nameInput.current.focus()를 활용해
포커스가 input 태그에 지정을 시켜두었습니다!
current가 DOM을 가리킨다라고 볼 수 있습니다!

추가적으로는 window.onload = () => { nameInput.current.focus(); };를 해주면
윈도우 창이 로드가 되면서 자동으로 포커스를 넣을 수 도 있습니다!

useRef는 앞으로 많이 활용 되니 꼭 기억 해두도록 할까요!

useRef로 변수 만들기

일반적으로 const나 let 또는 var을 통해서 변수를 선언하면 리렌더링이 될 때마다 초기화!
React에서는 리렌더링이 시도때도 없이 발생하는데 그럴 때 마다 초기화가 되면 힘들겠죠!
리렌더링을 하더라도 값이 유지되게 하고 싶다면 useState()를 사용하되 useState()는
상태가 바뀔 때 마다 리렌더링이 발생을 하니 굳이 값이 변경 되었을 때 컴포넌트 리렌더링을 할 필요 없는 경우에는 useRef()를 사용해주시면 됩니다!

useRef()는 특정 DOM을 선택하거나 ref를 사용할 때 사용
컴포넌트가 리렌더링 될 때마다 계속 기억할 수 있는 어떠한 값을 관리할 때 사용
(setTimeout, setInterval의 ID, 외부라이브러리를 사용하여 생성된 인스턴스, Scroll 위치 등)

선언은 간단합니다! 위에서는 const nameInput = useRef();로 아무값 없이 선언했다면
변수로 선언 할 때는 값을 넣어 줄 수 이쓴데요!

function App(){
	const users = [
          {
              id : 1,
              username : 'velopert',
              email : 'public.velopert@gmail.com'
          },
          {
              id : 2,
              username : 'mms',
              email : 'mms@gmail.com'
          },
          {
              id : 3,
              username : 'liz',
              email : 'liz@gmail.com'
          },
        ];
      
        const nextId = useRef(4);
      
        const onCreate = () => {
      
          console.log(nextId.current);
      
          nextId.current+=1;
        }
      
        return(
          <UserList users = {users} />
        )
      }

users라는 객체 배열을 만들어 주었는데요!
지금 3개가 입력되어 있으니 다음에는 id가 4가 와야겠죠!
그래서 nextId라는 변수에 useRef(4)로 초기화를 해놓고
nextId.current+=1;을 해주게 되면 배열이 추가가 될 때 마다
nextId의 값은 리렌더링이 되더라도 초기화 없이 값이 증가하겠죠!

위와 같은 users의 index 말고도 TODO List를 일정 관리를 만들 때 유용하게 사용할 수 있겠죠!

앞으로 더 다양한 예제를 통해 더 많이 알아가보도록 합시다!