프론트엔드 성능 최적화 3단계 - Step 1 실행 로직 경량화

import { lazy, Suspense } from 'react'

const Chart = lazy(() => import('./Chart')) // ./Chart를 별도 청크로 분리
export default function Dashboard() {
 return (
  <Suspense fallback={<div>차트 불러오는 중…</div>}>
   <Chart />
  </Suspense>
 )
}

const MarkdownPreview = lazy(() =>
 import('./Markdown').then((m) => ({ default: m.MarkdownPreview })),
)

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { lazy, Suspense } from 'react'

const Home = lazy(() => import('./routes/Home'))
const Settings = lazy(() => import('./routes/Settings'))

const router = createBrowserRouter([
 {
  path: '/',
  element: (
   <Suspense fallback={<div>로딩…</div>}>
    <Home />
   </Suspense>
  ),
 },
 {
  path: '/settings',
  element: (
   <Suspense fallback={<div>로딩…</div>}>
    <Settings />
   </Suspense>
  ),
 },
])

export default () => <RouterProvider router={router} />

'use client'
import dynamic from 'next/dynamic'

const Editor = dynamic(() => import('../components/Editor'), {
 ssr: false, // 브라우저 전용 라이브러리일 때
 loading: () => <div>에디터 로딩 중...</div>,
})

export default function Page() {
 return <Editor />
}

const UserCard = React.memo(function UserCard({ user }) {
 return <div>{user.name}</div>
})

const memoizedValue = useMemo(() => {
 return expensiveCalculation(value)
}, [value])

const handleClick = useCallback(() => {
 console.log('clicked')
}, [])

// ❌ 안 좋은 예: 하나의 컴포넌트에 여러 책임이 뒤섞임
function UserDashboard({ user, notifications }) {
 return (
  <div>
   <h1>{user.name}님 환영합니다</h1>
   <button onClick={()=> logout()}>로그아웃</button>
   <ul>
    {notifications.map((n) => (
     <li key={n.id}>{n.message}</li>
    ))}
   </ul>
  </div>
 )
}

// ✅ 좋은 예: 역할을 분리하여 각각의 책임만 담당
function UserGreeting({ user }) {
 return <h1>{user.name}님 환영합니다</h1>
}

function LogoutButton() {
 return <button onClick={()=> logout()}>로그아웃</button>
}

const NotificationList = React.memo(function NotificationList({
 notifications,
}) {
 return (
  <ul>
   {notifications.map((n) => (
    <li key={n.id}>{n.message}</li>
   ))}
  </ul>
 )
})

function UserDashboard({ user, notifications }) {
 return (
  <div>
   <UserGreeting user={user} />
   <LogoutButton />
   <NotificationList notifications={notifications} />
  </div>
 )
}

<table id="grid">
 <!-- 많은 <td> ... -->
</table>

const table = document.getElementById('grid')
let selectedTd

table.addEventListener('click', (event) => {
 // 1) 실제 타깃에서 가장 가까운 <td> 찾기
 const td = event.target.closest('td')
 if (!td) return // 관심 없는 영역
 if (!table.contains(td)) return // 중첩 테이블 등 범위 이탈 방지

 highlight(td)
})

function highlight(td) {
 if (selectedTd) selectedTd.classList.remove('highlight')
 selectedTd = td
 selectedTd.classList.add('highlight')
}

<div id="menu">
 <button data-action="save">저장</button>
 <button data-action="load">불러오기</button>
 <button data-action="search">검색</button>
</div>
<script>
 class Menu {
  constructor(elem) {
   this._elem = elem
   elem.addEventListener('click', this.onClick.bind(this))
  }
  save() {
   /*...*/
  }
  load() {
   /*...*/
  }
  search() {
   /*...*/
  }
  onClick(e) {
   const action = e.target.dataset.action
   if (action && typeof this[action] === 'function') this[action]()
  }
 }
 new Menu(document.getElementById('menu'))
</script>

type Item = { id: string; label: string }

export function ItemList({ items }: { items: Item[] }) {
 const onClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const el = (e.target as HTMLElement).closest<HTMLElement>('[data-action]')
  if (!el) return
  const id = el.dataset.id!
  el.dataset.action === 'select' && selectItem(id)
  el.dataset.action === 'remove' && removeItem(id)
 }

 return (
  <ul onClick={onClick}>
   {items.map((it) => (
    <li key={it.id}>
     <button data-action="select" data-id={it.id}>
      {it.label}
     </button>
     <button data-action="remove" data-id={it.id}>
      삭제
     </button>
    </li>
   ))}
  </ul>
 )
}

<input type="text" id="input" />

<script>
 const searchInput = document.getElementById('#input')
 searchInput.addEventListener('input', function () {
  console.log('검색 요청', e.target.value)
 })
</script>

<input type="text" id="input" />

<script>
 const searchInput = document.getElementById('#input')
 searchInput.addEventListener(
  'input',
  debounce(() => {
   console.log('검색 요청', e.target.value)
  }, 300),
 )
</script>

<script>
 // 쓰로틀링 함수 정의
 function throttle(func, delay) {
  let lastCall = 0
  return function (...args) {
   const now = new Date().getTime()
   if (now - lastCall >= delay) {
    lastCall = now
    func.apply(this, args)
   }
  }
 }

 const searchInput = document.getElementById('input')

 searchInput.addEventListener(
  'input',
  throttle((e) => {
   console.log('검색 요청', e.target.value)
  }, 300),
 )
</script>

import React, { useState, useCallback } from 'react'

// 간단한 디바운스 유틸
function debounce<T extends (...args: any[])=> void>(func: T, delay: number) {
 let timer: ReturnType<typeof setTimeout>
 return (...args: Parameters<T>) => {
  clearTimeout(timer)
  timer = setTimeout(() => func(...args), delay)
 }
}

export default function SearchBox() {
 const [query, setQuery] = useState('')

 // 디바운싱된 핸들러
 const handleChange = useCallback(
  debounce((e: React.ChangeEvent<HTMLInputElement>) => {
   console.log('검색 요청:', e.target.value)
   setQuery(e.target.value)
  }, 300),
  [],
 )

 return <input type="text" placeholder="검색어 입력" onChange={handleChange} />
}

import React, { useEffect } from 'react'

// 간단한 쓰로틀 유틸
function throttle<T extends (...args: any[])=> void>(func: T, delay: number) {
 let lastCall = 0
 return (...args: Parameters<T>) => {
  const now = Date.now()
  if (now - lastCall >= delay) {
   lastCall = now
   func(...args)
  }
 }
}

export default function ScrollLogger() {
 useEffect(() => {
  const handleScroll = throttle(() => {
   console.log('스크롤 위치:', window.scrollY)
  }, 200)

  window.addEventListener('scroll', handleScroll)
  return () => window.removeEventListener('scroll', handleScroll)
 }, [])

 return <div style={{ height: '200vh' }}>스크롤 테스트</div>
}

// ❌ 클로저가 cache를 계속 참조 → 메모리 누수
function useData() {
 let cache: any = null
 return function getData() {
  if (!cache) {
   cache = fetchData()
  }
  return cache
 }
}

// ✅ 해결책 1: WeakMap 사용으로 참조 해제 가능
function useDataWithWeakMap() {
 const cache = new WeakMap()
 return function getData(key: object) {
  if (!cache.has(key)) {
   cache.set(key, fetchData())
  }
  return cache.get(key)
 }
}

// ✅ 해결책 2: 클로저를 반환하는 함수 자체를 null로 설정
function createDataHandler() {
 let cache: any = null
 return function getData() {
  if (!cache) {
   cache = fetchData()
  }
  return cache
 }
}

const dataHandler = createDataHandler()
// 사용 완료 후
dataHandler = null // 클로저 참조 해제

// ❌ 전역 변수 선언 누락 → 메모리 누수
let globalData = null

function useData() {
 globalData = fetchData()
 return globalData
}

// ✅ 해결책: 전역 변수 선언 추가
let globalData = null

function useData() {
 globalData = fetchData()
 return globalData
}

useEffect(() => {
 const handler = () => console.log('scroll')
 window.addEventListener('scroll', handler)

 return () => {
  // ✅ 언마운트 시 반드시 해제
  window.removeEventListener('scroll', handler)
 }
}, [])

if (process.env.NODE_ENV === 'development') {
 console.log(heavyObject)
}

useEffect(() => {
 const timer = setInterval(() => {
  console.log('tick')
 }, 1000)

 return () => {
  // ✅ 반드시 해제
  clearInterval(timer)
 }
}, [])