리액트 고차 컴포넌트

고차 컴포넌트(HOC)는 코드 재사용, 논리 추상화 및 구성 가능성을 위한 React의 패턴입니다.
이는 구성 요소를 가져와 추가 기능이 포함된 새로운 향상된 구성 요소를 반환하는 함수입니다.

기본 컴포넌트 Button

//Button.jsx
import React from 'react';

const Button = ({ onClick, children }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

고차 컴포넌트 withLogger

//withLogger.jsx
import React from 'react';

const withLogger = (WrappedComponent) => {
  return class WithLogger extends React.Component {
    handleClick = () => {
      console.log('Button clicked');
    };

    render() {
      return (
        <WrappedComponent onClick={this.handleClick} {...this.props} />
      );
    }
  };
};

export default withLogger;

향상된 컴포넌트

import React from 'react';
import Button from './Button';
import withLogger from './withLogger';

const EnhancedButton = withLogger(Button);

const App = () => {
  return (
    <div>
      <h1>Higher-Order Component Example</h1>
      <EnhancedButton>Click me</EnhancedButton>
    </div>
  );
};

export default App;

spread 연산자

props를 하위 구성 요소에 전달하거나 함수를 호출하거나 새 객체를 생성할 때 객체의 속성을 확산시키는 데 사용됩니다.

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = (props) => {
  // Pass all props to ChildComponent using the spread operator
  return <ChildComponent {...props} />;
};

export default ParentComponent;

고차컴포넌트에서 펼침 연산자를 사용하는 이유

함수에서 인자로 사용할 속성을 미리 알 수 없기 때문이다!

프레젠테이션 구성요소

• props와 렌더링 UI 요소를 통해 데이터와 콜백을 받습니다. state를 관리하지 않습니다.
• 데이터를 가져오거나 조작하는 방법보다는 주로 UI의 모양과 동작에 관심을 갖습니다.
• 재사용이 가능한 경우가 많으며 함께 구성하여 보다 복잡한 UI를 구축할 수 있습니다.
• 예) 버튼, 입력 필드, 카드 및 기타 UI 요소가 있습니다.

// Example of a Presentation Component
const Button = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

컨테이너 구성요소

• state를 관리하고, 데이터를 가져옵니다.
• 컨테이너 구성 요소는 일반적으로 애플리케이션의 상태 관리 시스템(예: Redux, Context API)에 연결되며 상태를 수정하기 위한 작업을 전달할 수 있습니다.
• 데이터 가져오기, 상태 업데이트를 조정하고 데이터를 프레젠테이션 구성 요소에 prop으로 전달하여 애플리케이션의 동작을 조정합니다.
• 컨테이너 구성 요소는 사물의 모양에 덜 관심을 갖고 애플리케이션 상태 및 동작을 관리하는 데 더 중점을 둡니다.
• 예) 페이지, 기능별 구성 요소, 상태 관리 시스템에 연결되는 구성 요소 등이 있습니다.

// Example of a Container Component
import React, { useState } from 'react';

const CounterContainer = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return <Counter count={count} onIncrement={increment} />;
};

프레젠테이션 구성 요소는 UI 렌더링에 계속 중점을 두는 반면, 컨테이너 구성 요소는 상태 관리 및 비즈니스 논리를 처리하여 문제의 분리와 재사용성을 향상시킵니다.