React 자동 최적화: Goodbye memo, useMemo, useCallback?-JS 튜토리얼-php.cn

React Automatic Optimization: Goodbye memo, useMemo, and useCallback?

React 19는 성능 최적화, 특히 메모 처리 방식을 크게 개선했습니다. memo, useMemo, useCallback이 어떻게 발전했는지, 그리고 기본적으로 어떻게 최적화되었는지 살펴보겠습니다.

React에서 메모화의 진화

이전 React 18에서는 개발자가 불필요한 재렌더링을 방지하고 성능을 최적화하기 위해 메모화 기술을 언제 사용해야 하는지 신중하게 고려해야 했습니다. React 19는 이러한 도구를 더 효율적이고 많은 경우 불필요하게 만드는 자동 최적화를 도입하여 이러한 패러다임을 바꿉니다.

React 19의 메모: 더 스마트한 구성요소 메모화

React 19의 메모는 이제 구성 요소를 다시 렌더링할 시기에 대해 훨씬 더 지능적입니다. 프레임워크는 prop 변경 사항과 해당 변경 사항이 구성 요소 출력에 미치는 영향을 자동으로 추적합니다.

예시 1: 기본 소품 비교

// React 18
const UserCard = memo(({ user, onUpdate }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={onUpdate}>Update</button>
    </div>
  );
});

// React 19
// memo is now automatically optimized
const UserCard = ({ user, onUpdate }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={onUpdate}>Update</button>
    </div>
  );
});

로그인 후 복사

예 2: 중첩된 구성요소

// React 18
const CommentThread = memo(({ comments, onReply }) => {
  return (
    <div>
      {comments.map(comment => (
        <Comment 
          key={comment.id}
          {...comment}
          onReply={onReply}
        />
      ))}
    </div>
  );
});

// React 19
const CommentThread = ({ comments, onReply }) => {
  return (
    <div>
      {comments.map(comment => (
        <Comment 
          key={comment.id}
          {...comment}
          onReply={onReply}
        />
      ))}
    </div>
  );
});

로그인 후 복사

useMemo: 자동 값 메모

React 19의 useMemo는 이제 메모가 유용한 시기를 자동으로 감지하도록 최적화되어 수동 최적화의 필요성이 줄어듭니다.

예 1: 비용이 많이 드는 계산

// React 18
const ExpensiveChart = ({ data }) => {
  const processedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      value: complexCalculation(item.value)
    }));
  }, [data]);

  return <ChartComponent data={processedData} />;
};

// React 19
const ExpensiveChart = ({ data }) => {
  // React 19 automatically detects expensive operations
  const processedData = data.map(item => ({
    ...item,
    value: complexCalculation(item.value)
  }));

  return <ChartComponent data={processedData} />;
};

로그인 후 복사

예 2: 객체 참조

// React 18
const UserProfile = ({ user }) => {
  const userStyles = useMemo(() => ({
    background: user.premium ? 'gold' : 'silver',
    border: `2px solid ${user.active ? 'green' : 'gray'}`
  }), [user.premium, user.active]);

  return <div>



<h3>
  
  
  Example 3: Derived State
</h3>



<pre class="brush:php;toolbar:false">// React 18
const FilteredList = ({ items, filter }) => {
  const filteredItems = useMemo(() => 
    items.filter(item => item.category === filter),
    [items, filter]
  );

  return <List items={filteredItems} />;
};

// React 19
const FilteredList = ({ items, filter }) => {
  // React 19 automatically optimizes derived state
  const filteredItems = items.filter(item => item.category === filter);
  return <List items={filteredItems} />;
};

로그인 후 복사

useCallback: 더욱 스마트해진 함수 메모

React 19의 useCallback은 이제 기능 안정성과 참조 평등에 대해 더욱 지능적입니다.

예제 1: 이벤트 핸들러

// React 18
const TodoList = ({ todos, onToggle }) => {
  const handleToggle = useCallback((id) => {
    onToggle(id);
  }, [onToggle]);

  return todos.map(todo => (
    <TodoItem 
      key={todo.id}
      {...todo}
      onToggle={handleToggle}
    />
  ));
};

// React 19
const TodoList = ({ todos, onToggle }) => {
  // React 19 automatically maintains function stability
  const handleToggle = (id) => {
    onToggle(id);
  };

  return todos.map(todo => (
    <TodoItem 
      key={todo.id}
      {...todo}
      onToggle={handleToggle}
    />
  ));
};

로그인 후 복사

예제 2: 종속성이 있는 콜백

// React 18
const SearchComponent = ({ onSearch, searchParams }) => {
  const debouncedSearch = useCallback(
    debounce((term) => {
      onSearch({ ...searchParams, term });
    }, 300),
    [searchParams, onSearch]
  );

  return <input onChange={e => debouncedSearch(e.target.value)} />;
};

// React 19
const SearchComponent = ({ onSearch, searchParams }) => {
  // React 19 handles function stability automatically
  const debouncedSearch = debounce((term) => {
    onSearch({ ...searchParams, term });
  }, 300);

  return <input onChange={e => debouncedSearch(e.target.value)} />;
};

로그인 후 복사

예제 3: 복잡한 이벤트 처리

// React 18
const DataGrid = ({ data, onSort, onFilter }) => {
  const handleHeaderClick = useCallback((column) => {
    onSort(column);
    onFilter(column);
  }, [onSort, onFilter]);

  return (
    <table>
      <thead>
        {columns.map(column => (
          <th key={column} onClick={() => handleHeaderClick(column)}>
            {column}
          </th>
        ))}
      </thead>
      {/* ... */}
    </table>
  );
};

// React 19
const DataGrid = ({ data, onSort, onFilter }) => {
  // React 19 optimizes function creation and stability
  const handleHeaderClick = (column) => {
    onSort(column);
    onFilter(column);
  };

  return (
    <table>
      <thead>
        {columns.map(column => (
          <th key={column} onClick={() => handleHeaderClick(column)}>
            {column}
          </th>
        ))}
      </thead>
      {/* ... */}
    </table>
  );
};

로그인 후 복사