고차 컴포넌트(HOC)와 Hook

고차 컴포넌트(HOC, higher-order-componentm)와 Hook은 여러 컴포넌트들에서 공유할 코드를 작성하기 위해 사용된다. 그럼 무얼 써야하는가? 리액트 공식문서에 따르면, hook이 더 간단하며 렌더링 트리가 깊어지는 것을 막기 때문에 더 나은 방법임을 알 수 있다. 또한 HOC의 단점은 또 있는데, 동시에 여러 개의 HOC를 쓰게되면, props의 이름이 중복되게 된다면 원하는대로 동작하지 않을 수 있다. 중복이 없더라도 인터페이스를 한 눈에 파악하기 어렵다. 그러나 hook의 경우, 클래스형 컴포넌트에서는 사용할 수 없기 때문에 항상 HoC를 대체할 수는 없다.

Render Props 패턴도 HOC와 비슷한 패턴이다. 차이점은 이 링크를 참고하면 된다. redner props 패턴의 경우 단순히 클래스형 컴포넌트에서만 쓰는 낡은 패턴은 아니라고 할 수 있다. 조건부 렌더링의 경우 render props 패턴이 hook에 비해 이점을 가진다. (참고 링크)