HOC

컴포넌트를 가져와 새 컴포넌트를 반환하는 함수

여러 컴포넌트에서 같이 쓰이는 로직이 있는 경우(로그를 찍는다거나, 팝업의 위치를 계산하는 경우) 중복해서 컴포넌트마다 코드를 작성하지 않고, HOC를 활용해서 중복을 줄이고 재사용성을 높일 수 있다.

형태

function HOCexample(Component) {
	return class extends React.Component {
    	componentDidUpdate(...)
        render() {
			return <Component/>
        }
    }
}

이런식으로 해서 lifecycle method 안에 내용을 추가하거나, Component에 prop을 계산해서 넣어주는 등의 동작을 할 수 있다.

compose(A,B)(C) 요런식으로 여러개를 합쳐서 쓰거나 할 수 도 있는데 이런 식으로는 아직 활용을 안해봤다. 추후에 활용해보고 추가하겠다.

 

활용

이미지 편집기 개발 중에 텍스트나 이미지를 편집하는 경우 팝업을 여러개 띄워야 했다. (글꼴, 글씨 크기, 색 등등) 얘네들은 그 버튼을 클릭하면 뜨는데, 이때 위치를 눌린 버튼 딱 밑에다가 만들어야 했다. 그래서 여러개의 팝업 컴포넌트에 부모위치를 계산해서 prop으로 넘기는 로직이 중복되게 들어갔다.

이 로직을 따로 빼서 HOC로 만들어 중복을 줄이고 재사용성을 높였다.

function posWithPopup(parentPos, Component) {
	/// parentPos를 활용해 Component의 x,y 위치를 계산한다.
    return <Component pos ={pos}> /// 그다음 prop으로 넘겨줬다.
}