useRef

Ref = reference = 참조 = 다른 자료나 정보를 인용함 (필요한 정보를 얻기 위해 다른 자료를 살펴보는 것)

 

일단 이 훅에 기능이 두개 있다. (이러니까 어렵지..)

 

 

1.저장 공간으로서의 기능

2.DOM요소를 선택하는 기능

 

 

1.저장 공간으로서의 기능

useRef는 값을 저장하는 컨테이너 역할을 한다.

이 저장공간에 저장된 값은 변경되어도 컴포넌트가 다시 렌더링 되지 않는다.(X)

 

변수가 바뀌어도 , ui를 다시 그려주지 않는다. (렌더링 하지 않아)

useState를 쓰면  ui를 다시 그려주는 대신에 제랜더링이 일어난다.

 

--> 렌더링 : 컴포넌트 함수가 다시 호출되는 과정

 

그러니까 컴포넌트를 계속해서 유지하고 싶은데 , 컴포넌트 안에 값 몇개만 바꾸고 싶을 때 쓰는 거다.

컴포넌트의 라이프사이클의 영향을 주지 않고 렌더링 할 수 있다.

 

이말인 즉슨 , 상품페이지에서 상품컴포넌트 2페이지를 보여줘도 ,

상품컴포넌트가 제렌더링되지 않고 바로 2페이지로 넘어갈 수 있다.

 

 

 

2.DOM을 조작할 수 있다.

컴포넌트의 렌더링 사이클과무관하게 DOM을 조작할 수 있다.

가상 DOM이 아닌 , 진짜 DOM을 조작한다.

 

컴포넌트 렌더링과 관계없이 값을 유지해야 하는 상황에서 유용하게 쓰인다.

 

??  변수 자체에 저장해서 쓰면 되는 거 아닌가?

변수가 직접적으로 DOM트리에 영향을 미치지 않지만 , 간접적으로 영향을 미칠 수 있다.

 

 

 

 

자. 이제 사용법을 알아보겠다.

1.참조 객체 생성 (ref 생성)

const myRef = useRef(초기값);

 

기본적으로 null로 초기화 된다.

 

2.DOM 요소에 참조 연결(input  , div ~~)

<input ref={myRef} />

 

3.참조된 DOM 요소에 접근

myRef.current

 

current를 사용해 실제 DOM 요소에 접근 할 수 있다.

current , current.focus만 있나보다. 나중에 또 발견하면 추가하겠다.

 

 

 

import React, { useRef } from 'react';

const Example = () => {
  // useRef로 참조 객체를 생성합니다. 초기값은 null입니다.
  const myRef = useRef(null);

  // 버튼 클릭 시 참조된 요소에 접근합니다.
  const handleClick = () => {
    if (myRef.current) {
      // 현재 참조된 DOM 요소에 접근할 수 있습니다.
      myRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={myRef} type="text" placeholder="여기에 포커스 설정" />
      <button onClick={handleClick}>포커스 설정</button>
    </div>
  );
};

export default Example;

 

 

참고로 useRef는 함수 렌더링 중에 읽으려고 하면 안된다. 

이벤트핸들러(submit , onClick ),useEffect 이럴 때 써야한다.