React Ref React Ref 사용 예 예 렌더링 없음

React ref, React ref 사용

특정 DOM 선택

– ref는 reference의 약자입니다.

current라는 속성을 가진 객체이며, DOM에 직접 접근이 가능합니다.

– 포커스, 텍스트 선택 영역, 미디어 재생, 직접 애니메이션 실행 등

수명 주기에 구성 요소DidMount

– 라이프 사이클에 DidMount 구성 요소 이전에는 현재 속성에 null이 저장됩니다.

DOM API가 아닌 ref를 사용하는 이유는 무엇입니까?

– 특정 DOM 요소를 검색할 때 참조가 더 안정적입니다.

– 수명 주기에 따라 DOM 요소를 검색하지 못할 수 있습니다.

기능적 구성 요소는 useRef를 사용합니다.

– 함수 타입에서 createRef를 사용하면 Ref 값이 초기화되어 원하는 값을 얻을 수 없다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

// console.log(inputEl.current.value)의 결과로 input 태그의 value 값을 확인 가능