React/React.HOC

HOC (Higher Order Function)

컴포넌트를 파라미터로 넘겨서 사용하는 방식

  • 파라미터로 컴포넌트를 받아오고, 함수 내부에서 새 컴포넌트를 만든 다음
    해당 컴포넌트 안에서 파라미터로 받아온 컴포넌트를 렌더링 하는 것
  • 자신이 받아온 props들은 그대로 파라미터로 받아온 컴포넌트에게 다시 주입해주고,
    필요에 따라 추가 props도 넣어준다.
  • HOC의 이름을 만들땐 with~ 형식으로 짓는다. (ex. withRequest)

장점

함수에 기능을 추가하는 코드를 재사용 할 수 있다.

단점

콜백지옥?

여러 로직이 componentWillUnmount, componentDidMount 등의 리액트 life cycle에 흩어지게된다.
함수는 단일 책임 원칙을 벗어나게되고, 코드는 복잡해지고, 디버깅도 어려워진다.

그래서 나타난게 Hook이다.

You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.
You forgot to set the url Patreon. Please set it in _config.yml.
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×