React의 고차 구성 요소 이해: 장점, 단점 및 최신 대안

최근 HOC(Higher-Order Components)와 구성 요소의 기능을 향상시키는 역할에 대한 인터뷰 질문을 접했습니다. HOC는 강력하고 진보된 기술이지만, 현대 React에서는 더 이상 일반적으로 사용되지 않는다는 점은 주목할 가치가 있습니다. 실제로 최신 React 문서에서는 HOC에 대한 자세한 설명을 단계적으로 폐지했습니다.

이 블로그 게시물에서는 HOC가 무엇인지, 그 장점은 무엇인지, HOC가 현대 React 개발에서 더 이상 권장되지 않는 이유를 살펴보겠습니다.

고차 성분(HOC)

[A] 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

레거시 React 문서

이 예는 이전 React 문서에서 가져온 것입니다. 기능적인 컴포넌트를 사용하도록 예제를 업데이트하고 설명을 요약했습니다.

CommentList 구성 요소는 외부 데이터 소스를 구독하여 댓글 목록을 렌더링합니다.

import React, { useEffect, useState } from "react";

function CommentList() {
    // "DataSource" is some global data source
    const [comments, setComments] = useState(DataSource.getComments());

    useEffect(() => {
        function handleChange() {
            setComments(DataSource.getcomments());
        }

        DataSource.addChangeListener(handleChange);

        return () => {
            DataSource.removeChangeListener(handleChange);
        };
    }, []);

    return (
        <div>
            {comments.map((comment) => (
                <Comment comment={comment} key={comment.id} />
            ))}
        </div>
    );
}

export default CommentList;

BlogPost 구성 요소는 단일 블로그 게시물을 구독합니다.

import React, { useEffect, useState } from "react";


function BlogPost(props) {
    const [blogPost, setBlogPost] = useState(DataSource.getBlogPost(props.id));

    useEffect(() => {
        function handleChange() {
            setBlogPost(DataSource.getBlogPost(props.id))
        }

        DataSource.addChangeListener(handleChange)

        return () => {
            DataSource.removeChangeListener(handleChange)
        }
    }, [props.id]);

    return <TextBlock text={blogPost} />

}

export default BlogPost;

DataSource는 다음과 같습니다.

const DataSource = {
    getComments: () => {
      return [...];
    },
    addChangeListener: (callback) => {},
    removeChangeListener: (callback) => {}
  };

  export default DataSource;

CommentList와 BlogPost는 동일하지 않지만 구현의 대부분은 동일합니다. 이러한 반복을 단순화하기 위해 이러한 공유 패턴을 추상화하는 함수를 만들 수 있습니다.

// Custom Hook
export function useSubscription(selectData, props) {
    const [data, setData] = useState(selectData(DataSource, props));

    useEffect(() => {
        function handleChange() {
            setData(selectData(DataSource, props))
        }

        DataSource.addChangeListener(handleChange)

        return () => {
            DataSource.removeChangeListener(handleChange)
        }
    }, [props])

    return data
}


function withSubscription(WrappedComponent, selectData) {
    return function(props) {
        const data = useSubsctiption(selectData, props)
        return <WrappedComponent data={data} {...props} />
    }
}

CommentListWithSubscription 및 BlogPostWithSubscription이 렌더링되면 DataSource의 최신 정보가 포함된 데이터 소품을 해당 구성 요소에 전달합니다.

const CommentListWithSubscription = withSubscription(
    CommentList,
    (DataSource) => DataSource.getComments()
)

const BlogPostWithSubscription = withSubscription(
    BlogPost,
    (DataSource, props) => DataSource.getBlogPost(props.id)
)

고차 구성요소(HOC)는 원래 구성요소를 컨테이너 구성요소로 래핑하여 향상시키는 순수 함수로, 부작용 없이 여러 구성요소 간에 논리를 공유할 수 있게 해줍니다.

"고차 구성 요소는 최신 React 코드에서 일반적으로 사용되지 않습니다"라고 레거시 문서에 명시되어 있습니다.

이유를 조사한 결과 개발자들은 몇 가지 단점을 지적했습니다.

복잡성: HOC는 깊이 중첩된 래퍼를 생성하여 코드를 읽고 디버깅하기 어렵게 만들 수 있습니다.

소품 충돌: HOC는 소품을 조작하여 의도하지 않은 충돌과 문제를 일으킬 수 있습니다.

대체 후크
사용자 정의 후크는 동일한 논리를 처리하는 보다 간결하고 간단한 방법을 제공하여 HOC의 필요성을 효과적으로 대체합니다.

일부 개발자는 여전히 인증이나 오류 처리와 같은 작업에 HOC를 사용합니다. 장점과 단점을 모두 이해하고 최신 동향에 대한 최신 정보를 유지하여 팀원들과 충분한 정보를 바탕으로 토론에 참여하는 것이 중요합니다.

위 내용은 React의 고차 구성 요소 이해: 장점, 단점 및 최신 대안의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!