[React] 리액트 useRef사용법

🎯 useRef사용법

const refContainer = useRef(initialValue);

const App = () => {
    const inputRef = useRef(null)
    const onButtonClick = () => {
        inputRef.current.focus()
    }
    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={onButtonClick}>input으로 포커스</button>
        </div>
    )
}

• 컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환한다.
• ref 객체는.current라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다.
• 일반적으로 React에서 DOM Element에 접근할 때 사용합니다(DOM Element의 ref 속성을 이용한다.)
• useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재 렌더링 되지 않는다.