잠시만 기다려 주세요.
App.js와 CompanySearch 컴포넌트 내에서 Tailwind CSS 스타일링, 쿼리 문자열, 집계된 데이터, 필터링된 데이터, 최대 지출액 변수 등을 관리하며 React 애플리케이션의 기본 구조를 보여줍니다. ⚛️useMemo 훅과 Map 객체를 활용하여 records 배열에서 각 회사의 총 지출액을 효율적으로 계산하고 집계합니다. 이는 동일한 회사 이름을 가진 레코드를 결합하고 총 지출액을 합산하는 핵심 기능입니다. 📊useMemo를 사용하여 aggregated 변수를 한 번만 계산하고, filtered 변수는 aggregated 데이터나 query가 변경될 때만 다시 계산하도록 하여 불필요한 재렌더링과 계산을 방지합니다. 🚀query)에 따라 aggregated 데이터를 대소문자 구분 없이(toLowerCase()) 실시간으로 필터링하여 매칭되는 회사 목록을 동적으로 업데이트합니다. 🔍bg-yellow-200)을 적용하고 data-test-id를 top-spender로 변경하여 시각적으로 강조합니다. ✨isTop 변수를 활용한 삼항 연산자로 data-test-id와 className을 동적으로 변경하고, totalSpend를 표시하여 UI를 조건부로 업데이트하는 방법을 시연합니다. 💡useStateuseEffectuseMemomapfilterreduceMapRecommanded Videos
2025. 12. 10.
2024. 12. 1.
2025. 9. 3.
2025. 10. 31.
2025. 12. 24.
2024. 5. 30.