[React] DOM에 직접 접근하기: ref (useRef)

 

 

 

 

📌 ref

: 리액트에서는 DOM을 선택해 직접 접근하기 위해 사용

• HTML 태그에 class나 id를 부여해서 사용하는 것처럼(<div id="my-id">),
  리액트에서는 DOM을 선택해 직접 접근하기 위해 ref를 사용한다.
  (ex. 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기 등)

 

 

 

🔺사용하기

useRef(React Hook)를 사용하여 ref 활용

1. useRef 선언하기
2. HTML 태그에 선언한 useRef 변수로 ref 부여하기
3. useRef 변수 사용하기

const Editor = ({onCreate}) => {

    // 1. useRef 선언하기
    const contentRef = useRef();

    const onSubmit = () => {
        
        // 입력칸이 공백인데 '추가' 버튼을 누르면 입력칸 포커싱
        if (content === "") {
            // 3. useRef 변수 사용하기
            contentRef.current.focus();
        }
    }

    return (
    <div className="Editor">
    	<!-- 2. HTML 태그에 선언한 useRef 변수로 ref 부여하기 -->
        <input ref={contentRef} />
    </div>
    )
}

 

 

---

 

 

출처

 

[React] ref란? - DOM에 직접 접근하기(useRef)