TIL 22 React ref

리액트에서 돔요소를 직접 조작해야 할때 ref를 사용해야된다. 스크롤 이벤트로 해당 element로 이동해야할때도 쓰인다.

먼저 ref 쓰기위해서 useRef함수를 사용한다고 선언을 해야한다!!!

 

import React, { useRef } from 'react';

 

그리고 ref로 지정할 변수를 선언을 해줘야한다

 

const pageHeaderRef = useRef();

 

<LoginHeader ref={pageHeaderRef}>

이동하고 싶은 요소에다가 ref속성을 쓰고 선언한 변수를 넣어준다.

 

  const goToPagePosition = position => {
    position.current.scrollIntoView({
      behavior: 'smooth',
    });
  };

그리고 scrollIntoView를 사용할 변수에다가 ref변수명.current.scrollIntoView를 해주면 완성이다!!!!

공식문서에 찾아보면 ref의 사용은 최대한 자제하라고 나와있긴하지만 Dom요소를 직접 접근할때 유용한 함수인거같다.