ECharts Resize

들어가기전

• 회사 온보딩 과정 중 Echart 라이브러리 resize 관련 이슈가 발생하여 정리한 글입니다.

문제

• Echarts 라이브러리 사용 중 부모 Element 요소가 display : flex 상태일 때 Echarts 라이브러리가 크기를 찾지 못하는 문제가 발생하였다.
  - 부모 요소에 flex 설정이 되어있지 않다면, Echarts 자체에서 resize를 지원한다.

시도해본 방법

1. ref.current.clientWidth 값을 useEffect로 subscribe한 뒤 해당 값이 바뀔때 마다 재렌더링 될꺼라고 추측.
- 가장 처음 생각한 방법이지만, 아무리 window size를 줄여도 리액트 컴포넌트가 재렌더링될 명분이 없으므로 실패

2. window 전역객체에 resize 이벤트를 등록해 이벤트가 발생할 때 마다 element에 width 값과 여백 값을 찾아준다.
- 브라우저가 resize 될 때마다 정상적으로 width 값을 찾아 주었던 것처럼 보였지만, 반응형 웹으로 구현했다는 사실을 망각했다. 특정 media screen 값이 변경될때 font-size를 변경하도록 설정해놨기 때문에 특정 width에 도착해도 resize 이벤트가 등록된 시점에 rem값을 따라가 정상 작동이 되지 않는걸로 추정 된다.

해결 방법

• Echarts 부모 요소에 size가 변경될 때 해당 부모 요소에 크기 값을 찾아주는 방법으로 해결하였다.
• 특정 element size를 관찰하는 방법으로 ResizeObserver API를 찾았다.

ResizeObserver

• new ResizeObserver를 통해 생성한 인스턴스로 관찰자를 초기화하고 관찰할 Element를 지정합니다.
  생성자는 1개의 인수(callback)를 가집니다.
• Methods
  - ResizeObserver.disconnect()
  - Elemet 특정 관찰자의 관찰된 모든 대상 관찰 종료
  • ResizeObserver.observe()
    • 지정된 요소 관찰 시작
  • ResizeObserver.unobserve()
    - 지정된 요소 관찰 종료
• entries : ResizeObserverEntry 인스턴스의 배열
  • contentRect : 관찰 대상의 요소 컨테이너 정보
  • target : 관찰 대상 요소
  • contentBoxSize : 관찰 대상의 content-box 크기
  • border BoxSize : 관찰 대상의 border-box(content + padding + border)크기

code

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

type elementType = {
  current: HTMLDivElement | null;
};

const useElementObserver = (elRef: elementType) => {
  const [size, setSize] = useState(0);
  const observer = useRef(
    new ResizeObserver((entries) => {
      const { width } = entries[0].contentRect;
      setSize(width);
    })
  );

  useEffect(() => {
    if (elRef.current) observer.current.observe(elRef.current);

    return () => {
      if (elRef.current) observer.current.unobserve(elRef.current);
    };
  }, [elRef, observer]);

  return size;
};
export default useElementObserver;

function ChartContainer() {
	const chartRef = useRef<HTMLDivElement>(null);
  	const observerElWidth = useElementObserver(chartRef);
  
	return (
    	<LineChart width={observerElWidth} />
    )
}

리사이즈 버그 화면

리사이즈 버그 해결 화면