[React] 컴포넌트를 언제 분리해야 할까?

function App() {
  const [selected, setSelected] = useState();

  function handleSelect(selectedButton) {
    ...
  }

  let tabContent = <p>Please select a topic.</p>;

  if (selected) {
    tabContent = (
      ...
    );
  }

  return (
    <>
      <Header></Header>
      <main>
        <section id="core-concepts">
          <h2>Core Concepts</h2>
          <ul>
            {CORE_CONCEPTS.map((item) => (
              <CoreConcept key={item.title} {...item} />
            ))}
          </ul>
        </section>
        <section id="examples">
          <h2>Examples</h2>
          <menu>
            <TabButton
              isSelected={selected === "components"}
              onSelect={() => handleSelect("components")}
            >
              Components
            </TabButton>
            ...
          </menu>
          {tabContent}
        </section>
      </main>
    </>
  );
}

• 이 코드에서 App 컴포넌트 안에 useState()를 사용하고 있고, useState()는 TabButton이 사용하고 있다.
• 이 상태에서 TabButton을 클릭하게 되면 화면 전체(App 컴포넌트)가 재실행된다.
• useState는 함수가 실행될 때마다 이 함수를 포함하는 컴포넌트가 매번 재실행되기 때문이다.
• 업데이트가 필요한 부분만 실행되기 위해 해당 부분을 분리해야 한다.
• 작은 컴포넌트로 잘게 쪼개면 책임을 분할할 수 있다.