HOC(Higher Order Component)?
HOC는 기존의 React 컴포넌트를 확장하여 기능을 추가하거나 변경하는 데 사용되는 패턴이다. 초기 React에서는 로직의 재사용을 위해 HOC가 많이 사용되었지만, 최근에는 주로 Hook이나 다른 패턴이 더 많이 사용되고 있다.
내가 찾아본 예시로는 이런 코드가 있었다.
import React from 'react';
// Higher Order Component 정의
const withLogging = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
console.log(`Component ${WrappedComponent.name} is mounted`);
}
componentWillUnmount() {
console.log(`Component ${WrappedComponent.name} is unmounted`);
}
render() {
// WrappedComponent에 props를 전달하여 렌더링
return <WrappedComponent {...this.props} />;
}
};
};
// 예시로 사용할 기본 컴포넌트
const MyComponent = () => {
return <div>Hello, world!</div>;
};
// HOC를 사용하여 기본 컴포넌트를 감쌉니다.
const MyComponentWithLogging = withLogging(MyComponent);
export default MyComponentWithLogging;
HOC의 단점
1. 복잡성 및 가독성:
• HOC를 많이 사용하게 되면 컴포넌트 간의 의존성이 깊어지고, 코드가 복잡해지면서 가독성이 떨어질 수 있다. 이러한 상황에서는 디버깅도 어려워진다.
2. props의 충돌:
• 여러 HOC를 사용하다 보면 상위 컴포넌트와 하위 컴포넌트 간의 props 이름이 중복될 수 있다. 이는 잠재적인 오류를 발생시킬 수 있다.
3. 컴포넌트 컴포지션의 어려움:
• HOC는 컴포넌트를 감싸는 래퍼 컴포넌트로 동작하기 때문에, 컴포넌트 컴포지션(컴포넌트를 조합하여 더 큰 컴포넌트를 만드는 것)이 어렵게 된다. 또한, HOC를 사용하는 컴포넌트를 추적하고 관리하기도 어려울 수 있다.
HOC의 대안
1. React Hooks:
• Hook을 사용하면 컴포넌트 내에서 로직을 쉽게 추출하고 재사용할 수 있다. HOC를 사용하는 것보다 가독성과 유지보수성이 향상된다.
2. Render Props:
• Render Props 패턴은 로직의 재사용을 위해 상위 컴포넌트에서 하위 컴포넌트로 함수를 props로 전달하여 재사용하는 방법이다. 이러한 방식은 컴포넌트 간의 컴포지션을 쉽게 구현할 수 있으며, 로직 재사용성을 높일 수 있다.
3. 컴포넌트 컴포지션:
• 작은 컴포넌트들을 조합하여 더 큰 컴포넌트를 만드는 패턴이다. 이 패턴을 사용하면 컴포넌트 간의 결합도를 낮출 수 있다.
정리
HOC는 복잡성, 가독성, 재사용성의 측면에서 어려움이 있기 때문에 사용이 줄어들고 있으며, HOC의 대안으로는 Hooks, Render Props 패턴, 그리고 컴포넌트 컴포지션이 있습니다.
'잡다한거' 카테고리의 다른 글
| 프론트엔드 테스트 (cypress) (0) | 2024.08.03 |
|---|---|
| Jotai? (0) | 2024.07.14 |
| DTO (0) | 2024.07.07 |
| 부트캠프를 마치며..(마지막 프로젝트를 마치며..) (0) | 2024.04.09 |
| 요즘 좋게본 시 (1) | 2024.04.07 |