리액트 컴포넌트 설계의 최소주의

좋은 컴포넌트의 첫 번째 미덕은 작다는 것이다. 작다는 것은 줄 수가 적다는 뜻이 아니라, 책임이 좁다는 뜻이다.

책임의 경계

대부분의 복잡함은 한 컴포넌트가 너무 많은 일을 하려고 할 때 생긴다. 데이터를 가져오고, 상태를 관리하고, 레이아웃을 잡고, 스타일을 정의하고, 사용자 이벤트를 처리한다. 이 모든 일을 한 곳에서 하면 코드는 짧지만 변경 비용은 길어진다.

추상화는 사용자가 그것을 원할 때 도착해야 한다. 그 전에 도착하면 짐이 된다.

도구로 분리하기 전에 책임으로 분리하라. 같은 데이터를 받지만 다른 시각적 변형을 표현하는 컴포넌트는 변형마다 분리할 가치가 있을 수 있고, 같은 시각적 형태지만 다른 데이터 출처를 가지는 컴포넌트는 두 개로 나눌 가치가 없을 수도 있다.

작게 시작하라

function PostCard({ title, date }: { title: string; date: string }) {
  return (
    <article>
      <p>{date}</p>
      <h3>{title}</h3>
    </article>
  );
}

이 코드는 분명히 부족하다. 그러나 부족함은 명확하고, 명확한 부족함은 빠르게 채워진다. 처음부터 옵션을 일곱 개 가진 컴포넌트는 부족함이 흩어져 있어 채우기 어렵다.

미니멀한 컴포넌트는 미니멀한 마음에서 나온다. 다음 줄을 더하기 전에 한 번 더 묻기를: 이 줄이 정말로 필요한가.