React에서 동일한 구성 요소의 여러 인스턴스에서 상태 관리

React로 작업하고 동일한 구성 요소의 인스턴스가 여러 개 있는 경우 상태 관리가 까다로울 수 있습니다. 구성 요소가 어떻게 상호 작용해야 하는지에 따라 상태를 다르게 처리해야 합니다. 제가 찾은 내용은 다음과 같습니다.

독립 인스턴스: 구성 요소 내부에 상태 유지

구성 요소가 서로 통신할 필요가 없다면 구성 요소 내부에 상태를 유지하는 것이 가장 좋습니다. 이런 방식으로 각 인스턴스에는 고유한 상태가 있으며, 한 인스턴스의 변경 사항이 다른 인스턴스에 영향을 주지 않습니다.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
<Counter /> // Instance 1
<Counter /> // Instance 2

여기서 각 Counter 구성요소는 자체 개수를 추적합니다. 따라서 한 카운터에서 버튼을 클릭해도 다른 카운터의 개수는 변경되지 않습니다.

종속 인스턴스: 상위 구성 요소의 상태 관리

그러나 구성 요소가 일부 상태를 공유하거나 조정된 방식으로 작동해야 하는 경우 상태를 상위 구성 요소로 이동하는 것이 좋습니다. 부모는 공유 상태를 관리하고 이를 props로 전달할 수 있습니다. 이렇게 하면 모든 인스턴스가 동기화 상태를 유지하고 원활하게 함께 작동할 수 있습니다.

function Parent() {
  const [sharedCount, setSharedCount] = useState(0);

  return (
    <div>
      <p>Total Count: {sharedCount}</p>
      <Counter count={sharedCount} setCount={setSharedCount} />
      <Counter count={sharedCount} setCount={setSharedCount} />
    </div>
  );
}

function Counter({ count, setCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

이 접근 방식은 상태가 상위 구성 요소에 있을 때 해당 상태를 업데이트하면 모든 인스턴스가 다시 렌더링되어 모두 최신 UI가 표시되도록 하기 때문에 효과적입니다. 상태가 각 인스턴스에 별도로 유지되면 상태가 변경된 인스턴스만 다시 렌더링되어 인스턴스 전체에서 UI가 일관되지 않게 됩니다.

내 프로젝트의 예

아코디언 컴포넌트를 만들면서 이 사실을 알아냈습니다. 다음은 내 작업의 두 가지 예입니다.

• 독립 아코디언 인스턴스: 예. 이 설정에서는 각 아코디언 인스턴스가 독립적으로 작동합니다.

• 종속 아코디언 인스턴스: 예. 이 버전에서는 모든 아코디언 인스턴스가 서로 의존하고 동기화 상태를 유지합니다.

간단한 요약

• 구성요소가 별도로 작동하는 경우 각 구성요소 내부에 상태를 유지하세요.

• 상태를 공유하거나 조화롭게 함께 작업해야 하는 경우 상위에서 상태를 관리하세요.

아코디언 예제를 만들 때 이 접근 방식은 저에게 큰 변화를 가져왔습니다. 여러분에게도 도움이 되길 바랍니다!

위 내용은 React에서 동일한 구성 요소의 여러 인스턴스에서 상태 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!