Dandy Now!
  • [ 언어·프레임워크/React.js ]
    React 로직 재사용 패러다임의 전환: HOC와 Hooks 분석
    2026-01-06 09:26:34
    React 로직 재사용 패러다임의 전환: HOC와 Hooks 분석1. 고차 컴포넌트 (Higher-Order Component, HOC)1-1. HOC의 개념과 작동 원리고차 컴포넌트는 컴포넌트를 인자로 받아 새로운 기능을 주입하여 새로운 컴포넌트를 반환하는 함수이다.이는 React의 API가 아닌, 컴포넌트의 구성적 특성을 활용한 디자인 패턴에 해당한다.수학적 모델로 표현하면 다음과 같다.주로 횡단 관심사(Cross-cutting Concerns)인 인증, 로깅, 데이터 페칭 등을 분리하여 재사용할 때 사용한다.1-2. 코드 구현 예시인증 여부에 따라 컴포넌트 렌더링을 제어하는 HOC의 구조는 다음과 같다.import React from "react";const withAuth = (WrappedCom..