컴포넌트 생명주기 해부

const { useState, useEffect } = React;

  function LifecycleUnit({ id }) {
    const [log, setLog] = useState([]);
    const addLog = msg => setLog(prev => [...prev, msg]);

    useEffect(() => {
      addLog(`[MOUNT] Unit ${id} 온라인`);
      return () => addLog(`[UNMOUNT] Unit ${id} 오프라인`);
    }, []);

    useEffect(() => {
      addLog(`[UPDATE] Unit ${id} 업데이트`);
    }, [id]);

    return (
      <div style={{border:'1px solid #1a1a1a', padding:'8px', marginBottom:'8px'}}>
        <div style={{color:'#10b981', marginBottom:'4px', fontSize:'12px'}}>UNIT {id}</div>
        {log.map((l, i) => <div key={i} style={{color:'#888', fontSize:'11px'}}>{l}</div>)}
      </div>
    );
  }

  function App() {
    const [show, setShow] = useState(true);
    const [id, setId] = useState(800);
    return (
      <div>
        <div style={{display:'flex', gap:'8px', marginBottom:'12px'}}>
          <button onClick={() => setShow(s => !s)} style={{background:'#10b981', color:'#080808', border:'none', padding:'6px 12px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>{show ? 'UNMOUNT' : 'MOUNT'}</button>
          <button onClick={() => setId(i => i + 100)} style={{background:'#333', color:'#e8e8e8', border:'none', padding:'6px 12px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>UPDATE ID</button>
        </div>
        {show && <LifecycleUnit id={id} />}
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);