React에서 불필요한 다시 렌더링을 피하는 방법은 무엇입니까?

이 질문이 여러 번 요청되었다는 것을 알고 있지만 상태가 변경 될 때 반응 렌더링 결정의 논리를 이해하고 "반응식"으로 올바르게 작성하는 방법을 이해하려고합니다.

이것은 내 코드입니다.

// Parent.js

import React, { useEffect, useState } from "react";
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";

export default function App() {
  const [a, setA] = useState(false);
  const [b, setB] = useState(false);

  const onClickA = () => {
    setA((p) => !p);
  };

  const onClickB = () => {
    setB((p) => !p);
  };

  useEffect(() => {
    console.log("Parent rendered");
  });
  return (
    <div>
      <ComponentA value={a} onClick={onClickA} />
      <ComponentB value={b} onClick={onClickB} />
    </div>
  );
}

// Child A

import React, { useEffect } from "react";

export default function ComponentA(props) {
  useEffect(() => {
    console.log("A rendered");
  });

  return (
    <button onClick={props.onClick}>Button A - {props.value.toString()}</button>
  );
}

// Child B

import React, { useEffect } from "react";

export default function ComponentB(props) {
  useEffect(() => {
    console.log("B rendered");
  });

  return (
    <button onClick={props.onClick}>Button B - {props.value.toString()}</button>
  );
}

따라서 버튼 A 또는 버튼 B를 클릭하면 상위 구성 요소가 다시 렌더링되어 각각의 UI가 서로의 상태와 관련이없는 경우에도 ComponentA와 ComponentB가 다시 렌더링됩니다. 나는 버튼 A를 클릭하면 a상태 변수 만 변경 <ComponentB />되고 a상태에 의존하지 않으므로 변경 되지 않은 상태로 props남아 있기 때문에 다시 렌더링 할 필요가 없다는 반응을 이해할 것이라고 생각 했습니다 . 그래서 저는이 코드가 틀렸고 다른 스타일로 작성해야한다고 생각하지만 이것을 알아낼 수 없습니다.

분명히 a영향을 미치지 않고 영향 <ComponentB />을 b미치지 않기 <ComponentA />때문에 각 구성 요소에 개별적으로 상태를 전달하지 않는 이유는 무엇입니까? 이렇게하면 각 구성 요소가 자체적으로 다시 렌더링 할 책임이 있습니다. 하지만 미래 ComponentA에에 의존 b하거나 ComponentB의존 한다면 a어떨까요? 상태를 공유하고 콜백 함수를 작성하고 상태를 props로 변환하고 그 반대로 변환 할 때마다 코드를 변경할 수 없습니다.

너무 많은 오버 헤드 코드 (예 : redux)없이 이러한 종류의 유연성을 제공하는 더 좋은 방법이 있습니까?