[React] Dom 접근 및 조작

useRef()란?

- Javscript, jquery의경우, 특정 DOM을 선택해야하는 경우, getElementById(), querySelector()와 같은 DOM Selector 함수를 활용

- 개발을 하다보면 React 컴포넌트 상에서도 DOM을 직접 선택해야 하는 상황이 발생한다.

- 컴포넌트 상에서, DOM에 접근하기 위해 사용되는 React hook 함수이다.

- 함수형 컴포넌트에서 사용된다.

- 클래스형 컴포넌트에서는 React.createRef() 함수가 사용되지만, 함수형 컴포넌트가 더 자주 사용된다.

 

useRef()의 사용법

- 1. useRef()를 사용하여 Ref 객체를 생성

- 2. 해당 객체를 선택하고자하는 DOM 객체의 ref 속성 값으로 설정(매핑)

- 3. Ref객체의 .current.DOM함수()로 DOM API 호출 또는 값 수정

const Hello = () => {
    const inputRef = useRef(null);   // 1
    ...
    const onReset = () => {
    	inputRef.curren.focus();  // 3
    }
    
    return (
    	<input ref={inputRef} ... />   // 2
        <button onClick={onReset}> 초기화 </>
    );
}