[ Redux - HOC ]

💡HOC란 ?

Component를 개발하는 하나의 패턴으로써
재사용되는 값, 함수를 Props로 받아올 수 있게 해주는 옛날 패턴.
대표적으로 connect와 react-router-dom에 내장된 withRouter가 있다.

💡원리

다음 코드를 보자.

function withSth(WrappedComponent) {
	return (props) => (
    	<WrappedComponent {...props} sth="sth" />
    )
}

const MyComponent = ({ sth }) => {
	return <div>{sth}</div>
}

const EnhancedMyComponent = withSth(MyComponent);

const App = () => {
	return <EnhancedMyComponent />
}

1. 맨 처음, App arrow function을 통해 EnhancedMyComponent를 return한다.
   
   
2. 이 EnhancedMyComponent Component는 MyComponent에 withSth이라는 함수로 감싸져 있는데,
   
   
3. withSth함수는 기존 컴포넌트에 새로운 props를 직접 넣어주어 리턴해준다.
   
   
4. 결과적으로 MyComponent는 새로운 props를 전달 받아 그에 따른 값을 return해주는 방식이다.

결과적으로 EnhancedMyComponent는 sth이라는 props가 없음에도 불구하고, 추가해줄 수 있다는 것이다!