하이오더 컴포넌트(고차 컴포넌트)란 무엇인가?

함수 자체를 인자로 받거나 반환하는 함수를 고차함수라고 한다.

컴포넌트를 인자로 받거나 반환하는 함수를 '고차 컴포넌트'라고 한다.

 

중요한건,

컴포넌트를 받아서

컴포넌트를 return 한다는 것이다.

 

 

이렇게 이해하면 어려운데,

고차함수와 거의 똑같은 개념이라고 보면 어느정도 이해가 될것이다.

콘솔창에 찌끄려봤다.

 

game 함수를 통해 게임을 할 수 있고,

mySchedule 함수를 통해 하루 일과를 보낸다.

나는 매일 공부와 자전거를 타며, 시간이 남으면 그날마다 다른일을 할 수 있다.

 

todayMySchedule은 오늘의 하루일과인데, 오늘은 남는시간에 게임을 할 예정이다.

 

그래서 콘솔창의 결과는 위와 같이

study

bike

game

 

이 된다.

 

고차 컴포넌트도 똑같다.

 

ko.reactjs.org/docs/higher-order-components.html

고차 컴포넌트 – React

공식 리액트 문서의 소스를 해석하자면,

 

이렇게 전체적인 코드 흐름이 비슷한 컴포넌트가 있다.

위 소스의 구현체는 거의 동일하지만, 각각 다른 메서드를 호출하며 결과값도 다를 것이다.

 

위와같은 실제 공통점이 있다.

 

고차컴포넌트는 DataSurce와 setState 부분을 묶어줄것이다.

라익디스

 

 

이렇게하면

위와같이 래핑된 컴포넌트와 DateSource 부분을 컴포넌트 내부에서 직접 핸들링 할 수 있게된다.

단 이때, render 함수 내의 return 부분에서 this.props를 펼침 연산자로 전달해주어야 한다.

이렇게 해야만 래핑 컴포넌트 내에서 props를 동적으로 반환할 수 있다.