HOC && HOF

HOC(Higher Order Component)

-리액트 공식문서-
고차 컴포넌트(HOC)는 컴포넌트 로직을 재사용하기 위한 리액트의 고급 기술입니다.

HOC는 실행하려는 컴포넌트를 인자로 받아 먼저 실행이 되고 인자를 받은 컴포넌트를 실행 시켜주는 기능을 한다.
이는 자바스크립트의 클로저의 특성을 이용하여 만들어졌다.

이 HOC를 어디에 사용하는가?

대표적으로 페이지의 권한을 처리할 때 사용하게 된다.
만약 페이지의 권한 처리를 해야하는데 HOC를 사용하지 않으면 페이지 마다 권한 처리를 해줘야하고, 만약 그 페이지의 양이 많다면 작성할때마다 같이 포함시켜야한다.
같이 작성하는 것은 문제가 되지 않을 수 있지만, 유지보수를 해야할 때 즉, 무언가 문제가 생겨 수정을 해야한다면 그 많은 페이지를 다 찾아서 일일이 다 수정을 해줘야 할 것이다.
이를 방지 하기 위해서 HOC를 사용한다.

위에서 말했듯이 HOC는 실행할 컴포넌트를 인자로 받아 실행이 된다.
이때 HOC가 먼저 실행이 되고, 안에 로직이 실행이 되면서 로그인 유무를 검증을 하는 것이다.
로그인이 되어있다면 컴포넌트를 그대로 실행시켜 렌더해주면 되고, 만약 로그인이 안되있다면 로그인 페이지로 보내주면 되는 것이다.

어떻게 사용하는가?

사용하는 방법은 어렵지 않다.
먼저 컴포넌트를 하나 만든다.

export default function Hoc(Component) {
	return function (props) {
      
    	console.log("나는 고차 컴포넌트")
      
      	return <Component {...props}>
    }
}

위와 같은 고차 컴포넌트를 만든다.

// 고차 컴포넌트(HOC)
const Hoc = (Component) = (props) => {
  
    	console.log("나는 고차 컴포넌트")
      
      	return <Component {...props}>
    }
}

고차 컴포넌트를 위와 같이 화살표 함수로도 작성 가능하다.
화살표 함수로 만드는 것이 코드량이 적어 조금 더 사용하기 편하다.

// 실행시킬 컴포넌트
import Hoc from '고차 컴포넌트 경로'

function Bbb(props) {
  
	return <div>Hellow {props.aaa}</div>
    
}
export default Hoc(Presenter)

위는 실행시킬 컴포넌트 부분이다.
위와 같이 고차 컴포넌트의 인자로 실행시킬 컴포넌트를 넣어준다.

// 렌더 해주는 컴포넌트
import Bbb from '컴포넌트 경로'

export default function Aaa() {
  
	return <Bbb qqq="World!" />
             
}

이제 실행시키게 되면 가장 먼저 Hoc 컴포넌트가 실행이 되게 되고 렌더가 되게 된다.
만약 고차 컴포넌트에 로그인 유무를 확인하고 그에 대한 로직을 작성했다고 가정해보면 권한에 따른 페이지 처리가 가능하게 되는 것이다.
이런식으로 사용하게 되면 고차 컴포넌트에 유지 보수 또한 증가하게 되는 것이다.

HOF(Higher Order Function)

고차 함수(HOF)의 정의는 함수를 매개변수로 사용하거나 함수를 반환하는 함수이다.
리액트에서 컴포넌트를 만들때 함수형으로 만든다면 아래와 같이 고차 함수를 응용할 수 있게된다.

리액트에서 고차함수를 언제 사용하는가?

그동안 특정 태그에 event가 발생했을때 id 값을 넘겨주기 위해서는 event.targer.id를 주로 사용했다.
하지만 프로젝트가 커질수록 의도하지 않은 중복된 id값이 생길수 있게 된다.
이러할때 HOF를 사용할 수 있다.

그럼 어떻게 사용하는가?

리액트에서는 컴포넌트를 return할 때 jsx로 리턴을 하게 된다.
이를 function으로 하게 되면 일반 함수가 리턴이 되게 된다.
이것을 활용하면 사용가능하다.

export default function Bbb(){

	const onClickButton = (id) => (event) => {
		console.log(id)
	}

	return <button onClick={onClickButton(123)}>클릭</button>
	

위와 같은 방법으로 함수를 실행할때 인자로 id값을 넘겨주게 되면 이전과 같이 따로 id 속성을 주어 받아오지 않아도 원하는 id 값을 받아 올 수 있게 된다.