[리액트] 합성(Composition)

1. 합성의 의미

합성은 리액트에서 컴포넌트를 작성하는 기본 패턴 중 하나로, 하나 이상의 컴포넌트를 결합하여 새로운 컴포넌트를 생성하는 방식이다. 이를 통해 코드의 재사용성을 높이고 유지 보수를 간소화한다.

2. Props로 컴포넌트 전달하기

리액트에서 합성을 구현하는 기본적인 방법은 props를 통해 컴포넌트를 전달하는 것이다.

function Dialog(props) {
  return (
    <div className="dialog">
      {props.title}
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <Dialog title="Welcome!">
      <p>Hello, User!</p>
    </Dialog>
  );
}

3. Container 컴포넌트와 Presentational 컴포넌트

합성을 이용하면 로직을 처리하는 Container 컴포넌트와 UI를 렌더링하는 Presentational 컴포넌트로 나눌 수 있어, 관심사의 분리가 이루어진다.

4. Higher-Order Component (HOC)

HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수로, 로직을 공유하고자 할 때 유용하다.

5. Render Props

Render Props는 children props로 함수를 전달받아 컴포넌트의 렌더링 방식을 사용자가 결정하게 한다. 이를 통해 더 유연한 컴포넌트 작성이 가능하다.

결론

리액트의 합성은 컴포넌트 구조를 깔끔하고 유지 보수가 쉽게 만드는 데 있어 중요한 역할을 한다. 컴포넌트의 재사용성을 높이고, 관심사의 분리를 통해 가독성과 유지 보수성을 향상시킨다. 다양한 패턴과 함께 적절히 활용하면 리액트 애플리케이션의 효율과 품질을 높일 수 있다.