React 성능 익히기: 불필요한 재렌더링 방지를 위한 개발자 가이드-JS 튜토리얼-php.cn

React 성능 익히기: 불필요한 재렌더링 방지를 위한 개발자 가이드

Barbara Streisand

풀어 주다： 2025-01-04 21:47:41

원래의

168명이 탐색했습니다.

Mastering React Performance: A Developer

React의 가상 DOM 및 구성 요소 기반 아키텍처는 놀라울 정도로 효율적이지만 적절한 최적화가 없으면 애플리케이션이 여전히 성능 문제를 겪을 수 있습니다. 불필요한 재렌더링을 제거하고 React 앱의 성능을 향상시키기 위한 입증된 전략을 살펴보겠습니다.

리렌더링 이해: 재단

최적화하기 전에 React 구성 요소가 다시 렌더링되는 시기와 이유를 이해해야 합니다.

구성요소의 상태가 변경되는 경우
소품이 바뀔 때
상위 구성 요소가 다시 렌더링될 때

모든 재렌더링이 나쁜 것은 아니지만 불필요한 재렌더링은 성능에 영향을 줄 수 있습니다. 이를 예방하는 방법을 살펴보겠습니다.

1. React.memo: 첫 번째 방어선

const MovieCard = React.memo(({ title, rating, onLike }) => {
  console.log(`MovieCard rendered: ${title}`);
  return (
    <div className="card">
      <h3>{title}</h3>
      <span>Rating: {rating}/10</span>
      <button onClick={onLike}>Like</button>
    </div>
  );
});

// Usage
<MovieCard 
  title="Inception" 
  rating={9.3} 
  onLike={() => handleLike('inception')} 
/>

로그인 후 복사

? 프로 팁: React.memo는 강력하지만 전략적으로 사용하세요. 모든 것을 메모하면 실제로 성능이 저하될 수 있습니다.

2. useCallback: 함수 참조 안정화

const MovieList = () => {
  const [movies, setMovies] = useState([]);

  const handleLike = useCallback((movieId) => {
    setMovies(prevMovies => 
      prevMovies.map(movie => 
        movie.id === movieId 
          ? { ...movie, likes: movie.likes + 1 }
          : movie
      )
    );
  }, []); // Empty deps array as it only uses setState

  return movies.map(movie => (
    <MovieCard
      key={movie.id}
      {...movie}
      onLike={() => handleLike(movie.id)}
    />
  ));
};

로그인 후 복사

3. useMemo: 복잡한 계산 캐싱

const MovieAnalytics = ({ movies }) => {
  const statistics = useMemo(() => ({
    averageRating: movies.reduce((acc, m) => acc + m.rating, 0) / movies.length,
    topRated: [...movies].sort((a, b) => b.rating - a.rating)[0],
    totalLikes: movies.reduce((acc, m) => acc + m.likes, 0)
  }), [movies]);

  return (
    <div>
      <h2>Analytics Dashboard</h2>
      <p>Average Rating: {statistics.averageRating.toFixed(1)}</p>
      <p>Most Popular: {statistics.topRated.title}</p>
      <p>Total Likes: {statistics.totalLikes}</p>
    </div>
  );
};

로그인 후 복사

4. 상태 관리 모범 사례

상태를 위로 들어 올리기(필요한 경우)

const MovieApp = () => {
  const [favorites, setFavorites] = useState(new Set());

  // Lifted state handler
  const toggleFavorite = useCallback((movieId) => {
    setFavorites(prev => {
      const next = new Set(prev);
      if (next.has(movieId)) next.delete(movieId);
      else next.add(movieId);
      return next;
    });
  }, []);

  return (
    <div>
      <MovieList onFavorite={toggleFavorite} />
      <FavoritesList ids={favorites} />
    </div>
  );
};

로그인 후 복사

5. 고급 최적화 기술

복잡한 로직을 위한 맞춤형 후크

function useMovieData(movieId) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let mounted = true;

    async function fetchMovie() {
      setLoading(true);
      try {
        const response = await fetch(`/api/movies/${movieId}`);
        const movie = await response.json();
        if (mounted) {
          setData(movie);
          setLoading(false);
        }
      } catch (error) {
        if (mounted) {
          console.error('Failed to fetch movie:', error);
          setLoading(false);
        }
      }
    }

    fetchMovie();
    return () => {
      mounted = false;
    };
  }, [movieId]);

  return { data, loading };
}

로그인 후 복사

6. 프로파일링 및 디버깅

React 개발자 도구 사용

React 개발자 도구 프로파일러 활성화
구성요소 렌더링 기록
불필요한 재렌더링 식별
렌더링 기간 측정

성능 체크리스트

✅ 순수한 기능적 구성 요소에는 React.memo를 사용하세요
✅ props로 전달된 이벤트 핸들러에 대해 useCallback을 구현하세요
✅ 비용이 많이 드는 계산에는 useMemo를 적용하세요
✅ 렌더에서 인라인 객체 생성을 피하세요
✅ 목록에 적절한 키 소품을 활용하세요
✅ 정기적으로 앱을 프로필화하세요