React, 파생 상태(Derived States)에 대해 이야기해야 합니다!

React로 작업할 때 다른 상태나 props를 기반으로 값을 변환하거나 파생해야 하는 상황에 자주 직면하게 됩니다. 이 개념을 파생 상태라고 하며, 올바르게 사용한다면 React 툴킷에서 가장 강력한 도구 중 하나입니다.

“파생 상태: 기존 상태 또는 prop에서 계산할 수 있는 상태를 파생 상태라고 합니다.”

자, 그럼 우리가 하는 동안 좀 더 재미있게 즐겨보세요.

나쁜 습관: 제품 목록 필터링

일반적인 '죄송합니다'라는 일반적인 예부터 시작해 보겠습니다. 제품 목록이 있고 사용자가 검색 입력에 입력한 내용을 기준으로 제품을 필터링한다고 가정해 보겠습니다. 이상적인 세상에서는 검색이 동적으로 업데이트되고 매우 빨라야 합니다. 하지만 먼저 나쁜 습관접근 방법

다음은 해서는 안 되는 처리 방법입니다.

import React, { useState } from 'react';

const ProductList = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [products, setProducts] = useState([
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Smartphone' },
    { id: 3, name: 'Headphones' },
    { id: 4, name: 'Smartwatch' },
  ]);
  const [filteredProducts, setFilteredProducts] = useState(products);

  const handleSearch = (e) => {
    const query = e.target.value;
    setSearchQuery(query);
    setFilteredProducts(
      products.filter(product =>
        product.name.toLowerCase().includes(query.toLowerCase())
      )
    );
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleSearch}
        placeholder="Search for a product"
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

왜 이것이 나쁜 습관인가요?

효과가 있는 것 같죠? 검색 입력이 연결되어 예상대로 제품을 필터링합니다.

그러나 문제는 필터링된 제품을 별도의 상태로 저장한다는 것입니다. 이로 인해 불필요한 데이터 중복이 발생합니다. 우리는 이미 상태에 있는 제품을 가지고 있고 필터 작업의 결과를 다른 상태에 저장하고 있습니다. 이로 인해 잠재적인 버그가 발생하고 메모리 사용량이 증가하며 모든 것을 동기화하기가 더 어려워집니다.

기본적으로 우리는 상황을 필요 이상으로 복잡하게 만들고 있습니다.

모범 사례: 파생 상태 사용

이제 약간의 React 지혜를 적용하고 파생 상태를 사용하여 위 코드를 수정해 보겠습니다.

이번에는 두 개의 별도 상태 변수(제품 및 필터링된 제품)를 유지하는 대신 searchQuery를 기반으로 제품 배열에서 필터링된 제품을 직접 파생해 보겠습니다. 이렇게 하면 중복을 피하고 상태를 깨끗하게 유지할 수 있습니다.

개선된 버전은 다음과 같습니다.

import React, { useState } from 'react';

const ProductList = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const products = [
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Smartphone' },
    { id: 3, name: 'Headphones' },
    { id: 4, name: 'Smartwatch' },
  ];

  // Derived state: filter products based on the search query
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleSearch = (e) => {
    setSearchQuery(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleSearch}
        placeholder="Search for a product"
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

개선된 점은 무엇인가요?

1. 필터링된 제품에 대한 추가 상태 없음: 더 이상 필터링된 제품의 별도 목록을 저장하지 않습니다. 대신, 렌더링할 때마다 제품 배열 및 검색 쿼리에서 필터링된 목록을 직접 계산합니다.
2. 클리너 코드: 관리할 상태가 적어 구성 요소가 더 간단합니다. 이렇게 하면 읽고 유지 관리하기가 더 쉬워집니다.
3. 성능 향상(일종): React는 추가 상태 변수를 추적할 필요가 없습니다. 기존 데이터에서 직접 필터링된 목록을 파생하여 코드를 더 간결하고 빠르게 만듭니다(React가 업데이트를 최적화하더라도 상태 변경이 적을수록 항상 더 좋습니다).

이 접근 방식은 필터링된 데이터의 추가 복사본을 저장하는 대신 필터링된 제품이 기존 데이터에서 계산되는 파생 상태를 활용합니다.

파생 상태를 사용하지 말아야 하는 경우

파생 상태가 최선의 선택인 경우가 많지만 모든 것에 대한 만병통치약은 아닙니다. 구성 요소가 애플리케이션의 여러 부분에 필요한 복잡한 계산이나 상태를 처리하는 경우 메모이제이션을 사용하거나 파생된 상태를 더 높은 수준의 구성 요소나 컨텍스트에 저장하는 것이 더 나을 수 있습니다.

그러나 간단한 필터링, 정렬 또는 기타 간단한 파생 값의 경우 위의 예를 사용하는 것이 좋습니다.

결론

요약하자면 React의 파생 상태는 모든 것을 건조하게 유지하는 것입니다. 반복하지 마세요. 동일한 데이터의 불필요한 복사본을 상태로 유지하는 대신 기존 상태 및 소품을 기반으로 즉석에서 값을 계산합니다. 이는 유지 관리가 더 쉽고 더 깨끗하고 효율적인 코드로 이어집니다. 따라서 다음번에 React에서 데이터를 복제하고 싶은 유혹을 느낄 때 다른 소스에서 직접 계산할 수 있는지 생각해 보세요. 미래의 당신도 감사할 것입니다!

위 내용은 React, 파생 상태(Derived States)에 대해 이야기해야 합니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!