커스텀 훅 만들기

학습 목표

• What & Why?
• Building a Custom Hook
• Custom Hook Rules & Practices

Building Custom Hooks: Re-using Logic

What & Why?

커스텀 훅은 상태를 포함하는 로직을 재사용가능한 함수에 아웃소싱할 수 있다.

이전에 컴포넌트 함수가 아니면 hook과 state를 사용할 수 없다는 것을 떠올려보자. 만약 정규 함수를 다른 곳에서 재사용하고 싶어도 컴포넌트 함수 내부에 있지 않으면 사용하지 못한다. 이에 반해 커스텀 훅은 hook과 state를 사용할 수 있기에 좋은 선택이 될 것이다.

Building a Custom Hook and Custom Hook Rules

이제 커스텀 훅을 만들어보자. 폴더나 파일 이름은 자유롭게 해도 되지만 함수 이름은 꼭 “use”로 시작해야 React가 hook이라고 인식한다.

1. hooks 폴더를 생성한다.
2. “use-“로 시작하는 파일을 생성한다.
3. “use”로 시작하는 정규 함수를 만들고 export 해준다.

사용하는 방법은 React의 내장 훅과 똑같이 사용해주면된다.

Practices: 의존성 항목 줄이기 및 외부 데이터 가져오기

커스텀 훅과 useEffect를 함께 사용하다보면 의존성 항목에 추가해야 하는 것들이 생겨서 useCallback, useMemo를 써야 할 일이 많아질 것이다. 사용해도 상관없지만 의존성을 줄이는 것도 하나의 방법이 될 수 있다.

의존성 항목 줄인 코드 참고

만약 커스텀 훅의 인자 중 함수를 정의할 때 외부에 데이터가 있다면 두 가지 방법으로 해결할 수 있다. 첫째는, 함수를 데이터가 있는 곳으로 옮기는 방법이 있고 둘째는, bind를 이용해 미리 인수로 정해주면 된다.

bind로 데이터 가져온 코드 참고

---

강의명

• Udemy : React 완벽 가이드