- 컴포넌트를 반환하기만 해도 고차 컴포넌트야? 그런데 인자에 컴포넌트를 전달하지 않고 반환만 할 수 있는 방법이 있어?
- 래핑된 컴포넌트도 하나의 컴포넌트라고 한다면 그 또한 인자로 컴포넌트를 받는 거잫아? 인자에 아무것도 전달하지 않고 컴포넌트를 반환할 수 있는 방법이 잇어?
- 고차 컴포넌트는 원본 컴포넌트를 컨테이너 컴포넌트로 *포장(Wrapping)*하여 *조합(compose)*합니다.
이렇게 하는 이유는 불변성 때문에?
- 고차 컴포넌트는 사이드 이펙트가 전혀 없는 순수 함수입니다. 이에 대한 근거는?
const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
);
const BlogPostWithSubscription = withSubscription(
BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
);
- 여기서 withSubscription이 고차 컴포넌트야? 아니면 BlogPostWithSubscription얘가 withSubscription함수를 사용하는 고차 컴포넌트야?(이 타이밍에서 애매한 헛소리를 한 번 하는 것 같았고..)
- 명확히 해줘, 그럼 CommentListWithSubscription, BlogPostWithSubscription, withSubscription 이렇게 세가지가 전부 고차컴포넌트라는 거야? (여기서 withSubscription 함수라고 해서..)
- withSubscription애는 고차 컴포넌트를 생성하는 함수이지, 고차 컴포넌트 자체는 아닌 거 아니야?
자, 내가 다시 정리해볼께 withSubscription이라는 함수를 사용해서 CommentList와 BlogPost를 래핑하고 prop으로 추가적인 data를 받아서 그걸 새로운 컴포넌트로 반환한다. 그리고 반환하는 이 컴포넌트가 바로 고차컴포넌트고 이걸 CommentListWithSubscription, BlogPostWithSubscription 할당한다.
- 그러니까 한 마디로 래핑된 컴포넌트와 동일하게 반복되는 로직을 prop으로 받아서 그걸 함수로 정의하게 해서 반환한다. 이때 래핑된 컴포넌트와 prop은 기존 컴포넌트에 영향을 끼치지 않기 때문에 불변성을 유지하면서 새로운 컴포넌트를 반환한다. 이때 반환되는 컴포넌트가 고차함수다.
- 하지만 Hooks가 개발되고 나서부터는 중복되는 로직은 커스텀 hook을 통해서 외부에서 주입해서 사용할 수 있게 되었기 때문에 고차 컴포넌트를 사용할 이유가 많이 없어졌다? 어떻게 생각해?
이렇게 계속 꼬리질문을 던져봄.. 일단 GPT가 틀릴 수도 있다는 가정으로 계속 물어봤으며, 공식문서에 나와있는 내용은 팩트라고 생각하고 하나씩 조합해서 최종적으로 정리..