[React] 리액트 훅(hooks) / useRef

>> 리액트 훅 useState, useEffect 참고

https://pplucy.tistory.com/90

[React] 리액트 훅(hooks) / useState / useEffect

>> 리액트 훅 useMemo, useCallback 참고

https://pplucy.tistory.com/91

[React] 리액트 훅(hooks) / useMemo / useCallback

 

---

4) useRef

useRef는 특정 컴포넌트에 접근할 수 있는 자바스크립트 객체를 사용하기 위하여 필요한 훅이다.

 

<기본 사용법>

const inputField = useRef();

 

const UseRefHooks = () => {

    const inputField = useRef();
    
    const handleAutoInput = () => {
       inputField.current.value = "input field 를 채웁니다."
       inputField.current.focus();
    }

    return (
        <>
            <div>
                <button onClick={handleAutoInput}>FOCUS INPUT</button>
                <input ref={inputField}/>
            </div>
        </>
    )
}

위의 코드 중 <input ref={inputField}/> 코드를 보면 이는 inputField의 current 속성에 해당 DOM node를 저장한다고 선언한 것이다. 우리는 해당 속성을 통해서 DOM Element에 접근할 수 있게 되는 것이다.

 

useRef 를 통해 생성되는 자바스크립트 객체는 재 렌더링이 될 때에도 같은 객체를 반환하게 된다, 하지만 current의 속성이 변경된다고 하더라도 이를 통해서는 재 렌더링이 일어나지 않기 때문에 Dom node가 변경될 때에 특정한 함수를 실행하고자 하면 이 때는 useCallback을 사용해줘야 한다.