24.08.06 day41 HOC, Portal

HOC(Higher-Order Components)

HOC는 React에서 컴포넌트를 인수로 받아 새로운 컴포넌트를 반환하는 함수이며, 컴포넌트를 재사용하고 확장하기 위한 고급 기술이다.

HOC는 React의 컴포넌트 재사용을 통해 코드의 중복을 줄이고, 컴포넌트의 기능을 쉽게 확장할 수 있게 한다.

HOC 특징

1. 컴포넌트를 인수로 받음
   • HOC는 보통 하나 이상의 컴포넌트를 인수로 받아 새로운 컴포넌트를 반환하며, 이 과정에서 원본 컴포넌트는 수정되지 않고, 확장된 기능을 갖춘 새로운 컴포넌트가 생성된다.
2. 원본 컴포넌트를 래핑함
   • HOC는 원본 컴포넌트를 래핑하여 필요한 추가 기능을 부여한다. 예를 들어, 데이터 페칭, 상태 관리, 로깅 등의 기능을 HOC로 분리할 수 있다.
3. 함수형 또는 클래스형 컴포넌트에 사용 가능
   • HOC는 함수형 컴포넌트와 클래스형 컴포넌트 모두에 사용할 수 있다.

HOC의 장점

• 코드 재사용: 공통된 로직을 HOC로 추출하여 여러 컴포넌트에서 재사용할 수 있다.
• 관심사의 분리: 컴포넌트의 비즈니스 로직과 UI 로직을 분리하여 코드의 가독성과 유지보수성을 높일 수 있다.
• 테스트 용이성: HOC를 사용하면 컴포넌트의 핵심 로직을 독립적으로 테스트할 수 있다.

HOC의 단점

• props 이름 충돌: HOC가 추가하는 props와 원본 컴포넌트의 props가 충돌할 가능성이 있다.
• 디버깅 어려움: 중첩된 HOC는 디버깅을 어렵게 만들 수 있다.
• 렌더링 성능: 많은 HOC가 중첩되면 성능에 영향을 줄 수 있다.

예시

import React, { Component } from 'react';

// HOC 정의
function withLogger(WrappedComponent) {
  return class extends Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }

    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} will unmount`);
    }

    render() {
      // 원본 컴포넌트에 전달된 props를 그대로 전달
      return <WrappedComponent {...this.props} />;
    }
  }
}

// 일반 컴포넌트 정의
class MyComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

// HOC를 사용하여 확장된 컴포넌트 생성
const MyComponentWithLogger = withLogger(MyComponent);

export default MyComponentWithLogger;

withLogger HOC는 MyComponent를 래핑하여 컴포넌트가 마운트되고 언마운트될 때마다 로그를 출력하는 기능으로 작성됐다.

 

HOC는 React에서 컴포넌트의 재사용성과 확장성을 높이기 위한 강력한 패턴이지만, HOC를 남용하지 않도록 주의해야 하고 컴포넌트의 복잡성을 관리하기 위해 적절히 사용해야 한다.

HOC 외에도 React의 Hooks를 사용하여 비슷한 효과를 얻을 수 있는 방법도 있으므로 상황에 맞게 적절한 패턴을 선택하는 것이 중요하다.

---

Portal

React의 Portal은 컴포넌트의 렌더링 트리를 벗어나 DOM 트리의 다른 위치에 렌더링할 수 있는 기능이다. 이를 통해 모달, 툴팁, 드롭다운 같은 UI 요소를 부모 컴포넌트의 DOM 구조에 구애받지 않고 특정 DOM 노드에 쉽게 렌더링할 수 있다.

Portal의 특징과 사용 방법

1. 독립된 DOM 트리에 렌더링
   • Portal은 React 컴포넌트가 기본적으로 렌더링되는 DOM 트리의 다른 부분에 렌더링되기 때문에, 이 기능은 시각적 또는 구조적 제약을 벗어나 UI를 구현할 때 유용하다.
2. React의 이벤트 버블링
   • Portal로 렌더링된 요소는 DOM 트리의 다른 위치에 있지만, 여전히 React의 이벤트 시스템을 통해 부모 컴포넌트로 이벤트가 버블링된다. 따라서 이벤트 처리가 일관되게 유지된다.

Portal의 장점

• DOM 구조의 독립성: Portal을 사용하면 모달이나 툴팁 같은 컴포넌트를 부모 컴포넌트의 DOM 구조와 독립적으로 렌더링할 수 있다.
• 스타일링 편의성: DOM 트리의 상위 노드에 직접 렌더링하기 때문에, CSS 상속 문제나 z-index 문제를 쉽게 해결할 수 있다.
• 유연한 레이아웃: Portal을 통해 컴포넌트를 원하는 DOM 노드에 자유롭게 배치할 수 있어, 레이아웃의 유연성이 높아진다.

Portal의 단점

• 컨텍스트 전파 문제: Portal로 렌더링된 컴포넌트는 부모 컴포넌트와 물리적으로 떨어져 있기 때문에, 일부 컨텍스트 전파 문제나 스타일링 문제가 발생할 수 있다.
• 복잡성 증가: DOM 트리와 React 컴포넌트 트리가 일치하지 않기 때문에, 코드를 이해하거나 디버깅하는데 어려움이 있을 수 있다.

React의 Portal은 컴포넌트를 DOM 트리의 다른 위치에 렌더링할 수 있는 강력한 도구이며, 이를 통해 UI 요소를 더 유연하고 독립적으로 관리할 수 있고, 특히 모달, 툴팁, 드롭다운과 같은 컴포넌트를 구현할 때 매우 유용하다.

그래서 Portal을 적절히 사용하여 컴포넌트의 재사용성과 유지보수성을 높이는 것이 중요할 수 있다.