본문 바로가기
React

콜백 ref 사용하기

by 바나냥 2020. 12. 14.
function MeasureExample() {
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <>
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}

 

 

reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

 

Hooks FAQ – React

A JavaScript library for building user interfaces

reactjs.org

 

'React' 카테고리의 다른 글

map 한번만 렌더링하기 : useMemo  (0) 2020.12.08
컴포넌트 width 구하기  (0) 2020.12.07
[React] 요소에 style 속성 추가  (0) 2020.11.25
React Slider 라이브러리  (0) 2020.11.10
styled component로 props 주기  (0) 2020.11.10

댓글