react useHook - useRef

리액트에서는 hook들이 엄청 많은데 그 중 하나인 useRef에 대해 공부한걸 남겨보려한다.
최근에 한 번 사용해봤지만 어떨 때 사용하고 어떤 장점이 있는지는 아직 잘 모르겠다.
우선 useRef는 리액트에서 DOM요소나 컴포넌트의 인스턴스를 참조하기 위해 사용하는 훅이다.

useRef

• DOM요소에 접근
• 상태유지(렌더링될 때)
• input

useRef 사용문법

    const ref = useRef(initialValue)
    // initialValue의 값은 current값이다.

DOM요소 접근

    const input = () => {
        const inputRef = useRef(null) // 초기값 null

        const handler = ()=> {
            inputRef.current.focus() 
              // input에 포커스를 준다.
        }

        return(
            <>
              <input ref={inputRef} type='text' />
              <button onClick={handler}>클릭버튼</button>
          </>
        )
    }

위의 코드를 보자면 우선, useRef의 초기값은 null로 설정하여 inputRef을 만들었다.
그리고 input태그의 ref의 속성에 inputRef를 할당하였다. 그리고나서 버튼을 클릭했을 때 input으로 포커스를 주기위해
handler 라는 함수를 만들어 button태그에 할당하였다. 이렇게 되면 클릭버튼을 누름과 동시에 해당하는 포커스로 바뀌는 것을 볼 수있다.