🕵️ 사용자 정의 훅 vs 고차 컴포넌트

📍 사용자 정의 훅

• 서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것
• 리액트에서만 사용할 수 있는 방식
• 반드시 use로 시작하는 함수로 만들어야 함

💡 사용자 정의 훅 유명한 저장소

• use-Hooks
• react-use
• ahooks

📍 고차 컴포넌트 (HOC, Higher Order Component)

• 컴포넌트 자체의 로직을 재사용하기 위한 방법
• 고차 함수의 일종으로, 자바스크립트의 일급 객체, 함수의 특징을 이용하므로 리액트가 아니더라도 자바스크립트 환경에서 널리 쓰일 수 있음
• 리액트에서 다양한 최적화나 중복 로직 관리를 할 수 있음 (ex. React.memo)
• with으로 시작해서 만들기
• 부수 효과를 최소화하기
  • ex. 인수로 받는 컴포넌트의 props를 임의로 수정, 추가, 삭제하는 일은 없어야 함
• 여러 개의 고차 컴포넌트로 컴포넌트를 감쌀 경우 복잡성이 커짐
• 고차 컴포넌트는 최소한으로 사용하는 것이 좋음

✏️ React.memo란?

• 부모 컴포넌트가 새롭게 렌더링될 때, 자식 컴포넌트는 props 변경 여부와 관계없이 리렌더링이 발생함
• props의 변화가 없음에도 컴포넌트의 렌더링을 방지하기 위해 만들어진 리액트의 고차 컴포넌트