7단계: 코드 재사용과 확장성

7-1. 컴포넌트 재사용 기본 원칙

• UI 구조와 데이터 로직을 분리합니다.
• Props로 동작을 제어하고, 동일한 구조에 다른 데이터를 주입합니다.

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

7-2. Custom Hook으로 로직 분리

여러 컴포넌트에서 중복되는 로직을 Hook으로 추출할 수 있습니다.

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  const increase = () => setCount((prev) => prev + 1);
  return { count, increase };
}

7-3. 고차 컴포넌트(HOC)

컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 패턴입니다.

function withLoading(Component) {
  return function Wrapper(props) {
    if (props.loading) return <p>로딩 중...</p>;
    return <Component {...props} />;
  };
}

7-4. 렌더 프롭 패턴

컴포넌트에 함수를 prop으로 전달하여 재사용성을 확보합니다.

<DataFetcher render={(data) => <UserList data={data} />} />

7-5. 컴파운드 컴포넌트 패턴

여러 컴포넌트를 묶어서 하나의 공통 인터페이스로 구성합니다.

<Tabs>
  <Tabs.Tab label="A">내용 A</Tabs.Tab>
  <Tabs.Tab label="B">내용 B</Tabs.Tab>
</Tabs>

7-6. Props 확장 전략

• 기본값 지정: defaultProps 또는 기본 매개변수
• 나머지 props 전달: {...rest} 방식으로 하위 DOM에 위임

function Input({ label, ...rest }) {
  return (
    <label>
      {label}
      <input {...rest} />
    </label>
  );
}

7-7. 코드 재사용 시 주의점

• 너무 일반화하면 유지보수가 어려워짐
• 역할 명확히 구분
• 네이밍과 역할 설명이 중요

요약

• 컴포넌트는 역할에 따라 쪼개고 재사용성을 높인다
• 로직은 Custom Hook으로 추출해 재활용
• UI 확장에는 HOC, 렌더 프롭, 컴파운드 패턴이 유용
• props 확장 및 rest 전달로 유연한 API를 구성한다

심화학습

Q1. Custom Hook은 어떤 조건을 반드시 만족해야 하나요?
A1. 이름이 use로 시작해야 하며, 훅을 조건문이나 루프 안에서 호출하면 안 됩니다. React의 훅 규칙을 따라야 합니다.

Q2. HOC는 언제 사용하면 좋고, 어떤 단점이 있나요?
A2. 인증 검사, 로딩 처리 같은 공통 로직에 유용하지만, 컴포넌트 트리를 파악하기 어렵고 중첩되면 디버깅이 힘듭니다.

Q3. 컴파운드 패턴의 장점은 무엇인가요?
A3. 상위 컴포넌트에서 context로 내부 동작을 제어하면서 하위 컴포넌트들을 조합식으로 구성할 수 있어 유연성과 확장성이 뛰어납니다.