[ React ] [Chapter 12] ref 속성값

ref 속성

 

리액트로 작업하다보면 실제 DOM 요소에 직접 접근해야 할 때가 있다.예를 들어 DOM이 10개 이상이 있는데 어떤 특정 DOM을 지울때 스크롤은 유지가 되어야 한다던지,
어떤 특정 DOM 요소에 포커스를 주거나, DOM 크기를 알고 싶거나 등등 그럴 때 사용 됩니다.ref 속성을 이용하면 자식 요소에 직접 접근을 할 수 있다.

 

ref 간단 사용 예

 

import React, { useEffect, useRef } from "react";

function App() {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button>확인</button>
    </div>
  );
}

export default App;

ref 속성값을 사용 할 때 훅을 사용 하면 더욱 편리하다 다른 방법들도 있지만 useRef 훅을 사용 하면 간편하다.

훅 반환 값을 원하는 요소에 ref 속성 값으로 입력 해주면 된다. 그럼 해당 ref 속성을 잡을 수 있다.

잡는 코드는 useEffect 훅을 사용 했는데 current는 실제 DOM요소를 가르키는 속성이다.
즉 실제 DOM(current)에 있는 focus함수를 실행 시키는 겁니다. 포커스를 맞추는거죠

ref 알아야 할 점

 

1. 실제 DOM 요소는 렌더링 결과가 실제 DOM에 반영된 후에 접근할 수 있기 때문에 부수효과 함수 useEffect에서 접근해야한다.

2.일반적인 컴포넌트에 입력할 수 있다. 만약 클래스형 컴포넌트라면 해당 컴포넌트의 인스턴스를 가르킨다.
inputRef.current 할 경우 해당 클래스의 메서드가 호출이 된다.

3. 함수형 컴포넌트는 인스턴스로 만들어지지 않지만 useImperativeHandle 훅을 사용하면 함수형 컴포넌트에서도 변수와 함수를 외부로 노출시킬 수 있다.

4.함수형 컴포넌트를 ref 하고 싶을 경우 ref만 하면 안된다. 리액트가 내부적으로 처리하기 때문에 해당 컴포넌트 내부에서 그 값을 사용할 수 없다. 해당 함수형 컴포는트에 ref 하고 싶은 경우 React.forwardRef 함수를 사용 하면 된다.

5.컴포넌트가 생성된 이유라고 하더라도 ref객체의 current 속성이 없을 수 있다.
조건부 렌더링을 하는 경우에는 컴포넌트가 생성된 이후라도 ref객체를 사용할 때 주의 해야한다.

관련 글

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~