이번에는 리액트의 고급 개념인 고차 컴포넌트(HOC, Higher Order Component)에 대해 알아보도록 하겠습니다. 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, 리액트의 구성적 특성에서 나오는 패턴입니다.
해당 내용은 리액트 공식문서에서 더욱 자세히 확인하실 수 있으며, 해당 개념은 추후에 배울 Redux등의 라이브러리를 사용할 수 있지만, 뿌리를 확인하시는 시간이라 생각하시면 좋을 것 같습니다. 그럼 고차 컴포넌트에 대해 간단히 알아볼까요?
HOC = function(컴포넌트) { return 새로운 컴포넌트; }
구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다.
위처럼 컴포넌트는 props
를 인자로 받고, UI
를 반환하는 것과 같이 HOC
은 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 역할을 하게 됩니다. 이렇게 컴포넌트를 넣고 재활용되는 로직이 추가된 새로운 컴포넌트를 받게 되는 것이죠. 특히, HOC
는 여러 라이브러리에서 제공하고 있습니다.
실제로 저희는 이미 HOC
에 대해서 사용한 경우가 있습니다. 어떠한 경우일까요? 바로react-router-dom
활용 시에 this.props.history.push
를 통해서 다른 라우터로 이동하는 경우에 사용했던 withRouter() 함수입니다.
export default withRouter(Login);
위처럼 withRouter(Login)
는 Login
이라는 컴포넌트를 함수를 통해 반환된 새로운 컴포넌트입니다. withRouter
라는 함수를 사용하고나니 props
에 hitory
, location
과 같은 새로운 아이들이 생겨난 것입니다.
HOC
를 사용하는 법은 아래와 같습니다.
render
메서드 안에서 고차 컴포넌트를 사용하지 마세요.ref
는 전달되지 않는다.추후 Redux를 사용하게 되면 connect()
함수를 통해 HOC를 활용하게 될 것입니다. 그때 다시 한번 자세히 HOC에 대해 알아보도록 하겠습니다.