[React, HTML, DOM] useRef

useRef

 

useRef

- 리액트에선 render() 메서드에 의해 만들어지는 DOM에 접근하는 방식 으로
   HTML 의 DOM노드와 React Element에 접근할 수 있도록 ref를 제공해.
- javascript에서 특정 Dom을 선택하는 역할이 getElementById, querySelector 등이 있다면,
  리액트에선 useRef를 사용해서 특정 Dom에 접근해.

- 특정 DOM에 접근할 때 사용하고,
- 외부 라이브러리 사용할때 유용해. 

useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해.
그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르킬 수 있게 되지.

 

 

useRef가 필요한 상황들

- ref로 값을 참조하거나, ref로 DOM조작, 참조 콘텐츠 재생성 방지를 위해 사용할 수 있어.

< 예시 >

- ref로 값을 참조할 때 : 클릭 카운터, 스톱워치 등
- ref로 DOM조작 :
포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때, 이미지 스크롤해서 보기, 자신의 구성 요소에 ref 노출할 때,
애니메이션을 직접적으로 실행시킬 때,
서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

- 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하는 게 좋아.

 

사용법

- 구성 요소의 최상위 수준에서 호출하여 useRef하나 이상의 참조를 선언해 줘, 원하는 위치에 ref={ } 의 형태로 작성하면 돼.

- 포커스를 잡으려면 input 에 포커스를 하는 focus() DOM API 를 호출해주는 형태로
nameInput.current.focus() 형태로 작성하면 돼.

 input 에 포커스를 하는 focus() DOM API 를 호출해주는 형태야.

<예시>

const nameInput = useRef();

const onClick = () => {
    nameInput.current.focus();
}

return(
    <input ref={nameInput} />
    <button onClick={onClick}>클릭</button>
)

 

-참고자료-

https://react.vlpt.us/basic/10-useRef.html

https://ko.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper - React 공식문서

https://leehwarang.github.io/2020/11/29/ref.html

https://chanhuiseok.github.io/posts/react-7/

https://react.dev/reference/react/useRef#useref

https://medium.com/hcleedev/web-react-ref%EC%99%80-useref-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-7dba32e9b355