React의 컴포넌트 리렌더링 최적화 - React.memo, useMemo, useCallback

import React, { useState, useMemo, useCallback } from 'react'; const ExpensiveComponent = React.memo(({ value }) => { console.log('ExpensiveComponent rendered'); return

Computed Value: {value}

; }); export default function App() { const [count, setCount] = useState(0); const [text, setText] = useState(''); // useMemo로 값 계산 최적화 const expensiveValue = useMemo(() => { console.log('Computing expensive value'); return count * 2; }, [count]); // useCallback으로 함수 메모이제이션 const handleClick = useCallback(() => { setCount((prev) => prev + 1); }, []); return (

React 최적화

setText(e.target.value)} placeholder="Type something..." />

Count: {count}

); }