리액트에서 함수형 프로그래밍을 지향하는 이유

class UserProfile extends React.Component {
  state = { name: '', loading: false };
  
  async componentDidMount() {
    this.setState({ loading: true });
    const user = await fetchUser(this.props.userId);
    this.setState({ name: user.name, loading: false });
  }
  
  render() {
    return <div>{this.state.loading ? 'Loading...' : this.state.name}</div>;
  }
}

function UserProfile({ userId }) {
  const { user, loading } = useUser(userId);
  
  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}
 
// 테스트 시 props만 확인하면 됨 (Hook은 별도 테스트)

function formatPrice(price, currency = 'USD') {
  return `${currency} ${price.toFixed(2)}`;
}
 
// 입력만으로 결과 예측 가능
expect(formatPrice(10.5)).toBe('USD 10.50');
expect(formatPrice(20, 'KRW')).toBe('KRW 20.00');

// 불변성을 지킬 때
const TodoItem = React.memo(({ todo, onToggle }) => (
  <div onClick={() => onToggle(todo.id)}>
    {todo.text} {todo.completed ? '✓' : '○'}
  </div>
));
 
// props가 참조상 같으면 리렌더링 안 됨

function TodoList({ todos, filter }) {
  // todos 배열이 새로 생성될 때만 필터링 재실행
  const filteredTodos = useMemo(() => 
    todos.filter(todo => todo.category === filter), 
    [todos, filter]
  );
  
  // 의존성이 변하지 않으면 함수 재생성 안 됨
  const handleToggle = useCallback((id) => 
    setTodos(prev => prev.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo

// ❌ 직접 수정 - 최적화 도구들이 변화를 감지하지 못함
function badUpdate() {
  const newTodos = todos;
  newTodos[0].completed = true;
  setTodos(newTodos); // 참조가 같아서 리렌더링 안 됨
}
 
// ✅ 새로운 객체 생성 - 최적화 도구들이 정확히 동작
function goodUpdate() {
  setTodos(prev => prev.map((todo, index) => 
    index === 0 ? { ...todo, completed: true } : todo
  ));
}

// ❌ 깊은 비교 - 모든 속성을 재귀적으로 확인 (느림)
function deepEqual(obj1, obj2) {
  // 객체의 모든 key-value를 비교해야 함
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}
 
// ✅ 참조 비교 - 메모리 주소만 확인 (빠름)
function shallowEqual(obj1, obj2) {
  return obj1 === obj2; // 한 번의 비교로 끝
}

function Counter() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: 'John', age: 25 });
  
  // ✅ 원시값은 자동으로 불변성 보장
  const increment = () => setCount(prev => prev + 1);
  
  // ✅ 객체는 새로 생성해야 변화 감지됨
  const updateAge = () => setUser(prev => ({ ...prev, age: prev.age + 1 }));
  

function DataTable({ items }) {
  // items가 참조상 같으면 정렬을 다시 하지 않음
  const sortedItems = useMemo(() => {
    console.log('정렬 실행!'); // 언제 실행되는지 확인 가능
    return [...items].sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);
  
  return (
    <table>
      {sortedItems.map(item => (
        <tr key={item.id}>
          <td>{item.name}</td>
          <

function ProductList({ products, searchTerm }) {
  // searchTerm이나 products가 바뀌지 않으면 필터링을 다시 하지 않음
  const filteredProducts = useMemo(() => {
    console.log('필터링 실행!');
    return products.filter(p => 
      p.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [products, searchTerm]);
  
  return <div>{filteredProducts.map(/* ... */)}</div>;
}

// ❌ 순수하지 않음 - 외부 상태에 의존
let discount = 0.1;
function calculatePrice(price) {
  return price * (1 - discount); // 외부 변수 참조
}
 
// ✅ 순수함 - 모든 입력이 매개변수로 전달됨
function calculatePrice(price, discount = 0) {
  return price * (1 - discount);
}

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Date.now(), text: action.text, completed: false }];
    case 'TOGGLE_TODO':
      return state.map(todo => 
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.id);
    default:
      return

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  
  return [value, setValue];
}
 
// 여러 컴포넌트에서 재사용 가능
function Settings() {