🎫 사용자의 시점 변화 없는 그래프 스크롤 구현하기

분야	작성자	작성일
FE	조배경	24년 12월 03일

유지되지 않는 그래프의 현위치

이전으로 스크롤하며 새로운 데이터를 추가적으로 받아올 때, 부드럽게 이어지지 않고 그래프의 위치가 변화한다.

원인은 그래프 생성과 그래프 데이터 업데이트 로직이 하나의 useEffect안에 들어가있는데, 의존성 배열에 그래프 데이터가 포함되어 있다. 즉 데이터가 변화하면 그래프를 다시 생성하고 데이터를 업데이트하는 것이다.

이를 해결하기 위해 그래프를 한 번만 생성하고, 데이터는 계속해서 업데이트하도록 로직을 변경했다.

하나의 useEffect안에 그래프 생성, 테마 변경, 데이터 업데이트가 전부 이뤄졌는데 이를 각각 useEffect로 나눴다.

기존 코드

    interface UseChartProps {
      containerRef: RefObject<HTMLDivElement>;
      priceData: StockTimeSeriesResponse['priceDtoList'];
      volumeData: StockTimeSeriesResponse['volumeDtoList'];
    }
    
    const TransformPriceData = PriceSchema.transform((item) => ({
      time: new Date(item.startTime).toISOString().slice(0, 10),
      open: parseFloat(item.open),
      high: parseFloat(item.high),
      low: parseFloat(item.low),
      close: parseFloat(item.close),
    }));
    
    const TransformVolumeData = VolumeSchema.transform((item) => ({
      time: new Date(item.startTime).toISOString().slice(0, 10),
      value: parseFloat(item.volume),
    }));
    
    export const useChart = ({
      containerRef,
      priceData,
      volumeData,
    }: UseChartProps) => {
      const chart = useRef<IChartApi>();
      const containerInstance = containerRef.current;
    
      const { data: theme } = useGetUserTheme();
      const graphTheme = theme === 'light' ? lightTheme : darkTheme;
    
      useEffect(() => {
        if (!containerInstance) return;
    
        chart.current = createChart(containerInstance, {
          width: containerInstance.clientWidth,
          height: containerInstance.clientHeight,
          ...createChartOptions(graphTheme),
        });
    
        const volumeSeries = chart.current.addHistogramSeries(
          createVolumeOptions(),
        );
        volumeSeries.priceScale().applyOptions({
          scaleMargins: {
            top: 0.93,
            bottom: 0,
          },
        });
    
        const transformedVolumeData = volumeData.map((item) =>
          TransformVolumeData.parse(item),
        );
        const histogramData = getHistogramColorData(transformedVolumeData);
        volumeSeries.setData(histogramData);
    
        const candleSeries = chart.current.addCandlestickSeries(
          createCandlestickOptions(graphTheme),
        );
    
        const transformedPriceData = priceData.map((item) =>
          TransformPriceData.parse(item),
        );
        candleSeries.setData(transformedPriceData);
    
        return () => {
          chart.current?.remove();
        };
      }, [containerInstance, graphTheme, priceData, volumeData]);
    
      return chart;
    };

0️⃣ useRef 설정

const chart = useRef<IChartApi>();
const candleSeries = useRef<ReturnType<IChartApi['addCandlestickSeries']>>();
const volumeSeries = useRef<ReturnType<IChartApi['addHistogramSeries']>>();
const containerInstance = containerRef.current;

기존 코드에서는 volume, candle 그래프를 상수로 생성하여 커스텀해줬는데, 리렌더링 방지를 위해 useRef로 선언해줬다.

1️⃣ 그래프 생성

useEffect(() => {
  if (!containerInstance) return;

  // chart.current에는 차트 생성 값 저장
  chart.current = createChart(containerInstance, {
    width: containerInstance.clientWidth,
    height: containerInstance.clientHeight,
    ...createChartOptions(graphTheme),
  });
	
  // volumeSeries.current에는 volume 차트 생성 값 저장
  volumeSeries.current = chart.current.addHistogramSeries(
    createVolumeOptions(),
  );
  volumeSeries.current.priceScale().applyOptions({
    scaleMargins: {
      top: 0.93,
      bottom: 0,
    },
  });

  // candleSeries.current에는 캔들 차트 생성 값 저장
  candleSeries.current = chart.current.addCandlestickSeries(
    createCandlestickOptions(graphTheme),
  );

  // unmount 된다면 차트를 remove 해준다.
  return () => {
    chart.current?.remove();
  };
}, [containerInstance]);

• .current는 useRef의 참조값을 저장하고 업데이트하는 공간이다.
• chart, volumeSeries, candleSeries에 각각 차트를 생성하여 저장한다.

2️⃣ 테마 변경 처리

테마가 변경되는 것은 다른 사이클이기 때문에 또 다른 useEffect로 처리해줬다.

useEffect(() => {
  if (!chart.current || !candleSeries.current) return;

  // 차트와 candleSeries에 테마 적용
  chart.current.applyOptions(createChartOptions(graphTheme));
  candleSeries.current.applyOptions(createCandlestickOptions(graphTheme));
}, [graphTheme]);

volumeSeries는 데이터를 세팅할 때 따로 color를 넣어주기 때문에 여기서 따로 지정하지 않는다.

3️⃣ 데이터 업데이트

useEffect(() => {
  if (!candleSeries.current || !volumeSeries.current) return;

  // api로 받아오는 volumeData를 그래프 형식에 맞게 transform
  const transformedVolumeData = volumeData.map((item) =>
    TransformVolumeData.parse(item),
  );

  // api로 받아오는 PriceData를 그래프 형식에 맞게 transform
  const transformedPriceData = priceData.map((item) =>
    TransformPriceData.parse(item),
  );

  // histogram은 데이터에 color 값 추가
  const histogramData = getHistogramColorData(transformedVolumeData);
	
  // candleSeries.current에 데이터 저장
  candleSeries.current.setData(transformedPriceData);
  
  // volumeSeries.current에 데이터 저장
  volumeSeries.current.setData(histogramData);
}, [priceData, volumeData]);

• 여기서는 데이터가 변경됐을 때 업데이트하는 로직만 묶어둔다.

결과

스크롤하여 데이터를 계속 불러와도 그래프의 현위치가 바뀌지 않는다!