배열로 렌더링된 이전 React 구성요소의 상태를 업데이트하는 방법

Question

"Add Component" 버튼을 클릭했을 때 배열에 React 컴포넌트를 추가하고 배열을 렌더링했습니다. 각 구성 요소는 이를 카운트 후크에 속성으로 전달하여 렌더링됩니다.

문제는 구성 요소가 배열에 추가되고 렌더링되면 버튼을 통해 카운트를 증가시켜도 카운트 후크가 업데이트되지만 배열에서 렌더링된 구성 요소는 업데이트되지 않는다는 것입니다. "구성 요소 추가" 버튼을 다시 클릭하면 새 구성 요소가 업데이트된 후크로 렌더링됩니다. 그러나 이전 구성 요소는 추가될 때 업데이트되지 않습니다.

App.js

으아아아

컴포넌트.jsx

으으으으

Answer 1

useState() 후크는 실제로 기본 유형이나 간단한 객체를 저장할 것을 권장합니다. 여기에 컴포넌트를 저장하는 것은 멋진 아이디어지만, 성능 측면에서 보면 React에 정말 큰 부담이 됩니다.

더 나은 해결책은 기본 유형 값을 사용하고 렌더링 시 이 값을 지도에 전달하는 것입니다. 다음은 좋은 예입니다:

으아악