React 09 - 커스텀 훅과 HOC (고차 컴포넌트)

1. 커스텀 훅 (Custom Hook)

React의 Hook을 조합해서 만든 함수

 

useState, useEffect 같은 기존 hook을 활용해 공통 로직을 재사용할 수 있게 도와준다.

단순한 함수처럼 사용되어 JSX를 리턴하지 않는다.

 

 

2. HOC (Higher-Order Component, 고차 컴포넌트)

컴포넌트를 인자로 받아서 새로운 컴포넌트를 리턴하는 함수

 

컴포넌트를 감싸서 기능을 추가하는 데 쓰인다.

클래스형 컴포넌트에서 주로 사용되었으며, 최근에는 커스텀 훅이 더 많이 사용되는 추세다.

 

그럼 상황에 따라서 어떤 걸 선택해야 할까?

API 데이터 패칭

매번 useEffect, fetch 코드를 복사/붙여넣기 하는 건 비효율적이므로 커스텀 훅으로 로직을 분리하는 것이 유리하다.

 

로딩과 같은 공통 UI

컴포넌트를 렌더링하기 전에 공통 UI 처리가 필요하므로 HOC를 사용하는 것이 유리하다.

 

잘못 이해하고 있었던 점

기존에는 react-query나 react-toast 같은 외부 라이브러리에서 제공하는 훅만 커스텀 훅인 줄 알았는데 아니었다...

내가 로직을 분리하기 위해 작성한 함수도 커스텀 훅이라는 것... ^_ㅠ

이런 기술, 라이브러리에 대해서는 대충 이해하고 넘어가는 게 아니라 확실하게 짚고 넘어가야 된다는 걸 느꼈다

실무뿐만 아니라 이론적인 부분도 공부하기... 아자자