[React] 하이어오더 컴포넌트 개념

하이어오더 컴포넌트를 보기 전에 하이어오더에 쓰이는 데코레이터 패턴에 대해 먼저 알아보자

데코레이터 패턴을 이해하기 위해선 상속패턴을 알아야 한다. 

 

상속 패턴 : 공통 기능은 부모로부터 물려받고, 추가 기능만 구현하여 중복 코드의 양을 줄일 수 있는 패턴

 

상속패턴은 여러 부모의 속성을 동시에 가질 경우 상속 구조가 변경되어 원치 않는 상속을 받게 되는 등의 문제가 발생한다.

이를 해결해 기존의 구조를 해치지 않으면서 원하는 기능만 상속받기 위해 제안된 디자인 패턴이 '데코레이터 패턴'이다.

데코레이터 패턴이란?

클래스 간의 종속성 없이 기능만을 공유하는 디자인 패턴이다.

하이어오더 컴포넌트란?

기존 컴포넌트에 기능을 덧붙여 새 컴포넌트로 반환하는 함수를 말하는 것으로,

커링함수를 고차함수라고 하는 자바스크립트에서 유래되었다.

하이어오더의 특징

1. 하이어오더 컴포넌트는 함수나 클래스 형태의 컴포넌트를 모두 반환할 수 있다.

함수형 하이어오더 컴포넌트

function higherOrderComponent(Component){
	return function Enhanced(props){
    	return <Component {...props} />;
    }
}

클래스형 하이어오더 컴포넌트

function higherOrderComponent(Component){
	return class Enhanced extends React.Component{
    	render(){
        	return <Component {...this.props} />;
        }
    }
}

 

2. 하이어오더 컴포넌트는 기존 컴포넌트에 연결된 프로퍼티를 모두 전달해주어야 한다.

하이어오더 컴포넌트는 기존 컴포넌트에서 확장된 컴포넌트이기 때문에 기존 컴포넌트로 모든 프로퍼티를 전달해야 한다.

 

3. 하이어오더 컴포넌트와 확장 컴포넌트의 이름은 with로 시작한다.

 

하이어오더 컴포넌트의 구조

하이어오더 컴포넌트의 구조를 보기 위해서는 플러그인 설치가 필요하다.

chrome에서 리액트의 구조를 살펴볼 수 있는 리액트 확장 플러그인을 설치한다.