📊 Timer 활용한 그래프 상승 애니메이션 아이디어 개발

🚀 React에서 useEffect를 활용한 그래프 애니메이션 적용법

 

https://www.loom.com/share/c80fd4298f6d420e9d182623ded33997?sid=56b1c360-1dd4-427a-8208-ac537fe408a0

 

recharts를 활용하여 막대 그래프(BarChart)가 부드럽게 위에서 아래로 솟아오르는 효과를 구현합니다.

👉 핵심 포인트는 초기 데이터(0 값)를 useState로 설정하고, useEffect를 사용하여 값을 점진적으로 증가시키는 것입니다.

 

📌 메커니즘와 아이디어 그리고 상황

저는 프론트 개발을 하면서 백엔드 개발자 분들의 서버 배포 전에는 늘 더미데이터를 써서 서버 api가 없을때 제가 구현한 동작을 테스트하고는 했습니다.

 

보여지는 시각적 그래프가 0 -> (갖고있는 데이터의 값) 으로 상승하는 효과를 추가한다면 사용자 경험이 향상하지 않을까 싶었습니다.

 

이때 timer 활용 및 zero 더미 데이터를 하나 더 추가한 후, zero 더미 데이터 -> 나의 데이터 보여주면 될 것 같았습니다.

 

📌 기대효과

 

🔹 처음 그래프가 렌더링될 때 모든 막대가 0에서 시작 

🔹 useEffect로 데이터를 업데이트하며 애니메이션 적용

🔹 부드럽게 위에서 아래로 솟아오르는 그래프 구현

🔹 사용자 경험 증가

 

🎯 완성된 코드 (GraphPage.jsx) <친절한 주석을 곁들인>

import { useContext, useEffect, useState } from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  Legend,
  CartesianGrid,
  Cell,
} from 'recharts';
import { GoalContext } from '../context/GoalContext';
import '../style/GraphPage.scss';
import { SidebarContext } from '../context/SidebarContext';

const GraphPage = () => {
  const { goalAmount } = useContext(GoalContext);
  const { isSidebarOpen } = useContext(SidebarContext);

  // 주요 소비 항목 (더미 데이터)
  const expenseItems = [
    { category: '카페 & 음료', item: '스타벅스 라떼', amount: 5_000 },
    { category: '식사', item: '점심 식사 (김치찌개)', amount: 12_000 },
    { category: '생활용품', item: '세제 구입', amount: 8_000 },
    { category: '여가 활동', item: '넷플릭스 구독', amount: 14_000 },
    { category: '기타', item: '책 구입', amount: 20_000 },
  ];

  const totalSpending = expenseItems.reduce((acc, cur) => acc + cur.amount, 0);

  // ✅ 초기 그래프 데이터 (모든 값 0)
  const [animatedData, setAnimatedData] = useState([
    { label: '총 지출', value: 0 },
    { label: '총 소비', value: 0 },
    { label: '목표 금액', value: 0 },
  ]);

  // ✅ 실제 그래프 데이터
  const originalData = [
    { label: '총 지출', value: totalSpending },
    { label: '총 소비', value: 40_000 },
    { label: '목표 금액', value: goalAmount || 0 },
  ];

  // ✅ `useEffect`를 사용하여 애니메이션 적용
  useEffect(() => {
    // 1️⃣ `setTimeout`을 이용해 비동기적으로 실행 (애니메이션 효과 부드럽게)
    const timeout = setTimeout(() => {
      // 2️⃣ 애니메이션이 적용될 데이터를 업데이트
      setAnimatedData(originalData);
    }, 300); // 0.3초 후 실행 (부드러운 시작 효과)

    // 3️⃣ `useEffect` 정리 함수: 불필요한 `setTimeout` 클리어 (메모리 관리)
    return () => clearTimeout(timeout);
  }, [goalAmount]); // 🔄 `goalAmount`가 변경될 때마다 실행

  return (
    <div className={`graph-wrapper ${isSidebarOpen ? 'sidebar-active' : ''}`}>
      <div className="graph-left">
        <div className="expense-graph-card">
          <h3>지출, 소비, 목표 금액 비교 그래프</h3>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={animatedData} barGap={10}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="label" tick={{ fontSize: 14 }} />
              <YAxis tick={{ fontSize: 14 }} />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'white',
                  border: 'none',
                  boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)',
                }}
                itemStyle={{ color: '#001f5c', fontWeight: 600 }}
              />
              <Legend verticalAlign="top" height={36} />
              <Bar dataKey="value" fill="#001f5c" radius={[10, 10, 0, 0]}>
                {animatedData.map((entry, index) => (
                  <Cell key={`cell-${index}`} style={{ transition: 'height 1s ease-in-out' }} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
};

export default GraphPage;

 

 

📌 핵심 코드 설명 (useEffect 애니메이션 원리)

useEffect(() => {
  const timeout = setTimeout(() => {
    setAnimatedData(originalData); // ✅ 0에서 목표 값으로 변경
  }, 300); // 0.3초 후 실행 (부드러운 시작 효과)

  return () => clearTimeout(timeout); // ✅ 불필요한 실행 방지 (메모리 관리)
}, [goalAmount]); // 🔄 `goalAmount` 변경 시 실행

 

 

✅ 혹시나 하는 마음에... goalAmount가 useEffect 의존성 배열에 포함되어 있는가? (그리고 goalAmount는 무엇인가?)

 

goalAmount는 전역 상태 관리(Context API)를 통해 가져오는 사용자의 목표금액입니다.

사용자가 목표 금액을 변경하면 그래프도 업데이트되어야 합니다.

 

또한, 사용자가 목표 금액을 바꾼다면 그에 따라 그래프 애니메이션을 다시 실행합니다.

 

🔹 예제 시나리오

1. 사용자가 목표 금액을 100,000원에서 200,000원으로 변경

2. goalAmount 값이 바뀌면서 useEffect가 실행

 

 

추가) originalData 배열이 goalAmount를 포함하고 있기 때문

• originalData는 최종적으로 그래프에 표시할 데이터를 저장하고 있습니다.

• 하지만 originalData 내부에 goalAmount가 포함되어 있으므로,

goalAmount가 바뀌면 originalData도 바

const originalData = [
  { label: '총 지출', value: totalSpending },
  { label: '총 수입', value: 40_000 },
  { label: '목표 금액', value: goalAmount || 0 }, // ✅ goalAmount 사용
];

 

• 만약 의존성 배열에 goalAmount를 포함하지 않으면 목표 금액이 변경되어도 그래프가 업데이트되지 않습니다.

• 예를 들어, 사용자가 목표 금액을 300,000원 → 500,000원으로 변경했을 때,

useEffect가 실행되지 않으면 그래프는 여전히 300,000원으로 남아있을 것입니다.

 

목표 금액 변경 시 애니메이션을 다시 실행하기 위해 (useEffect의 철학)

• 기존 값이 바로 변경되는 것이 아니라 애니메이션을 적용하면서 부드럽게 변경되어야 합니다.

• goalAmount가 변경될 때마다 setAnimatedData가 실행되도록 의존성 배열에 포함해야합니다

 

 

🚀 useEffect를 활용한 애니메이션 구현 과정

 

1️⃣ 초기 값 설정 (useState)

const [animatedData, setAnimatedData] = useState([
  { label: '총 지출', value: 0 },
  { label: '총 소비', value: 0 },
  { label: '목표 금액', value: 0 },
]);

• 모든 그래프의 값이 0에서 시작

• 그래프가 한 번에 나타나는 게 아니라 점진적으로 증가하도록 설정

 

2️⃣ useEffect를 활용하여 데이터 변경

useEffect(() => {
  const timeout = setTimeout(() => {
    setAnimatedData(originalData);
  }, 300);
  return () => clearTimeout(timeout);
}, [goalAmount]);

 

🔹 초기 데이터(0) → 목표 데이터(실제 값)로 변경

🔹 setTimeout을 활용하여 0.3초 뒤 데이터를 업데이트

🔹 return () => clearTimeout(timeout);을 사용하여 불필요한 실행을 방지

 

 

3️⃣ Cell을 활용한 막대 그래프 애니메이션

<Bar dataKey="value" fill="#001f5c" radius={[10, 10, 0, 0]}>
  {animatedData.map((entry, index) => (
    <Cell key={`cell-${index}`} style={{ transition: 'height 1s ease-in-out' }} />
  ))}
</Bar>

🔹 각 **막대(Bar)**에 개별적으로 애니메이션 효과 적용

🔹 transition: height 1s ease-in-out;을 추가하여 부드럽게 올라오는 효과

 

 

🎯 결과

 

🔥 완성된 그래프는 초기에는 0에서 시작한 후, 부드럽게 위로 올라오며 애니메이션 효과가 적용됩니다!

✔ useEffect를 활용하여 렌더링 후 데이터 업데이트

✔ setTimeout을 사용하여 자연스럽게 변하는 느낌을 줌

✔ Cell에 transition을 적용하여 그래프가 위로 솟아오르는 효과 추가