구성 요소를 다시 렌더링하지 않고 React.js의 Context에서 상태를 업데이트하는 방법은 무엇입니까?

Question

기본적으로 저는 Google Maps API를 사용하고 있으며 건물을 클릭하면 일부 정보가 포함된 모달이 표시됩니다. 모드 상태는 컨텍스트에 있으며 지도의 클릭 이벤트를 통해 업데이트됩니다. 상태가 업데이트되면 상태가 지도 구성요소 자체에서 업데이트되기 때문에 전체 지도를 다시 다시 렌더링합니다(더 작게 만듭니다). 컨텍스트 상태를 업데이트하지만 지도를 다시 렌더링하지 않으려면 어떻게 해야 합니까?

memo와 useCallback을 사용해 보았지만 props(컨텍스트)가 업데이트 중이어서 지도가 다시 렌더링됩니다.

Answer 1

지도가 자주 변경되는 컨텍스트의 값을 사용하는 경우 다시 렌더링되는 것을 방지할 수 있는 방법이 없습니다. 그렇게 하면 더 이상 작동하지 않습니다

useContext(Context)는 공급자의 값이 변경되면 구성 요소를 다시 렌더링합니다. 구성 요소의 컨텍스트에서 무엇을 사용하든 상관없이 useContext를 사용하면 다시 렌더링됩니다. 이것을 막을 수는 없습니다. 이것이 바로 컨텍스트가 작동하는 방식입니다. 그러나 구성 요소가 컨텍스트에서 자주 변경되지 않는 항목을 사용하는 경우 다시 렌더링을 중지하는 데 사용할 수 있는 기술이 있습니다.

기억하고 싶은 구성 요소를 사용하여 새 구성 요소를 만듭니다. 컨텍스트가 거기에 호출됩니다. 이를 구성 요소에 소품으로 전달합니다. 구성 요소에 React.memo를 사용하십시오. 하지만 구성 요소에 전달된 모든 속성이 기억되는지 확인해야 합니다.

또한 메모의 두 번째 인수를 사용하여 렌더링 간 참조를 유지하지 않는 항목을 제외할 수 있습니다(무엇을 하고 있는지 모르는 경우 권장하지 않음, 종료 문제가 발생할 수 있음)

으아아아

그러면 컴포넌트 대신 YourNewComponent를 사용해야 합니다