[React Hook] Custom Hook

참고: React Hook이란 무엇인가

Custom Hook

중복된 상태 관리 로직을 뽑아 내서 따로 함수화 하는 것!

• 프로젝트 내에 같은 일을 하는 상태 관리 로직이 있다면 그 코드를 뽑아내서 나만의 custom hook으로 만들 수 있다.

기존의 로직에서 뽑아내는 것이다

---

특징

1. 이름은 use로 시작해야 한다

• use가 붙은 훅은 상태를 관리하는 것임을 쉽게 알 수 있기 때문이다
• eslint에서 훅으로 인식해서 그에 맞는 경고를 줄 수 있다

2. 인자와 리턴값은 사용자 자유이다

• parameter를 이용해 hook으로 값을 전달할 수 있다
• 원하는 대로, 필요한 대로 리턴값을 정할 수 있다

3. stateful logic에 관한 것이지 state 자체에 관한 것이 아니다.

• 단순히 상태를 바꾸는 코드가 반복되는 것은 custom hook으로 뽑아낼 필요가 없다
• state와 eventhandler를 결합한 로직과 같이 어떤 로직이 더 포함되어야 뽑아내는 의미가 있다
• 예시 코드

import { useState } from 'react';

export function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  const inputProps = {
    value: value,
    onChange: handleChange
  };

  return inputProps;
}

---

언제 사용하면 좋은가?

1. 리액트 밖의 시스템과 동기화하고 싶을 때

• (ex) 통신을 할 때

2. React built-in API에서 제공하지 않는 로직을 짜고 싶을 때

---

참고 자료

custom hook - react 공식 블로그
러닝 리액트 2판/ 알렉스 뱅크스, 이브 포셀로 저/ 한빛 미디어, O'RELLY