React - useRef (feat.useState)

응애 나 프론트애긔👶·2022년 8월 1일

React

useRef

ref는 참조라는 뜻이다. - 파파고 -

useRef는 React Hook 중 하나이다.

useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref객체를 반환한다. 반환된 객체는 컴포넌트 전 생명주기를 통해 유지 된다.

라고 공식 문서에서는 말을 한다.

조금은 어렵게 설명한 거 같다는 생각이 든다.

아래 예시 코드와 함께 살펴보자.

렛쯔고 !

useRef의 기본적인 구성과 사용법🔧

공식 문서의 조금 더 자세한 설명을 들어보자.

본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 "상자"와 같다.

아마도 DOM에 접근하는 방법으로 refs에 친숙할 지도 모른다.
<div ref={myRef}>를 사용하여 React로 ref객체를 전달한다면 React는 노드가 변경될 때 마다 변경된 DOM 노드에 그것의 .current 프로퍼티를 설정할 것이다.

이는 ref속성보다 useRef()가 더 유용한데 이는 클래스에서 인스턴스 필드를 사용하는 방법과 유사하여 어떠한 가변값을 유지하는데 더욱 편리하기 때문이다.

이해를 하보자면 useRef는 .current라는 프로퍼티로 변경 value를 가져오는 것 같다.
그리고 기존 ref 속성보다 더욱 유용하다고 설명까지 해준다.

코드로 표현해보자 !

const App = () => {
  const myRef = useRef(0);

  const isPlusBtn = () => {
    console.log(myRef.current);
    myRef.current = myRef.current + 1;
    // myRef.current.focus();
    // .current값 = 선택하고자 하는 DOM을 가리킴
    // .focus = 해당 DOM을 포커싱하는 함수를 호출
  };
  return (
    <div>
      <p>{myRef.current}</p>
      <button onClick={isPlusBtn}>버튼</button>
    </div>
  );
};
export default App;